React入门二：React脚手架的使用 ｜ 8月更文挑战

1. React脚手架的意义

• 脚手架是开发现代Web应用的必备
• 充分利用Webpack、Babel、Eslint等工具辅助项目开发
• 零配置，无需手动配置繁琐的工具即可使用
• 关注业务，而不是工具配置

2. 使用脚手架初始化项目

2.1 初始化项目，命令：

npx 命令介绍

• npm v5.2.0 引入的一条命令。
• 目的：提升包内提供的命令行工具的使用体验。
• 原来：先安装脚手架包，在使用这个包中提供的命令。 create-react-app 是脚手架的名字。

npx create-react-app my-app
 

在这里插入图片描述

2.2 运行 命令：

 npm start

2.3 找到index.js文件

在这里插入图片描述

还是上一篇文章的三步：

• 引入文件 只不过不再是script标签引用，使用ES6中模块化语法
• 创建元素
• 渲染元素

// ES6 中模块化语法
// 1. 引入文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 2. 创建元素
const title = React.createElement('h1',null,"Hello React")
// 3  渲染元素
ReactDOM.render(title,document.getElementById('root'))

在这里插入图片描述

3.说明

ReactDOM 只适用于web开发 如果是手机端 react-native