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

}

}

]

}