本篇文章主要的介绍了关于react的安装步骤，还有关于react的特点和概念的解释，下面就让我们一起来看这篇文章吧
一 react1. 概念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 inityarn 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 classclass welcome extends react.component { render() { return ( <h1> hello, {this.props.name} </h1> ) }} class app extends react.component { render() { return ( <p> <welcome name = "zhz1" /> <welcome name = "zhz2" /> <welcome name = "zhz3" /> </p> ) }}
2. 函数式 (无状态组件)function welcome(props) { return <h1> hello, {props.name} </h1>}function app() { return ( <p> <welcome name = "zhz1" /> <welcome name = "zhz2" /> <welcome name = "zhz3" /> </p> )}
3. es5-写法 react.createclass(仅做参考)react.createclass会自绑定函数方法（不像react.component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
const welcome = (props) => { return <h1> hello, {this.props.name} </h1>}const app = react.createclass ({ render() { return ( <p> <welcome name1 = "ss" /> <welcome name1 = "zhz2" /> <welcome name1 = "zhz3" /> </p> ) }});
导出(提供接口)
export default app
5. props 属性6. state 状态react 把组件看成是一个状态机（state machines）。通过与用户的交互，实现不同状态，然后渲染 ui，让用户界面和数据保持一致。
react 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 dom）（想看更多就到react参考手册栏目中学习）
class welcome extends react.component { render() { return ( <h1 onclick={this.props.onclick} > hello, {this.props.name} </h1> ) }} class app extends react.component { constructor() { super(); this.state = { selected: false } } changetext() { this.setstate((prestate, props) => ({ selected: !prestate.selected })) } render() { return ( <p> <welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onclick={() => this.changetext()} /> <h1 onclick={() => this.changetext()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1> </p> ) }}export default app;
6. 注意class 属性变为 classname
tabindex 属性变为 tabindex
for 属性变为 htmlfor
textarea 的值通过需要通过 value 属性来指定
style 属性的值接收一个对象，css 的属性变为驼峰写法，如：backgroundcolor。
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react如何安装？react的安装步骤介绍（附完整实例）的详细内容。