Day1：创建一个简单的react应用

谢天true

已于 2022-04-11 21:54:03 修改

阅读量548

点赞数 2

分类专栏：深入浅出React和Redux 文章标签： react.js javascript 前端

于 2022-02-16 23:23:34 首次发布

本文链接：https://blog.csdn.net/weixin_44618120/article/details/122973360

版权

本文为书籍《深入浅出React和Redux》的笔记
书中React的版本为v15.4，学习时React的版本为v17.0.2
文中提到的ControlPanel.js为父组件，Counter.js为子组件

书中提到的代码下载来源

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组件

一个基本的点击计数组件

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

class ClickCounter extends