本篇文章主要的介绍了关于react的安装步骤，还有关于react的特点和概念的解释，下面就让我们一起来看这篇文章吧

一 React

1. 概念

React 是一个用于构建用户界面的 javascript 库。  React主要用于构建UI，是 MVC 中的 V（视图）。  React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。  React 拥有较高的性能，代码逻辑非常简单。

2. 特点

• 高效 −react通过对dom的模拟，最大限度地减少与dom的交互。

• 灵活 −React可以与已知的库或框架很好地配合。

• JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用它。

• 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。(Redux)

3. [安装] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts

package.json

{  "name": "test",  "version": "1.0.0",  "description": "zzz",  "main": "index.js",  "license": "MIT",  "dependencies": {    "react": "^16.2.0",    "react-dom": "^16.2.0",    "react-scripts": "^1.0.17"
  },  "scripts": {    "start": "react-scripts start"
  }
}

4. 组件

1. ES6 class

class Welcome extends React.Component {
    render() {        return (            
 Hello, {this.props.name} 
        )
    }
} 
class App extends React.Component {
    render() {
        return (            

                
                
                
            
        )
    }
}

2. 函数式 (无状态组件)

function Welcome(props) {
    return 
 Hello, {props.name} 
}
function App() {
    return (        

            
            
            
        
    )
}

3. ES5-写法 React.createClass(仅做参考)

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

const Welcome = (props) => {    return 
 Hello, {this.props.name} 
}
const App = React.createClass ({
    render() {
        return (            

                
                
                
            
        )
    }
});

导出(提供接口)
export default App

5. Props 属性

6. State 状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

ListenHub

超真实的AI播客生成器

下载

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）（想看更多就到PHP中文网React参考手册栏目中学习）

class Welcome extends React.Component {
    render() {        return (            
 Hello, {this.props.name} 
        )
    }
} 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        }
    }
    changeText() {
        this.setState((preState, props) => ({
            selected: !preState.selected
        }))
    }
    render() {
        return (            
 
                 this.changeText()} />                
 this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } 
            

        )
    }
}
export default App;

6. 注意

• class 属性变为 className

• tabindex 属性变为 tabIndex

• for 属性变为 htmlFor

• textarea 的值通过需要通过 value 属性来指定

• style 属性的值接收一个对象，css 的属性变为驼峰写法，如：backgroundColor。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。