1、声明式设计
react
采用声明范式，可以轻松描述应用。
2、高效
react
通过对DOM的模拟（虚拟dom），最大限度的减少与DOM的交互。
3、灵活
react
可以与已知的库或框架很好的配合。
4、
jsx
jacascript语法扩展。
5、组件通过
react
构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6、单向响应的数据流，
react
实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
1.2 创建react项目
全局安装
create-reacy-app
npm install -g create-react-app
创建一个项目
create-react-app your-app
（注意命名方式）
这个过程需要等待，实际上会安装三个东西
1、react：react的顶级库
2、react-dom：因为react有很多的运行环境，比如app端端react-native，我们要在web 上运行就使用react-dom
3、react-scripts：包含运行和打包react应用程序的所有脚本及配置
tips：如果不想全局安装，也可直接使用
npx
npx create-react-app your-app
tips: nrm是npm镜像管理工具：
1.3 编写react应用程序
创建完项目后，删除
src
文件夹里面的所有文件：
然后在
src
下新建
index.js
文件：
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>111</div>, document.getElementById("root"));
二、react组件开发
2.1 class组件
新建文件夹及文件：
base.js中写入：
import React from 'react';
class App extends React.Component {
render () {
return (
<section>
<div>hello react Component</div>
</section>
export default App;
index.js中引入：
页面效果：
2.2 函数组件
新建function.js写入：
function App() {
return (
<section>
<div>hello function Component</div>
</section>
index.js引入：
react16.8之前函数式组件也叫做无状态组件。16.8之后react hooks就可以让函数式组件有状态了。
2.3 组件嵌套
vscode安装：
安装完之后，输入rcc将出现：
在nested.js中写入：
import React, { Component } from 'react'
class Child extends Component {
render () {
return <li>Child</li>
class Navbar extends Component {
render () {
return (
<ul>Navbar
<Child />
function Swiper() {
return <div>Swiper</div>
const Tabbar = () => <div>Tabbar</div>
export default class Nested extends Component {
render() {
return (
<Navbar></Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
在 index.js中引入：
2.4 组件样式
在vue中使用{{}}双大花括号进行变量替换，js运算。但在react中用{}来进行变量替换，js运算。
在style.js写入：
import React, { Component } from 'react'
export default class Style extends Component {
render() {
var myname = 'justin'
var obj = {backgroundColor: 'yellow', fontSize: '30px'}
return (
<section>
{10 + 20} - {myname}
</div>
<div style={obj}>
{10 > 20 ? 'aaa' : 'bbb'}
</div>
</section>
新建css文件夹新建style.css：
在index.js导入index.css：
style.js修改成如下：
import React, { Component } from 'react'
import '../css/style.css'
export default class Style extends Component {
render() {
var myname = 'justin'
var obj = {backgroundColor: 'yellow', fontSize: '30px'}
return (
<section>
{10 + 20} - {myname}
</div>
<div style={obj}>
{10 > 20 ? 'aaa' : 'bbb'}
</div>
{/* react推荐我们使用行内样式，因为react认为每一个组件都是一个独立的整体 */}
<div style={{color: 'red', fontSize: '35px'}}>
88888888
</div>
{/* 为了避免与class类关键字冲突，react中使用className表示样式类 */}
<div className="active">
{10 < 20 ? 'aaa' : 'bbb'}
</div>
{/* for是关键字，为了区别js的for关键字，html的label的for属性写成htmlFor */}
<label htmlFor="username">用户名：</label>
<input type="text" id="username"></input>
</section>
在学习的React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
