React实战-如何快速创建调试一个Demo程序
2016-09-16 12:27
751 查看
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程序烦恼了。
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程序烦恼了。
相关文章推荐
- React-scripts 如何快速创建调试一个Demo程序
- React实战-如何快速构建一个ReactNative的Demo
- 用UDP实现可靠文件传输,如何利用UDX创建一个简单的WIN32程序
- 如何用vc2005托管代码编写一个oledb创建access2003数据库的程序?
- 如何启动一个程序一附加命令行选项启动(创建进程以命令行附加方式 配置 其他启动项)
- 如何快速创建一个含有大量数据的表?
- WSS3SDK之:如何创建一个事件处理程序Feature
- 如何快速创建一个临时文件
- 如何写出一个较好的快速排序程序
- Unix:一个用make编译好的程序如何调试
- 需求分析实战第一课-如何快速完成一个新功能的需求分析
- 如何快速地编写和运行一个属于自己的 MapReduce 例子程序
- 自己在之前做两个项目中遇到多线程并发访问如何解决的一个简单demo程序
- 如何快速创建一个AJAX的"加载"的图片效果
- 【php】如何通过php程序快速构造一个面包屑导航
- 实战 HTTP 处理程序(HTTP Handler) (1) -- 创建一个最简单的 HTTP Handler
- Android项目实战之(1)-- 开发一个"快速冲浪"的程序
- (实战)Spring Portlet MVC处理请求分析以及如何快速架构一个Portlet项目
- 转 如何快速看懂一个大型程序 http://blog.csdn.net/jysg9/article/details/24193181
- Linux下如何利用QtCreator下创建一个界面程序