本文为书籍《深入浅出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