初识React

  • 官方文档
  • React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
  • React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面UI的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

react的特性

image

虚拟DOM

image
image

创建第一个React项目

  1. 全局安装create-react-app
npm install -g create-react-app
  1. 创建一个React项目
create-react-app myapp
  • 项目生成后，默认目录结构包含:
  • public和src两个文件夹 ，其中public里的index.html是整个项目的首页，最终所有的组件内容会挂载到这个页面中；src下面就是我们编写组件的地方，默认里面有index.js文件，是一个入口文件
  • 项目创建成功会出现以下画面:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:


npm start
Starts the development server.


npm run build
Bundles the app into static files for production.


npm test
Starts the test runner.


npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:


cd your-app npm start

Happy hacking!
  • 根据上面的提示，通过cd myapp 命令进入目录并运行npm start 即可运行项目。

生成项目的目录结构如下：

├── README.md				使用方法的文档
├── node_modules			所有的依赖安装的目录
├── package-lock.json		锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json			
├── public					静态公共目录
└── src						开发用的源代码目录

编写第一个react应用程序

  • react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create- react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在 里面重新创建一个index.js(整个项目的入口文件). 写入以下代码:
/* --------------- react项目入口文件 ---------------- */
/*
    从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 
    因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
*/
import react from 'react'//1.引入react
/*
    ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。
    它是从 react-dom 中引入的，而不是从 react 引入。
*/
// import ReactDOM from 'react-dom'//2.引入react-dom //react17

import * as ReactDOM from 'react-dom/client'; // react18

/*
    ReactDOM(react18不再支持)里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
*/ 
// ReactDOM.render( // react17
//     /*
//         这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。
//         语法错误吗？这并不是合法的 JavaScript 代码, 
//         “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
//     */ 
//     <h1>欢迎进入React的世界</h1>,
//     // 渲染到哪里(函数式编程)
//     document.getElementById('root')
// )

// react 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div><strong>欢迎进入React的世界</strong></div>);// render方法就是渲染的意思,需要我们自己手动的写dom结构

// 这就是 jsx 写法: jsx = js + xml

结果展示

image

JSX语法

  • JSX 将 HTML 语法直接加入到JavaScript代码中，再通过翻译器转换到纯JavaScript后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。 编译过程由Babel 的JSX编译器实现。

  • JSX的原理是用js对象来描述一个DOM元素结构

  • jsx全称:JavaScript XML,它是react定义的一种类似于XML的JS扩展语法: JS + XML本质是:

React.createElement(component, props, ...children)//语法糖

// 也就是说下面两种写法的结果是一致的,但是推荐使用第二种
// 写法1
root.render(React.createElement("h1",
    {id:'title'},
    '欢迎进入React的世界'
));

// 写法2
root.render(<h1 id='title'>欢迎进入React的世界</h1>);

  • 它的作用是用来简化创建虚拟DOM,其实所谓的JSX 其实就是JavaScript对象，所以使用 React 和JSX的时候一定要经过编译的过程:

    • JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面

JSX语法规则:

  1. 定义虚拟DOM的使用,不要使用引号””

    // 定义虚拟dom不能使用"" 
    const root = ReactDOM.createRoot(document.getElementById('root'));
    // 里面的html结构直接写即可,不能使用引号包裹
    root.render(<h1 id='title'>欢迎进入React的世界</h1>);// render方法就是渲染的意思,需要我们自己手动的写dom结构

  2. 标签中混入js代码的时候需要使用{}

  3. 定义样式类名时,不能使用class,要使用className,因为class是ES6中的类定义关键字

    <!-- 我在id属性中使用了js语句,需要使用{}包裹js语句,以及不能使用class来定义标签类名,需要使用className -->
    <h2 className="title" id={myId.toLowerCase()}>

  4. 内联样式,要使用style={{key:value}}的形式去写(第一层表示你填写js代码,里层表示你填的js对象)

    <!-- style内联样式中第一层{}表示里面填写js代码,第二层{}里面表示以js对象的形式填写的css样式 -->
    <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>

  5. 虚拟Dom只能存在一个根标签

  6. 标签必须闭合

    <!-- jsx中只能存在一个跟标签,与Vue2中的template类似 -->
    <div>
        <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <!-- 标签必须闭合(双标签闭合或者自闭合) -->
        <input type="text"/>
    </div>

  7. 标签首字母

    1. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
    <!-- 字母小写表示html中的同名元素,不存在则报警告(页面同样会渲染里面的内容) -->
    <good>你好!</good>
    <!-- 字母大写则表示对应的组件,没有定义则会报错 -->
    <Good>你好!</Good>

小练习:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
		/* 
      一定注意区分：【js语句(代码)】与【js表达式】
      		1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
         		下面这些都是表达式：
         				(1). a
         				(2). a+b
         				(3). demo(1)
         				(4). arr.map() 
         				(5). function test () {}
      		2.语句(代码)：
         		下面这些都是语句(代码)：
         				(1).if(){}
         				(2).for(){}
         				(3).switch(){case:xxxx}
		*/

		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

结果展示:

image