1. 关于React前的一些准备

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库，因此在使用React之前最好有以下基础

• html
• css
• JavaScript

个人使用的开发工具是webstrom

2. React安装

2.1 node.js

首先要安装node.js，以使用npm命令。
node.js官网地址

2.2 安装

安装命令

npm install -g create-react-app

2.3 创建React项目

安装完成之后就可以创建一个React项目

create-react-app my-app

其中的my-app是要创建的文件名
如果是使用westrom可以直接创建

创建完成后用cd命令cd到刚刚创建的文件夹中，执行

npm start

打开http://localhost:3000，如果有此画面

创建成功

3. 文件目录

创建的React app目录如下

其中最关键的是src文件下的内容

3.1 App.js

代码内容如下

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

return里面的内容即是显示在网页中的内容，所使用的jsx代码结构与html非常相似，其中的className就是相当于class，对应css里相应的样式。
最下面的export default App;是将定义的App函数导出，可以在其他js文件中用import引入。

3.2 index.js

代码内容如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

其中import App from './App';就是引入了App.js中导出的App。
ReactDOM.render是React的最基本方法，用来渲染其中的元素，将模板转为html语言，并插入指定的DOM节点，

      <React.StrictMode>
        <App />
      </React.StrictMode>

就是要渲染的内容，document.getElementById('root')则是要插入到root节点中，root节点在public文件夹下的index.html中 <div id="root"></div>。

4. 基础语法

直接通过修改index.js和App.js进行测试

4.1 组件

4.1.1 定义

注意组件名要是大写字母开头
import React from "react";

class App extends React.Component{
    render(){
        return（
            <div>内容</div>
        ）
    }
}
export default App;

4.1.2 复合组件

通过创建多个组件来合成一个组件，即把组件的不同功能进行分离。

import React from "react";

class App extends React.Component{
    render() {
        return(
            <div className="App">
                <Hello />
                <World />
            </div>
        )
    }
}
class Hello extends React.Component{
    render() {
        return(
            <p>hello</p>
        )
    }
}
class World extends React.Component{
    render() {
        return(
            <p> world</p>
        )
    }
}

组件Hello和World复合到组件App中，实现各自的功能。

4.2 渲染元素

4.2.1 使用function

类似刚开始App.js中的内容

function App() {
 return (
    <div className="App">
      <p>hello world</p>
    </div>
  );
}

这样return中的内容hello world就会通过index.js的ReactDOM.render被渲染到页面上

4.2.2 使用组件

将之前的function注释掉，代码改为

import React from "react";

class App extends React.Component{
    render() {
        return(
            <div className="App">
                <p>hello world</p>
            </div>
        )
    }
}

同样效果

4.3 状态state

state 可以根据与用户交互来改变，因此有些容器组件需要定义 state 来更新和修改数据。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

import React from "react";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            num:1
        }
    }
    render() {
        return(
            <div className="App">
                <p>{this.state.num}</p>
            </div>
        )
    }
}

state中的数据就可以被渲染到页面上，需要用到setState

import React from "react";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            num:1
        }
    }
    add(){
        this.setState({
            num:this.state.num+1
        })
    }
    render() {
        return(
            <div className="App">
                <p>hello world</p>
                <p>{this.state.num}</p>
                <button onClick={()=>this.add()}>add</button>
            </div>
        )
    }
}

在add函数中setState对num的值进行更新，这样每点一次按钮就可以令num的值+1，而其他元素无需重新渲染。

注意：如果在onClick中使用{this.add()}这样的写法，在render的时候它就会执行，这时候里面改变state,导致页面渲染，触发render,如此一直循环多次，报错。

4.4 props

state 和 props 主要的区别在于 props 是不可变的，子组件只能通过 props 来传递数据。

class App extends React.Component{
    render() {
        return(
            <div className="App">
                <Hello hello="hello" />
            </div>
        )
    }
}
class Hello extends React.Component{
    render() {
        return(
            <p>{this.props.hello}</p>
        )
    }
}

子组件中使用this.props.hello获取了父组件传递的参数hello。
实际应用中可以将state和props混合使用，在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。

5.持续更新，暂时还没想好