一，react是什么？

react是一款前端编程框架，是一个用于构建用户界面的 javascript 库，最初起源于 Facebook 的内部项目，开源以后因其便捷的操作迅速成为了前端工程师最得力的工具，React 拥有较高的性能，代码逻辑非常简单，目前在全世界范围内仍是最受欢迎的前端框架。

二，react安装

首先，确保电脑上具备nodejs环境，之后用 win+r 呼出控制台，输入 cmd 命令弹出cmd控制台（小黑框）之后在默认路径输入如下代码

npm i -g create-react-app //全局安装react环境无需选择特定文件夹

安装成功后用cd / 命令跳转到要创建目录的文件夹之下输入如下代码创建一个react项目，我这里安装在了C盘中

cd /   //cd+/跳转到电脑c盘

C:\>create-react-app mreact  //create-react-app + 文件名 该文件名是react根文件名

创建过程可能会有一点漫长，请耐心等待。

三，配置和基础应用

创建完成后cmd控制台会给出如下信息：

然后我们在后面输入 cd /mreact 跳转到我们创建的react目录之下。输入如下代码

C:\>cd mreact //转到mreact文件目录下

C:\mreact>npm start  //运行项目

等待控制台处理，处理完之后会自动打开浏览器，为你展现一个react项目。就像图片中一样。

此时可以先把cmd控制台最小化到托盘，但是千万不要关闭，后面还会用到。

好了，我们已经有了一个react脚手架基础了，之后用vs code 找到并打开该文件夹，我们将看到该文件夹下已经有了如下的文件

 为了编程的愉快，这里推荐在vs code装载如下的插件

 然后我们点开src目录把里面的App.js和App.css里面的内容全选然后删除，再回到浏览器我们就得到了一个空白页面，这样就能构建我们自己的网页了，对了vs code还要做如下设置，适配react的工作环境

 做完如上的工作我们已经完成了最基本的环境。

函数组件（无状态组件/视图组件）

要学会并运用函数组件， 首先我们要先知道jsx是什么，jsx是JavaScript混合xml（html）的语法格式，目的是为了更好的在JavaScript中编写html模板。

jsx的主要特点有以下几点：

1. 有且只有一个根节点

2. class写成classname

3. 在{ }内写JavaScript

4. 数组里面可以直接写html标签

5. 注释用（/**/）

6. 样式可以直接展开

j首先在页面之中导入css样式

import './App.css'; //导入App.css的css文件

App.css内部代码如下

.active{
  color: #f70;
}

之后在后面构建一个函数（因为是把js和html结合所以要用函数的方式来表述）最后不要忘了导出该函数

import './App.css';
function App() {
    return()   //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数

之后定义一个数组这里命名为arr，arr数组内可以写页面元素，并且可以直接通过return输出在页面之上

import './App.css';
function App() {
    var arr = [
    <h3>ajax</h3>,
    <h2>react</h2>,
    <p>vue</p>
  ]，
    return(
    {arr} //此时页面会显示ajax，react，vue三个元素
    )   //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数

同时我们也可以再定义一个名为syles的对象并在里面写上对应的样式

import './App.css';
function App() {
  var arr = [
    <h3>ajax</h3>,  //元素之间用逗号隔开
    <h2>react</h2>,
    <p>vue</p>
  ]
  var styles = {
    fontSize: "60px", //style样式按照css来写多个字母排列要使用驼峰布局如：backGroundColor
    color: "#f70"
  }
  return (
    <div>你好 react
      <p className='active'>爱你呦</p> //jsx要求用className绑定类名，                                   
                                      //这里的active是在App.css内定义的

        <p>{2 + 3}</p>              
      {arr}
      <p style={styles}>文本</p>//该行文字在页面中会以60px大小和#f70的颜色在页面中显示
    </div>
  )
}
export default App;

类组件（有状态组件/容器组件）

接下来我们来了解一下react里的类组件，清空刚才我们所写的函数组件的内容，写下类组件的基本配置

import React，{Component} from ‘react’  //导入react设置
export default class App extends Compnent{//导出到页面
 render(){
    return(
    <div>
        页面主要内容
    </div>)      //return内部写页面布局 *注意只能有一个div作为根组件
 }
}

上面就是我们的主要结构，接下来我们就要写数据进行数据和页面的联携了

import React，{Component} from ‘react’  //导入react设置
export default class App extends Compnent{//导出到页面
 constructor(props) {
        super(props)
        this.state = {
           
        }                    //state内部写数据
    }
  render(){
    return(
    <div>
        页面主要内容
    </div>)      //return内部写页面布局 *注意只能有一个div作为根组件
 }
}

之后在return内写组件绑定数据就好了

import React, { Component } from "react";

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "<b>喜</b>欢", //state中的msg数据
            isLog: false,      //state中的isLog数据
            list: ['vue', 'react', 'jQuery', 'js'] //state中的list数组
        }
    }
    //sayHello(msg="123"){   //函数的第一种写法
    //    alert(msg)
    //    }
    sayHello = (msg = "默认值") => {  //函数的第二种写法
        alert(msg)
    }
    render() {
        return (
            < div >
                {/*更新数据 setState*/}
                <button onClick={() => {
                    this.setState({ isLog: !this.state.isLog }, () => {
                        console.log('完成');
                    })
                }}>切换</button> <br />
                {/*事件*/}
                <button onClick={this.sayHello.bind(this, '中国人不骗中国人')}>你好-传参2</button>
                <button onClick={() => { this.sayHello('参数1') }}>你好-传参</button>
                <button onClick={this.sayHello}>你好-1</button>
                <button onClick={() => alert('2020')}>你好</button>
                {/*列表渲染*/}
                {this.state.list.map(item => <p key={item}>{item} </p>)}
                {/*文本渲染*/}
                {this.state.msg}
                <div dangerouslySetInnerHTML={
   { __html: this.state.msg }}></div>
                {/*条件渲染*/}
                {this.state.isLog ? <p>欢迎</p> : <p>请登录</p>}
                {this.state.isLog && <p>wink</p>}
            </div >
        )
    }
}

这些就是react最基本的操作和页面构架啦。