深入浅出React和Redux Day1:创建一个简单的react应用-CFANZ编程社区

书中提到的代码下载来源

https://github.com/mocheng/react-and-redux

React是一个JavaScript语言的工具库

React的创建者Facebook提供了一个快速开发React应用的工具，名叫create-react-app。create-react-app是一个通过npm发布的安装包。通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发。

在确认Node.js和npm安装好之后，命令行中执行下面的命令安装

create-react-app
npm install –-global create-react-app

注意： 安装后会得到一个警告。表示安装的tar版本不再维护，你可以使用 npm i tar 命令安装最新的版本

npm WARN deprecated tar@2.2.2: 
This version of tar is no longer supported, and will not receive security updates. 
Please upgrade asap.

安装过程结束之后，你的电脑中就会有 create-react-app 这样一个可以执行的命令，这个命令会在当前目录下创建指定参数名的应用目录。

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

create-react-app first_react_app

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

在执行以上命令后，根据提示，输入下面的命令：

cd first_react_app
npm start

这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开了一个网页

增加一个新的React组件

一个基本的点击计数组件

import React, { Component } from 'react'; 
//import是ES6（EcmaScript6）语法中导入文件模块的方式
//不导入react将会报错，在使用JSX的代码文件中，即使代码中并没有直接使用React，
//也一定要导入这个React，这是因为JSX最终会被转译成依赖于React的表达式。

class ClickCounter extends Component {  
//用的是ES6语法来创建一个叫ClickCounter的组件类，
//ClickCounter的父类就是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;

导入组件的方式

import ClickCounter from './ClickCounter'

//使用组件
ReactDOM.render(
  <React.StrictMode>
    <ClickCounter />
  </React.StrictMode>,
  document.getElementById('root')
);

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

render() {
  const counterStyle = {    
  margin: '16px'  
  }  
  return (
    <div style={counterStyle}>  //这里插入样式    
        <button onClick={this.onClickButton}>Click Me</button>      
        <div>      
            Click Count: 
            <span id=”clickCount”>{this.state.count}</span>      
        </div>    
    </div>
  );}

JSX

所谓JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript中可以编写像HTML一样的代码。在ClickCounter.js的render函数中，就出现了类似这样的HTML代码，在index.js中，ReactDOM.render的第一个参数也是一段JSX代码。

在JSX中使用的“元素”不局限于HTML中的元素，可以是任何一个React组件
React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写，react中组件首字母为大写。

根据做同一件事的代码应该有高耦合性的设计原则，既然我们要实现一个ClickCounter，那为什么不把实现这个功能的所有代码集中在一个文件里呢？

看一看package.json中对start脚本的定义，如下所示：

scripts": {
  "start": "react-scripts start",  启动react应用
  "build": "react-scripts build",  创建生产环境优化代码
  "test": "react-scripts test --env=jsdom",  单元测试
  "eject": "react-scripts eject"   
  //eject（弹射）命令把潜藏在react-scripts中的一系列技术栈配置都“弹射”到应用的顶层，
  //然后我们就可以研究这些配置细节了，
  //而且可以更灵活地定制应用的配置。eject命令是不可逆的npm run eject
  }