react只要理念就是基于组建来开发应用
使用脚手架进行创建，在当前目录下使用脚手架create-react-app 【应用名称】进行创建，完成之后cd进入目录，使用npm start启动程序
进入该页面则代表成功
index.js文件内容如下，可见其引用app组件，
1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘; 3 import ‘./index.css‘; 4 import App from ‘./App‘; 5 import * as serviceWorker from ‘./serviceWorker‘; 6 7 ReactDOM.render(<App />, document.getElementById(‘root‘)); 8 9 // If you want your app to work offline and load faster, you can change 10 // unregister() to register() below. Note this comes with some pitfalls. 11 // Learn more about service workers: https://bit.ly/CRA-PWA 12 serviceWorker.unregister();
接下来进行按照app的样式建立自己的文件或者直接在app中修改以实现自己的功能
index.js文件
1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘; 3 import ‘./index.css‘; 4 // import App from ‘./App‘; 5 import ClickCount from ‘./ClickCount‘; 6 import * as serviceWorker from ‘./serviceWorker‘; 7 8 ReactDOM.render(<ClickCount />, document.getElementById(‘root‘)); 9 10 // If you want your app to work offline and load faster, you can change 11 // unregister() to register() below. Note this comes with some pitfalls. 12 // Learn more about service workers: https://bit.ly/CRA-PWA 13 serviceWorker.unregister();
ClickCount.js文件，注意注意抛出的组建明层首字母需要大写，否则无法引用，注意虽然React在该文件中看似未被应用，但是不能删除，因为使用JSX范围内必须要有React，JSX就是return里面的语法，类似于html，但是并不局限于html，它可以是任意定义的一个组件，例如在index.js中，render回去的Clickcount。
另外onClick与html中的onclick不一样，onClick挂载的每个函数，都可以控制在组件之内，不会污染全局空间，这是因为其使用事件委托的方式处理，因此无论有多少个onClick，在最终DOM树上之后有一个事件处理函数，点击事件会被该函数捕捉，然后根据具体组建分配给特定函数，性能会比每个事件挂载一个事件处理函数要好，因为React会存在生命周期，unmount时会清除所有事件相关的函数，内存不会出现泄漏。
1 import React, {Component} from ‘react‘ 2 class ClickCount extends Component{ 3 // 继承属性 4 constructor(props){ 5 super(props); // 使用super之后就可以使用this 6 this.OnClickButton = this.OnClickButton.bind(this) // 绑定this，这样可保证传入函数的this是相同的，并且可调用 7 this.state = {count:0} // 定义仓库，count的初始值是0 8 } 9 10 OnClickButton(){ 11 this.setState( 12 {count:this.state.count+1} // 对state里面的值进行改变时，如果单纯赋值修改，则不能渲染到页面中，react提供一个方法，setState。一旦state里面的值发生修改，则会渲染页面 13 ) 14 } 15 // 返回定义的定义的功能，类似于django中的render方法，提交自定义功能，将给调用者，最终react渲染的指定位置 16 render(){ 17 // return跟着的内容为最终返回的内容 18 return( 19 <div> 20 <button onClick={this.OnClickButton}>点我</button> 21 <p>clicl count: {this.state.count}</p> 22 </div> 23 ) 24 }; 25 } 26 export default ClickCount
最终效果如下：
原文：https://www.cnblogs.com/yangshixiong/p/11338936.html
