使用脚手架create-react-app创建第一个应用

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();

View Code

接下来进行按照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();

View Code

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

View Code

最终效果如下：

 

转载于:https://www.cnblogs.com/yangshixiong/p/11338936.html