React实战-如何快速创建调试一个Demo程序

古城微笑少年丶 2022-09-26 02:14 154阅读 0赞

React实战\-如何快速创建调试一个Demo程序

React是单一页面程序，因此需要我们在创建React项目时需要做很多配置、解析等工作，严重影响着我们在编写demo时的情绪和效率。

通常的方式我们需要做以下几步(微信公众号：react-javascript)：

1. 创建配置文件package.json。

定义项目所需的React程序包：

\{

"name": "routerdemo",

"version": "0.0.1",

"private": true,

"devDependencies": \{

"react-scripts": "^0.4.0"

\},

"dependencies": \{

"react": "^15.3.0",

"react-dom": "^15.3.0",

"react-redux": "^4.4.5",

"react-router": "^2.6.1",

"react-router-redux": "^4.0.5",

"redux": "^3.5.2",

"redux-undo": "^1.0.0-beta9"

\},

"scripts": \{

"start": "react-scripts start",

"build": "react-scripts build",

"eject": "react-scripts eject"

\},

"eslintConfig": \{

"extends": "./node\_modules/react-scripts/config/eslint.js"

\}

\}

2. 定义项目文件结构:  精简到index.html，src/app.js，assert/bundle.js(解析后的js文件)

3. 定义解析打包源文件为bound.js的脚本，运行web页面

光以上3步就让我们非常头疼，尤其是第三步，我们需要解析项目中js源文件，打包成一个文件bundle.js，还需要创建一个web应用支撑我们访问。

4.通过React-Scripts进行调试

幸运的是，在react相关包中，存在一个react-scripts的包能够帮助我们轻松完成第三步，我们只需要做以下几件事，并满足一下规则即可方便调试。

l 在config中引入react-scripts

"devDependencies": \{

"react-scripts": "~0.4.0"

\},

"eslintConfig": \{

"extends": "./node\_modules/react-scripts/config/eslint.js"

\}

l 在config中加入执行脚步

"scripts": \{

"start": "react-scripts start",

"build": "react-scripts build",

"eject": "react-scripts eject"

\}

好了，我们以后再测试时，只需要允许npm start即可了，方便太多了。

必须要注意的是：

l html文件必须为index.html

l 入口js文件名必须为index.js

如果不遵守上述两点，你的解析是不成功的。

5.分析React-Scripts源码了解执行原理

采用React-scripts省去了我们太多事情，但是总还是会好奇，它到底干了什么，我们不能只知道使用规则，而不知原理。看看React-scripts的项目配置文件，我们知道它只是帮我们做了我们自己编写脚本的工作：采用webpack进行源码解析，至于为什么必须使用index.html和index.js文件名，以下两段配置文件说明了原因：

在React-scripts的path文件中appHtml: resolveApp('index.html')

在React-scripts的webpack.config中：path.join(paths.appSrc, 'index')。

在明白了React-scripts的原理情况下，采用npm start命令即可调试项目了，并且在修改源码时，能理解反应在执行程序里。不再为实现个HelloWorld程序烦恼了。

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关如何调试Python程序：步骤详解与实战案例

调试Python程序是一项关键技能，它可以帮助你找出代码中的错误。以下是一步步的调试指南，以及一个实战案例。 **1. **理解问题：在开始调试之前，首先要明确问题所

古城微笑少年丶/ 2024年12月15日 13:36/ 0 赞/ 23 阅读

相关如何使用create-react-app脚手架快速搭建一个react项目

reate-react-app是一个react工程脚手架，可快速构建一个react应用。内置webpack、babel、es6等特性，开发者无需关注配置，关注业务模块的开...

￡神魔★判官ぃ/ 2024年04月17日 05:30/ 0 赞/ 107 阅读

相关 React实战-如何快速构建一个ReactNative的Demo

React实战\-如何快速构建一个ReactNative的Demo ReactJs宣称的是一次学习就够了，意思是学习了ReactJs后，在Web端和移动端就都一样处理了。事实

阳光穿透心脏的1/2处/ 2022年09月26日 03:16/ 0 赞/ 237 阅读

相关 React实战-如何快速创建调试一个Demo程序

React实战\-如何快速创建调试一个Demo程序 React是单一页面程序，因此需要我们在创建React项目时需要做很多配置、解析等工作，严重影响着我们在编写demo时的情

古城微笑少年丶/ 2022年09月26日 02:14/ 0 赞/ 155 阅读

相关只会Vue、React其中一个，如何快速上手另一个？

面对前端最火的两个框架，学 React 还是 Vue ？这可能是每个前端人都曾纠结过的问题。不过，现在你不用纠结了——因为很多公司都是两个框架都有大量的应用，取决于不同团队

小咪咪/ 2022年09月12日 11:59/ 0 赞/ 210 阅读

相关只会Vue、React其中一个，如何快速上手另一个？

面对前端最火的两个框架，学 React 还是 Vue ？这可能是每个前端人都曾纠结过的问题。不过，现在你不用纠结了——因为很多公司都是两个框架都有大量的应用，取决于不同团队

旧城等待，/ 2022年09月12日 09:59/ 0 赞/ 190 阅读

相关只会Vue、React其中一个，如何快速上手另一个？

面对前端最火的两个框架，学 React 还是 Vue ？这可能是每个前端人都曾纠结过的问题。不过，现在你不用纠结了——因为很多公司都是两个框架都有大量的应用，取决于不同团队

叁歲伎倆/ 2022年09月12日 09:58/ 0 赞/ 187 阅读

相关快速搭建一个直播Demo

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 缘由最近帮朋友看一个直播网站的源码，发现这份直播源码借助阿里云、腾讯云这些大

小咪咪/ 2022年01月17日 07:01/ 0 赞/ 417 阅读

相关 strace调试程序实战

一代码 include <iostream> include <fstream> include <stdlib.h> using

川长思鸟来/ 2021年09月19日 09:54/ 0 赞/ 343 阅读

相关 react项目如何断点调试？

进入到相应的网页界面，然后查看Sources->Page->top->webpack://->找到react的js代码处，设置断点，进行调试 ![watermark_type

阳光穿透心脏的1/2处/ 2021年09月02日 03:20/ 0 赞/ 752 阅读