第十五章 react脚手架

简介: 第十五章 react脚手架

React脚手架是一个用于快速搭建React应用程序的工具。它提供了一个基本的项目结构和一些常用的配置,使得开发人员可以更快地开始编写代码,而不必从头开始构建整个项目。

简要概括

  • react脚手架:用来帮助程序员快速创建一个基于react库的模板项目

1)包含了所有需要的配置(语法检查、jsx编译、devServer…)

2)安装好了所有相关依赖包

3)可以直接运行一个简单的效果

  • react提供了一个用于创建react项目的脚手架库:create-react-app
  • 项目的整体技术架构为:react + webpack + es6 + eslint
  • 使用脚手架开发的项目的特点:模块化、组件化、工程化

使用脚手架创建一个项目并启动

  • 步骤1:全局安装:npm i create-react-app -g
  • 步骤2:切换到相应创建项目的目录,使用命令:create-react-app react-staging
Success! Created react_staging at D:\MyWorkSpace\ReactStudy\react_staging
Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd react_staging
  npm start
Happy hacking!
  • 步骤3:进入项目文件夹:cd react-staging
  • 步骤4:启动项目:npm start
  • 步骤5:浏览器查看地址:http://localhost:3000
  • 步骤6:具体效果:image.png

相关命令介绍

  • npm start

如果您想要运行我们的React项目,您可以按照以下步骤进行操作:

  1. 打开终端并进入项目目录。
  2. 运行npm start命令。

这将启动一个本地开发服务器,您可以在其中编写和测试您的React应用程序。如果您需要更改配置,可以编辑./config/webpack.config.js文件。如果您需要添加新的依赖项,可以编辑./package.json文件。如果您需要更改项目的入口点,可以编辑./src/index.js文件。

  • npm run build

如果您已经开发完成,想要构建我们的React项目,您可以按照以下步骤进行操作:

  1. 打开终端并进入项目目录。
  2. 运行npm run build命令。

这将使用Webpack打包您的React应用程序,并将其输出到./build目录中。您可以将此目录中的文件部署到Web服务器上,以便在生产环境中运行您的应用程序。

  • npm run test

如果您想要运行我们React项目的测试,您可以按照以下步骤进行操作:

  1. 打开终端并进入项目目录。
  2. 运行npm run test命令。

这将启动测试运行器,并运行所有测试用例。我们的测试用例可以在./src目录下的__tests__文件夹中找到。如果您需要添加新的测试用例,可以在该文件夹中创建一个新的测试文件。

  • npm run eject

如果您想要 eject 我们的 React 项目,您可以按照以下步骤进行操作:

  1. 打开终端并进入项目目录。
  2. 运行npm run eject命令。

这将从我们的 React 项目中移除脚手架,并将其转换为常规的 Webpack 配置。这将允许您更深入地定制您的项目,但也会使您失去脚手架提供的许多便利功能。

在运行 npm run eject 命令之后,您将看到一个新的 config 文件夹和一个新的 scripts 文件夹。这些文件夹包含了您需要修改的所有配置和脚本。

请注意,一旦您 eject 了项目,就无法再次使用脚手架。如果您需要重新启用脚手架,请创建一个新的 React 项目并将您的代码复制到其中。


相关文章
|
7月前
|
前端开发
React-脚手架
React-脚手架
46 0
|
4月前
|
缓存 前端开发 JavaScript
第二十八章 React脚手架配置代理
第二十八章 React脚手架配置代理
|
10月前
|
缓存 JavaScript 前端开发
Windows7压缩包安装node.js 报错提示windows Server 2012 R2 和安装React脚手架 最详细教程
对于Windows 7安装node.js 提示“This application is only supported on wWindows 8.1,windows Server 2012 R2, or higher.”类似这种情况的,该问题是因为node.js官方在 x12版本后就不支持win7系统了。
|
7月前
|
前端开发 应用服务中间件 nginx
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
|
8月前
|
缓存 前端开发 JavaScript
React | React脚手架解析
React | React脚手架解析
|
11月前
|
缓存 JavaScript 前端开发
|
XML 前端开发 JavaScript
React——01安装脚手架以及渲染标签
安装脚手架以及渲染标签
105 0
|
前端开发
react学习案例11-使用脚手架创建react项目
react学习案例11-使用脚手架创建react项目
65 0
react学习案例11-使用脚手架创建react项目
|
前端开发
react学习案例11-使用脚手架创建react项目
react学习案例11-使用脚手架创建react项目
63 0
react学习案例11-使用脚手架创建react项目
|
数据采集 前端开发 JavaScript
React 脚手架,生命周期
React 脚手架,生命周期