频道栏目
首页 > 资讯 > HTML/CSS > 正文

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

16-09-22        来源:[db:作者]  
收藏   我要投稿

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

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

通常的方式我们需要做以下几步:

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即可了,方便太多了。

必须要注意的是:

lhtml文件必须为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程序烦恼了。

相关TAG标签
上一篇:台积电:绝大多数7nm客户都会转向6nm_IT新闻_博客园
下一篇:最后一页
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站