第十五章 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 项目并将您的代码复制到其中。


相关文章
|
前端开发
React-脚手架
React-脚手架
222 0
|
前端开发
React | 修改React脚手架的默认端口号?
React | 修改React脚手架的默认端口号?
562 160
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
502 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
188 6
React技术栈-基于react脚手架编写评论管理案例
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
160 2
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
683 4
|
缓存 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系统了。
|
资源调度 前端开发 C++
react环境搭建,及脚手架使用
react环境搭建,及脚手架使用
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
161 0