React 基础入门(一)
环境搭建
- 安装nodejs
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装yarn
参考官方文档https://yarn.bootcss.com/
cnpm install -g yarn 或者 npm install -g yarn
安装React方法一
参考官方文档:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html
安装脚手架工具(单文件组件项目生成工具) 只需要安装一次
npm install -g create-react-app cnpm install -g create-react-app
创建项目
create-react-app reactdemo
生成项目
$>cd reactdemo
运行项目
$reactdemo> npm start / yarn start
生成项目
$reactdemo> npm run build / yarn build
安装React方法二(新)
安装脚手架工具并创建项目
$> npx create-react-app reactdemo
生成项目
$>cd reactdemo
运行项目(调试)
$reactdemo> npm start
生成项目(发布)
$reactdemo> npm run build
npx介绍
参考文档:http://www.phonegap100.com/thread-4910-1-1.html
npx create-react-app reactdemo这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件
npx http-server 可以一句话帮你开启一个静态服务器
主要特点:
- 临时安装可执行依赖包,不用全局安装,不用担心长期的污染。
- 可以执行依赖包中的命令,安装完成自动运行。
- 自动加载node_modules中依赖包,不用指定$PATH。
- 可以指定node版本、命令的版本,解决了不同项目使用不同版本的命令的问题。
目录结构
manifest.json 文件简介:
允许将站点添加至主屏幕,是 PWA 提供的一项重要功能,当前 manifest.json 的标准仍属于草案阶段,Chrome 和 Firefox 已经实现了这个功能,微软正努力在 Edge 浏览器上实现,Apple 目前仍在考虑中
super关键字
参考:http://www.phonegap100.com/thread-4911-1-1.html
Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象
为什么官方的列子里面写个super(props):
只有一个理由需要传递props作为super()的参数,那就是你需要在构造函数内使用this.props
那官方提供学习的例子中都是写成super(props),所以说写成super(props)是完全没问题的,也建议就直接这样写。
目录文件
yarn.lock:项目依赖的安装包版本号会在这里做一些限制。
README.md:关于项目的说明文件。
package.json:node的包文件,关于项目的一些介绍及一些项目的指令等。
gitignore:如果项目是用git管理的,有些文件不想上传到git仓库里,可以把文件定义到该文件中。
node_modules:项目依赖的第三方的包,是脚手架实现自己功能依赖的一些外部的文件。
public 文件夹下:
favicon.ico:项目图标,可以自己制作一个ico图标,取名为favicon.ico,覆盖该文件。
index.html:项目的首页。
manifest.json:定义网页快捷方式。
src目录下:
index.js:整个程序的入口文件。
registerServiceWorker.js :(pwa)用户第一次访问网页需要联网,下次即使断网,也依然可以显示。
App.test.js:项目测试文件。
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付
