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

本文为书籍《深入浅出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 
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值