React 基础入门(一): 环境搭建、安装

本文共有2403个字,关键词:ReactReact入门React教程

React 基础入门(一)

环境搭建

  1. 安装nodejs
  2. 安装cnpm

地址:http://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 安装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

  1. 安装脚手架工具(单文件组件项目生成工具) 只需要安装一次

    npm install -g create-react-app
    cnpm install -g create-react-app
  2. 创建项目

    create-react-app reactdemo
  3. 生成项目

    $>cd  reactdemo

运行项目

   $reactdemo> npm start / yarn start

生成项目

   $reactdemo> npm run build / yarn build

安装React方法二(新)

  1. 安装脚手架工具并创建项目

    $> npx create-react-app reactdemo
  2. 生成项目

    $>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 可以一句话帮你开启一个静态服务器

主要特点:

  1. 临时安装可执行依赖包,不用全局安装,不用担心长期的污染。
  2. 可以执行依赖包中的命令,安装完成自动运行。
  3. 自动加载node_modules中依赖包,不用指定$PATH。
  4. 可以指定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:项目测试文件。

LGS

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:苏米志,敬请关注!
广告还在招~
添加新评论
暂无评论