react空標簽編譯出錯

❶ 為什麼react中用confirm會出錯，不能用啊

npm install babel-plugin-css-moles-transform -D根目錄添加一個.babelrc的文件，寫入： { "plugins": ["css-moles-transform"]}layout.js import CustomCss from './a.css'111111a.css .hahaha { background-color: red; }

❷ 如何編譯ReactNative示常式序Examples

編譯示常式序需要將整個項目導入到androidStudio中，androidStudio導入項目時選擇react-native/ReactAndroid目錄。

由於項目依賴ndk因此如果要編譯Examples還需要安裝配置ndk目錄，下載ndk後是一個自解壓程序，會釋放ndk的目錄。

然後需要設置環境變數或者在react-native根目錄下新建local.properties文件，文件內容如下：

sdk.dir=c:\你的sdk目錄

ndk.dir=c:\你的ndk目錄

設置要之後就可以編譯了，導入和編譯的過程比較曲折，請繼續看下文。

在編譯AwesomeProject項目時，沒有用到ndk，實際上這里的ndk默認情況下並沒有用到，只是gradle的設置里有ndk因此必須配置ndk才能導入項目。

ndk是在編譯核心庫是才用到，核心庫位於react-native/ReactAndroid，導入整個項目時以lib形式存在。查看Examples目錄下UIExplorer，會發現在build.gradle是以在線的方式導入核心庫的。通過源碼的方式導入被注釋掉了。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

// compile project(':ReactAndroid')

}

由此可知，編譯UIExplorer並不需要ndk，如果你不想設置ndk，有2個辦法

1.拷貝AwesomeProject項目中的build.gradle，settings.gradle到UIExplorer的android目錄，在導入項目時選擇UIExplorer/android就可以了，這樣androidStudio會導入單個項目，否則會導入整個項目。

2.用androidStudio新建一個同名的項目，然後把UIExplorer目錄中的文件拷貝到新建的項目中。

編譯好之後啟動伺服器端，到react-native目錄下執行:

npm install

node packager\packager.js

windows下如果出現錯誤需要根據錯誤提示修改代碼http://www.cnblogs.com/zhaojietec/p/4853273.html

不過需要注意的是，目前為止，UIExplorer在Android下有一個bug，IOS下沒有問題，通過google可以找到了解決辦法。https://github.com/facebook/react-native/issues/2855

原因是，js代碼和android原生代碼不同步，通過build.gradle可以看到android下的引用的reactNative核心庫為11，而js代碼版本已經更新到12了。

解決的辦法有2個，一個是使用git工具(如smartGit)，將js代碼恢復到之前的版本，另一個辦法是重新編譯reactNative的核心庫，編譯核心庫需要ndk，在mac下沒有問題，在windows編譯會出錯。編譯reactNative核心庫，對UIExplorer下注釋掉的依賴項進行修改即可，編譯速度較慢 需要在線下載第三方依賴庫。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Native//compile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

compile project(':ReactAndroid')

}

由於windows下無法編譯，所以這里提供編譯好的aar文件，修改UIExplorer build.gradle中的依賴項就可以了。至於如何引入aar文件，可以自行搜索。當然mac下同樣也可以用這個aar，可以省去不少麻煩。

❸ react配合antd使用react-intl-universal出現報錯

這個在cdn上面沒有，不要通過頁面標簽直接載入， 用npm install ， 然後import的形式載入react-intl-universal

❹ react+webpack的熱編譯問題

devServer沒有配 loaders里的react-hot也沒配 看下官方文檔去吧

❺ react項目安裝lerna+bootstrsp出錯

摘要 原因是因為react的安裝需要cache目錄不允許有空格；但是node的目錄下默認情況下是在C:Program Files；是有空格的；因此我們只需要改變一下cache的目錄路徑即可；

❻ IDEA打開react項目，HTML標簽處有紅線報錯

這個應該是你IDEA沒有配置好對react的jsx語法的支持，你可以安裝相關插件配置解決，具體自行網路谷歌。或者直接設置提示的等級，在編輯器的右下方，如圖所示。

❼ react組件引入css文件在啟動的時候提示css: Unexpected token, expected ;

npminstallbabel-plugin-css-moles-transform-D

根目錄添加一個.babelrc的文件，寫入：

{
"plugins":["css-moles-transform"]
}

layout.js

importCustomCssfrom'./a.css'

<divclassName='CoustomCss.hahaha'>
111111
</div>

a.css

.hahaha{background-color:red;}

❽ 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']

}

}

]

}