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、運行結果如下：