3.React 脚手架的使用

• 3.React 脚手架的使用
  • 1.React 脚手架意义
  • 2.React 脚手架初始化项目
  • 3.补充说明
  • 4.在脚手架中使用 React

1.React 脚手架意义

1.脚手架是开发 现代Web 应用的必备

2.充分利用 Webpack, Babel, Eslint等工具辅助项目开发

3.零配置, 无需手动配置繁琐的工具即可食用

4.关注业务, 而不是工具配置

2.React 脚手架初始化项目

1.初始化项目, 命令: npx create-react-app my-app

2.启动项目, 在项目根目录执行命令: npm start

3.补充说明

1.推荐使用: npx create-react-app my-app

2.npm init react-app my-app

3.yarn create react-app my-app

• yarn 是 Facebook 发布的包管理器, 可以看做是 npm 的替代品, 功能与npm相同
• yarn具有快速, 可靠和安全的特点
• 初始化新项目: yarn init
• 安装包: yarn add 包名称
• 安装项目依赖项: yarn
• 其他命令, 请参考yarn文档

4.在脚手架中使用 React

1.导入 react 和 react-dom 两个包

import React from 'react'
import ReactDOM from 'react-dom'

2.调用 React.createElement() 方法创建 react 元素

3.调用 ReactDOM.render()方法渲染 react 元素到页面中