reactjs编译
A. 编译构建好的reactjs程序可以打断点调试吗
你好，1，通过npm安装react-toolsnpm –g react-tools2，通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/src路径下存放的是jsx文件，编译后的js存放到build路径下3，当目标文件变化以后，自动构建生成新的js文件。
B. react, es6 + nodejs 怎么用 babel 编译
需要使用npm按照以下依赖包：
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0",
"object-assign": "^4.1.0",
"react": "^15.2.1",
"react-dom": "^15.0.2",
C. reactjs适合移动端的web页面开发吗
我认为React是适合移动端，而不适合pc端的。
pc端使用React需要重做很多已有组件，包括但不限于highCharts图表类、dataPicker基础组件。
移动web app恰恰是不需要这类复杂的组件的，这给写移动端项目重写组件带来了机会。
pc端要seo，移动端基本不需要，所以用这种数据后加载的框架有了可能。
然后，用webpack编译出来的基础库React + es6 + Route + rex + tappable，minify之后大概200k不到，gzip之后50k左右。所以明确的说，是适合移动端的。
然
后各位都不使用缓存么？不管是用etag或者Expires的强缓存，还是用localStorage做缓存。第一次访问的50k基础库，都不是2g用户
的致命伤，2g致命伤是一个RTT的时间巨长。用React基本没有操作需要zepto了，少了13k gzip之后的zepto，也少用一个模板引擎。
我承认用了es6之后代码编译会显大，但明显这十几k并不是阻止用React的理由。
大家可以试用一下微信钱包里面的城市服务的首页，刚刚做了React的尝试，基本能做到秒出，以后会推到其它的微信商业项目中。
D. react script 编译配置
创建一个index.html文件，并且在这个文件中引入main.js的javascript程序文件，我们要做的就是编译生成main.js的javascript文件。
二、在webpack.config.js文件中设置一个html插件的实例对象，
并制定的打包入口文件为index.html
在创建打包的配置对象的时候，传入这个html插件的实例对象
下面是webpack.config.js文件中的配置
(1) 创建html插件的实例对象，并指定webpack的打包入口文件，约定大于配置，默认入口文件是index.js
(2) 创建webpack打包的配置信息，传入上一步创建好的html插件对象
(3) 设置webpack打包的时候是否需要进行压缩
(4) 设置webpack打包时的调试模式source-map
(5) 设置第三方模块的配置规则，设置jsx文件的编译包为babel-loader
设置scss文件的编译包为style-loader，并且开启css模块化
设置css文件的编译包为style-loader
E. react.js适合整个网页内容的开发吗
我认为React是适合移动端，而不适合pc端的。
pc端使用React需要重做很多已有组件，包括但不限于highCharts图表类、dataPicker基础组件。
移动web app恰恰是不需要这类复杂的组件的，这给写移动端项目重写组件带来了机会。
pc端要seo，移动端基本不需要，所以用这种数据后加载的框架有了可能。
然后，用webpack编译出来的基础库React + es6 + Route + rex + tappable，minify之后大概200k不到，gzip之后50k左右。所以明确的说，是适合移动端的。
F. react.js开发有什么好用的开发工具
ntellij 系列加上对应的插件都可以这样用，而且好用地停不下来，高级技巧可以参见我的博客文章：【译】在 Webstorm 中使用 ReactJS：编码辅助、代码规范、重构以及编译
1. Working with ReactJS in WebStorm: Coding Assistance
Emmet in JSX | 在 JSX 中使用 Emmet
Live templates | 动态模板
2. Working with ReactJS in WebStorm: Linting, refactoring and compiling
Code analysis | 代码分析
ESLint
Refactoring | 重构
G. 如何使用react-tools将jsx编译成JavaScript
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
H. webpack怎么自动编译reactjs
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。
react安装
当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。
# npm install react react-dom –save
react安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。
react解析器babel安装
babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。
# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安装
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
一般情况下我们选择本地安装，这样便于管理。
打包工具webpack的安装
同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。
# npm install webpack –save-dev
//本地安装
# npm install webpack –g
//全局安装
如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。
这里我们选择全局安装。这样才能出现我们将要说的问题。
webpack配置文件编写
安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。
代码一
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets:['react']
}
}
]
}
编译过程中出现的错误
好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。
接下来我们就要编译打包我们的项目。
# webpack
执行该命令以后，你会发现出现如下的错误：
ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"
……
这也就是说找不到babel-preset-react。
好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。
解决问题的方式
出现上述问题以后，我们有这样三种方式可以解决。
方式一
要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。
query:{
presets:['react']
}
好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。
#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安装的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。
方式二
此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。
# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//将webpack安装到本地位置——也就是项目目录下的node_moles中
# ln –s /项目根目录/node_moles/webpack/bin/webpack.js /usr/bin/webpack
//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）
//这样我们就可以在任意位置直接使用webpack命令了。
此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。
此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。
方式三
该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。
代码二
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude:/node_moles/,
query:{
presets:['react']
}
}
]
}
I. 如何使用react-tools将jsx编译成JavaScript
JavaScript 依赖于浏览器的运行环境。是一种解释执行的脚本语言。所以，只能以文本的形式被解释执行，不能被编译。有些运行形式，比如.js .hta 的执行方式看似一个独立的应用程序。其实后台也是解释执行的。
J. 如何用reactjs构建一个完整的前端页面
用reactjs构建一个完整的前端页面的步骤：准备：React的安装包，建议去官网下载安装1、使用React的网页源码，结构大致如下：上面代码有两个地方需要注意。首先，最后一个标签的type属性为text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type="text/babel"。其次，上面代码一共用了三个库：react.js、react-dom.js和Browser.js，它们必须首先加载。其中，react.js是React的核心库，react-dom.js是提供与DOM相关的功能，Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。2、将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。$babelsrc--out-dirbuild3、渲染转换成html节点，以方便操作dom：ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。这里以插入helloworld为例来说明ReactDOM.render(Hello,world!,document.getElementById('example'));4、运行结果如下：