React思维方式

发表于 | 分类于 |

环境搭建

初始化

在默认已有 node 环境下，先安装脚手架：

1
npm install create-react-app -g

我们在命令行中执行下面的命令：

1
create-react-app first_react_app

这个命令会在当前目录下创建一个名为 first_react_app 的目录，在这个目录中会自
动添加一个应用的框架，随后我们只需要在这个框架的基础上修改文件就可以开发 React应用，避免了大量的手工配置工作：

1
2
cd first_react_app
npm start

启动项目。

第一个组件

在 first-react-app 目录下包含如下文件和目录：

1
2
3
4
5
src/
public/
README.md
package.json
node modules/

在开发过程中，我们主要关注 src 目录中的内容，这个目录中是所有的源代码。
create-react-app 所创建的应用的入口是 src/index,js 文件，代码如下：

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我们要定义一个新的能够计算点击数组件，名叫 ClickCounter ，所以我们修改 index
js 文件如下：

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ClickCounter from './ClickCounter';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<ClickCounter />, document.getElementById('root'));
registerServiceWorker();

在 src 目录
下增加一个新的代码文件 ClickCounter.js，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React,{Component} from 'react';
class ClickCounter extends Component{
	constructor(props){
		super(props);
		this.onClickButton=this.onClickButton.bind(this);
		this.state={count:0};
	}

	onClickButton(){
		this.setState({count:this.state.count+1});
	}

	render(){
		return(
			<div>
				<button onClick={this.onClickButton}>Click Me</button>
				<div>
					Click Count:{this.state.count}
				</div>
			</div>
		);
	}
}
export default ClickCounter;

Component 作为所有组件的基类，提供了很多组件共有的功能，下面这行代码，使用
的是 ES6 语法来创建一个叫 ClickCounter 的组件类， ClickCounter 的父类就是 Component:

1
class ClickCounter extends Component{

除了在组件中定义交互行为，我们还可以在 React 组件中定义样式，我们可以修改
ClickCounter.js 中的 render 函数，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
render(){
		const counterStyle={
			margin:'16px',
			color:'red'
		}
		return(
			<div style={counterStyle}>
				<button onClick={this.onClickButton}>Click Me</button>
				<div>
					Click Count:{this.state.count}
				</div>
			</div>
		);
	}

分解 React 应用

我们启动 React 应用的命令是 npm start ，看一看 package.json 中对 start 脚本的定义，
如下所示：

1
2
3
4
5
6
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

其中 build 可以创
建生产环境优化代码，test 用于单元测试，这个 eject （弹射）命令做的事情，就是把潜藏在 react-scripts 中的一系列技术找配置
都“弹射”到应用的顶层，然后我们就可以研究这些配置细节了，而且可以更灵活地定
制应用的配置。

------ 本文结束 ------
0%