React入门二：React脚手架的使用

最新推荐文章于 2025-05-25 10:34:01 发布

原创最新推荐文章于 2025-05-25 10:34:01 发布 · 405 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了React脚手架的重要性和使用方法。通过npx命令行工具，可以轻松创建React项目，无需手动配置。启动项目后，利用ES6模块化语法在index.js文件中导入、创建和渲染React元素，实现Web应用的快速搭建。React脚手架简化了开发流程，让开发者更加专注于业务逻辑而非工具配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'))