React 脚手架的使用

Posted 2021-05-23 david_远

React 脚手架 意义

1. 脚手架是开发现代Web应用必备(现在已经不再是创建一个页面，在里面写html、css、js时代了）
2. 充分利用Webpack、Babel、ESLint等工具辅助项目开发
3. 零配置，无需手动配置繁琐的工具即可开始使用
4. 可以更多的去关注业务，而不是配置工具

使用React 脚手架 初始化项目

先运行npm install -g create-react-app
将create-react-app 安装到系统的全局环境，这样就可以在任意路径下使用它
1．初始化项目

命令行中输入

命令:create-react-app my-app

create-react-app 项目名

]
)
注意：如果是第一次可能会出现这句话提示 直接输入 y 在摁enter键即可
在项目名中不能包含大写字母

Cannot create a project named "myApp" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.
由于npm命名限制，无法创建名为“myApp”的项目：
包名称不能再包含大写字母
请选择其他项目名称。

等待即可

如果上面方法不可以使用的话

镜像原切换为npm原镜像原  https://registry.npmjs.org/
不要使用其他镜像原

在运行： npx create-react-app my-app
等待安装成功即可（外网时间较长，耐心等待即可）

出来这个语句则证明安装成功

如何启动项目

启动项目，在项目根目录中执行命令:
npm start

之后等待即可

启动之后他会自动启动默认浏览器

看到这个页面就成功了

注意：第一次打开编译等待时间稍长，耐心等待

npx命令介绍

• npm v5.2.0引入的一条命令
• 目的：提升包内提供的命令行工具的使用体验
• 原来:先安装脚手架包，再使用这个包中提供的命令
• 现在:无需安装脚手架包，就可以直接使用这个包提供的命令

补充：

• 推荐使用:npx create-react-app my-app 来初始化项目
  • npx create-react-app 项目名
• 不推荐 npm init react-app my-app
• 不推荐 yarn create react-app myapp
  • yarn是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
  • yarn真有快速、可靠和安全的特点
  • 初始化新项目: yarn init
  • 安装包: yarn add 包名称
  • 安装项目依赖项:yarn
  • 其他命令，请参考yarn文档

在脚手架中使用React

• 先导入react和react-dom两个包
  使用ES6模块化语法进行导入

  // 在创建好的项目中src/index.js中进行导入
  import React from 'react'
  
  import RectDoM from ' react-dom '
  

• 调用React.createElement)方法创建react元素
• 调用ReactDOM.render()方法渲染react元素到页面中
  
  其他的都是项目自己创建的，可以删除