一，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最基本的操作和页面构架啦。