问题：怎么去调试React？
调试程序是我们在做软件开发中必须具备的一项能力，找错程序中的错误是一个基本的能力，但是在以前我们调试js的时候最开始的时候差不多，以前使用alert或者console.log()去调试程序，但是自从有了chrome控制台调试之后，可以像后端一样的去调试程序，感觉挺不错的，换个道理来说，React也是js写的程序，调试按道理来说应该是没得问题的，怎么在这里会出现问题了呢？ 1、由于使用了React语言，然后使用webpack打包工具，我们转换后的js文件是一个中间的问题，并不是像以前的js文件，一直都是，并不需要转换，由于React需要转换，就无法定位到原始的文件中去查看。 2、就是刚刚的问题，由于React的思想就是组件化的封装，啥子都是组件，通过组件绑定到某一个div的id上面的，所有无形中，又增加了我们调试的难度，需要经过中间的一层去处理，所以当时我去学习的时候，就考虑到了怎么调试的问题，去看了看视频，当时都没有说怎么去调试的问题诶！相当的捉急。参考文档
1、：http://blog.csdn.net/jiangbo_phd/article/details/51759084 2、： http://blog.csdn.net/u014695532/article/details/52843440使用
1、安装React Developer Tools插件在Chrome，你可以使用翻墙工具，或者到github上找，不过好像最近github被封了，也是需要翻墙的，（打个广告：一只红杏几十块一年还不错），安装好了之后在F12之后在Tab上有个React的Tab哈哈，成功了一步。2、我们要创建个项目啊
npm init
npm insatll --save-dev webpack webpack-dev-server npm install --save react reac-dom npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react babel-core 1 2 3 4 package.json{
"name": "demo02-jet", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "react-dom": "^15.4.2", "webpack": "^2.2.1" }, "dependencies": { "webpack-dev-server": "^2.4.1" } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 webpack.config.js 配置webpack的打包配置module.exports = {
entry: './main.jsx', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react', }, ] } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 index.html<html>
<body> <div id="wrapper"></div> <script src="bundle.js"></script> </body> </html>