1.react.js项目的环境搭建
(1).在node.js官网下载一个node.js的xmi文件运行安装好之后就可以进行第二步了
（2）打开VS code 选择一个文件夹目录或者新建一个文件目录作为工作空间，鼠标选中文件目录，在菜单栏找到Terminal新建一个终端界面（New Terminal）
（3）安装npm 依赖：npm install
（4）在终端里使用cd 命令进入工作空间，然后使用npx create-react-app test 命令创建一个项目名为test的项目（test只是举例）
（5）继续使用cd命令进入项目文件夹下（test），然后使用npm start 命令启动项目，在浏览器的地址栏中输入：localhost:3000 按 enter键之后看到以下图标即代表项目启动成功
2.组件
注意： 组件名称必须以大写字母开头。React会将以小写字母开头的组件视为原生DOM标签。例如，<div/> 代表HTML的div标签，而 <Welcome/> 则代表一个组件，并且需在作用域内使用 Welcome。你可以在深入JSX中了解更多关于此规范的原因。
（1）函数组件
创建一个Greet.js文件
import React from 'react'//写好函数会自动引入importfunctionGreet(props) { return<h1>Hello, {props.name}</h1>; }
App.js文件中：可以直接使用自定义的标签
import {Greet} from './components/Greet'function App() { return ( <div className="App"> <Greet>此标签和html标签一样可以使用</Greet> </div> ); } export default App;
2）类(class)组件
创建一个Welcome.js文件
import React, {Component} from "react"; class Welcome extends Component{ render(){ return <h1>Class component <h2>Welcome{this.props.name} a.k.a {this.props.heroName}</h2></h1> } } export default Welcome;
App.js文件中：可以直接使用自定义的标签
import Welcome from "./components/Welcome" function App() { return ( <div className="App"> <Greet name="Bruce" heroName="Batman"> <p>This is children props</p> </Greet> <Greet name="Clark" heroName="Superman"> <button>Action</button> </Greet> <Greet name="Danan" heroName= "Wonder Woman"></Greet> <Welcome name="Bruce" heroName="Batman"></Welcome> <Welcome name="Clark" heroName="Superman"></Welcome> <Welcome name="Danan" heroName="Wonder Woman"></Welcome> </div> ); } export default App;
3）组合组件
（4）提取组件
