搭建react项目的环境
时间： 16:24:55
&&&& 阅读：2348
&&&& 评论：
&&&& 收藏：0
作者& 17:27*
写了3090字，被7人关注，获得了5个喜欢
搭建Amazeui+react+webpack+webstorm开发环境
字数2549&阅读3292&
你有没有遇见过垂直居中的问题？有没有听说过flex弹性布局？没听过的赶紧点，看看flex布局是有多么强大！！！还在发愁flexbox布局不兼容最新的浏览器？点击，获取兼容性的flexlayout react组件。
最近在学习Amazeui-react的开发，发现react着实是一个好东西，但是蛋疼的是webpack这个东西好难配置，稍不注意就会导致自动编译失败，会出现一堆的问题，下面就请跟我一起从零开始学习React+webpack配置，并且如何在webstorm中很好的运用它们。
1、下载webstorm11和nodejs。下载太慢？直接百度云打包分享吧~~&
由于我的电脑的MacBook不是windows，因此可能安装和操作过程会有略微差异，但是差异不大，下面操作基本通用，不通用的我会指明。或者下面留言即可。
首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说了。
其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：。这个网站我没有发现偏官方的中文站点，但是CSDN上应该有很多相关的教程。webpack是一个构建工具，能够把所有的静态资源进行编译打包，比如.js、.css、.png、.less等等吧，反正只要是静态的，不是什么php、jsp之类的动态网站文件都能打包。通过它统一管理资源和模块。
再次，你还得知道点nodejs的知识，这个网站会告诉你nodejs干什么用，都有哪些api。nodejs是一个在服务器端的高性能javascript框架，能够快速处理高并发的请求。它主要用的就是回调原理，通过它提供的api可以实现一些web请求处理。其中，nodejs包含了一个npm，全称是node package manager，说白了就是node项目的包管理器，通过npm命令，我们可以使用成千上万的javascript框架。
最后，就是你得会用webstorm了。这个被称为javascript开发神器IDE，能够大大提升你开发web前端的效率。综上，我觉得能进入这篇博客的人想必肯定早就知道以上几个工具是干什么用的了，否则还进来干吗？串门啊？
安装完毕上述几个工具之后，请打开你的命令行工具：windows 按下Windows符号键+R，输入cmd，会弹出命令行工具；mac直接在Launchpad中查找终端即可，Linux跟mac没啥区别，自己找终端去，在下面我们姑且统一称之为命令行。
首先在命令行中输入：npm -v ，看看是否有版本号出现。如果出现了，证明你的nodejs安装成功了，不需要配置环境变量。如果没出现，那么你还得把环境变量配置一下。不过nodejs默认是给你配置好环境变量的。
配置npm的代理地址：（由于伟大的墙的原因，会导致下载包很慢很慢~~~）
npm config set registry https:
下面进入正轨了啊！！！提神！注意！看这，看这~~
启动webstorm，初次使用的话会让你导入以前的配置。如果是以前有配置文件就导入，没有就选择初次使用那一项。然后选择，create new project，建立一个新的工程。工程名就叫做：react_webpack_test吧。
点击OK，进入界面。然后打开webstorm的首选项设置（windows是File-settings），在Languages & Frameworks的JavaScript一栏选择JSX Harmony，点击OK。
重新打开命令行，依次输入
sudo npm install webpack webpack-dev-server babel
sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react
安装结果会显示一些WARN，无视！但是千万别有Error。
第一条命令是全局安装，模块会安装在/usr/local/,注意全局安装在mac/linux系统需要sudo然后输入密码，而windows不需要sudo哦~~第二条会安装在~/node_modules/下面。
参数解释：-g：允许包全局使用--save-dev:将依赖信息写入package.json的devdependencies。安装的每个组件解释：babel：能将es6语法解析成es5（什么是es？？自己看去，js是它的子集，说白了就是最新的javascript语法），以前是使用jsx-loader来解析着，现在直接用babel替代就行了。babel-preset-es2015和babel-preset-react：让babel支持es2015语法和jsx语法的两个预设值。webpack：这个还用说吗？react-dom：依赖于react，现在都是通过ReactDOM.render()方法来渲染而不是React.render(),facebook官方已经说了。webpack-dev-server：webpack开发服务器，帮助开发者实时监控webpack项目的文件更改并反映到浏览器上。这样你就能实时地进行预览啦~babel-loader css-loader babel-loader style-loader url-loader file-loader：几种webpack需要用到的加载器，方便解析css、es6/jsx、和其他静态文件。小提示：全局安装支持直接在命令行中启用安装包的命令，例如：你安装了webpack，那么在命令行输入webpack就会出现相应执行，但是非全局不支持使用这个命令的哦。
接下来，再打开webstorm（最好这两个工具你都别关~）。在刚才那个react_webpack_test的工程中创建一个文件，文件名为webpack.config.js，然后在里边写上下面的代码：
var webpack=require(‘webpack‘);
var commonsPlugin=new monsChunkPlugin(‘common.js‘);
module.exports={
entry:{index:‘./src/js/entry.js‘},
path:‘dist‘,
filename:‘bundle.js‘
test:/\.css$/,
loader:‘style-loader!css-loader‘
test:/\.jsx?$/,
loader:‘babel‘,
exclude: /node_modules/,
presets:[‘es2015‘,‘react‘]
test:/\.(png|jpg)$/,
loader:‘url-loader?limit=8192‘
test:/\.less$/,
loader:‘style-loader!css-loader!less-loader‘
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
commonsPlugin
root:‘‘,
extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],
AppStore:‘js/stores/AppStores.js‘
然后在当前工程目录创建一个src文件夹，在src里面创建一个js文件夹，在js文件夹中新建一个entry.js文件，文件内容如下：
var React=require(‘react‘);
var ReactDOM=require(‘react-dom‘);
ReactDOM.render(&div&Hello world!&/div&, document.getElementById("test"));
接下来再在当前工程目录中新建一个dist文件夹，dist文件夹中新建一个index.html文件。内容如下：
最后一步，最后一步了哦~~加入package.json文件，使之成为一个可以用npm命令执行的工程。
"name": "react_webpack_test",
"version": "1.0.0",
"description": "just webpack and react hello world project!",
"scripts": {
"build": "webpack --progress --profile --colors",
"watch": "webpack-dev-server --port 63340 --content-base ./dist/",
"test": "echo \"Error: no test specified\" && exit 1"
其中最重要的是script标签。接下来我们打开webstorm的Terminal功能（在IDE底部）,在里面输入
npm run build
然后，在你的Terminal里面会显示如下的东东
& 1.0.0 build /Users/你的工程所在目录/react_webpack_test
& webpack \--progress \--profile \--color
2m0ms op1ms optimiz12ms emit
Hash: fb3969afd55
Version: webpack 1.12.14
Time: 5109ms
Chunk Names
\+ 159 hidden modules
如果里面出现了红色的Error那么就说明你的工程配置还有一些问题，如果OK的话，打开浏览器，在里面运行你的dist/index.html文件，看看是否有：hello world！输出
实时调试你的代码~在webstorm的Terminal中输入npm run watch，然后会在里面输出一堆日志，日志中不能出现红色的Error，同时会输出下面两句：
输入：，应该就可以看到你想要的结果，结果如下：插入图片哦
这个就是用来充数的，光棍节快乐！！
喝杯茶~&&&到了这可以说你的项目就已经完成了，如果你想跟我一样使用Amazeui-react组件，那么就继续跟我这样继续下去吧~
安装Amazeui-react
npm install amazeui amazeui-react
修改./src/js/entry.js文件，替换成以下代码：
var React=require(‘react‘);
var ReactDOM=require(‘react-dom‘);
var AMUI=require(‘amazeui/dist/css/amazeui.min.css‘);
var AMUIReact = require(‘amazeui-react‘);
var button=(
Ctrl+S，保存当前代码，查看你的浏览器页面有没有变化~~
下面是我的测试工程链接，自己下载下来拿去用吧.
整整连写带测试折腾了我一下午，为了保证每一处写的没有疏漏，我现卸载掉我电脑上的webstorm和nodejs~~
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
请问一下为什么webpack. config. js里不用require (‘path‘)还有请问一下package. json里的watch里 /.dist/是什么作用的呢？？????
&学习，谢谢
&博主，我是后端转前端的，我用的一直是Intellij IDEA，然后我看了一些前端的教程，好多都是自动化的东西 yeomen，grunt，还要webpack等等，但是我觉得Intellij IDEA或者webstorm貌似都能替代他们吗？我一直很疑惑，请博主帮忙解答。还要博主写的文章我很喜欢，方便留个联系方式吗 qq或者邮箱？
webstorm是自动保存的 但是自动保存 那react的自动刷新就不能用
特意注册了个账号来感谢一下，上午搞了半天没搞明白配置，还好群里的人推荐查一下这篇文章啦～ 现在已经可以愉快的撸码啦～
生成的bundle.js文件有700多KB大小，有办法进行压缩么？
按照你这个配置，还是没有配置成功，找不到webpack 本人新手
Error: Cannot find module ‘webpack‘这是什么情况Failed at the
build script ‘webpack --progress --profile --colors‘.还有这个我也是mac出错了
这个就是用来充数的，光棍节快乐！！ 可见作者是个大神，写的很好！??
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！基于Koa.js和React开发应用
知识点: 1.Koa基础 2.如何创建Koa应用 3.Koa常用中间件 4.Koa路由 5.React基础
共发布过2门课程
后邀请好友注册，您和好友将分别获赠3个实验豆！
0% Complete
加载中，精彩就在后面...
购买成功！课程上线时，您将收到邮件提醒
一个实验正在进行，是否停止它，开始新实验？
为了让评估结果更加准确，请注意以下操作：
完成实验后点击「停止实验」按钮
将代码提交到代码库
尽可能详尽的撰写实验报告
尽可能在实验操作的关键步骤截图
尽可能减少无用操作
尽可能高效的利用内存/CPU资源
评估课还在不断完善中，我们真挚希望你能通过我们提供的这个平台，找到更好的发展机会。
该实验默认环境
本课程结和 Koa 和 React 开发 Web 应用，学习 Koa 和 React 基础知识。课程中将会学习如何创建 Koa 应用，Koa 常用中间件，Koa 路由，以及 React 应用开发等知识点。Koa.js提供API服务，React渲染UI组件，前端路由通过React-Router管理。工具方面，使用Babel支持ES6最新语法，使用Gulp和Webpack自动化编译JavaScript。
您有 -1 个实验豆，激活本课程需要消耗 2 个实验豆！
激活后可不限次数学习本课。
获取验证码
选择支付方式
下次自动登录
注册表示您已经同意我们的windows上搭建react native环境
一、配置环境
1.准备相关资源
Android开发集成开发环境（推荐下载含SDK tools版）
Java Develop Kit（java开发工具）
nodejs环境
2.ReactNative环境配置步骤
1) 使用npm安装ReactNative
在cmd命令工具中执行以下命令，注意并非 install react-native，装了react-native在后面init项目的时候会报错，需要卸掉再重装。
npm install -g react-native-cli
2)可能遇到的问题：
报错：npm-install-save-react-native-failed
解决办法：升级nodejs及npm版本
报错：'xxx’不是内部或外部命令
解决办法：设置对应命令为环境变量或安装对应的命令工具
3.安卓开发环境搭建
运行已下载的jdk-xxxx-windows-x64.exe进行安装，如本地已有JDK可跳过本条。
2)AndroidStudio安装
运行已下载的android-studio-bundle-xxx-windows.exe进行安装
安装Android Studio完毕后，需要检查Android SDK是否齐全，对应需要的SDK如下所示：
二、ReactNative开发调试
1.HelloWorld程序
在AndroidStudio中创建一个Android HelloWorld程序：
2.调试手机启用开发者模式并连接USB选择允许调试
开启开发者模式方式以小米机型为例参考。
3.运行HelloWorld
点击运行并在列表中选择调试的手机，确定后手机会自动安装我们的HelloWorld程序：
保持程序运行状态，我们可以在AndroidStudio控制台上查看程序输出的log日志及CPU/内存等占用情况。
4.HelloAndroid程序
使用命令行工具运行命令：
react-native init HelloAndroid
完成目录结构：
在AndroidStudio上打开HelloAndroid/android目录，等待gradle构建完毕后运行HelloAndroid程序，可以看到以下ReactNatibe经典报错UI，这是因为我们还未连接上react-native的编译bundle文件而导致出现的错误页面。
下面我们来运行Android ReactNative构建命令：
react-native start
注意这里不是使用run-android，run-android适用于直接在机器上运行调试app。
当构建完毕，在浏览器中访问http://localhost:8081/index.android.bundle?platform=android可以看到我们编译好的android bundle文件。
三、调试方式
1.配置host方式:
摇晃手机调出app debug菜单选项 -&选择Dev Settings-& 选择Debug server host & port for device -& 填写PC局域网IP及端口(命令行输入ipconfig可查看本机ip)
如上图，填写192.168.1.100:8081即可，回退到主界面，再次摇晃手机调出app debug 菜单选项 -&选择 Reload JS，此时可以看到ReactNative的应用首页：
2.Android5.0以上版本命令方式：
打开Android SDK目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行，输入：
adb reverse tcp:8081 tcp:8081
点击Reload JS 即可成功拉取ReactNative bundle。
注意：adb命令可以添加到windows全局变量中，这样无需在xxx\Android\sdk\platform-tools目录下执行adb命令，可以在AndroidStudio的Terminal命令行工具下使用
3.模拟器调试方式
安卓模拟器在win平台上性能表现不是很好，我们可以安装来进行一些性能上的提升（需要Intel的CPU），安装完毕后在AndroidStudiao的菜单点击打开虚拟设备管理器，选择创建一个Android虚拟设备（需求不同的Android版本需要下载对应的SDK
Tool）并启动。
当Android虚拟设备启动成功后，运行HelloAndroid 应用app，选择已启动的虚拟设备即可在虚拟设备上打开我们的HelloAndroid。
四、编写一个示例RNA轮播
index.android.js 入口函数：
'./android_src/Demo';
HelloAndroid
style={styles.container}&
&Demo&&/Demo&
首页Demo.js：
{Component,
ScrollView}
'react-native';
'./Slider';
constructor(props)
super(props);
this.state
{banner_url:'http://ossweb-/images/lol/web201310/skin/big80006.jpg'},
{banner_url:'/707b8s.jpg'},
{banner_url:'/bizhi/16/s04.jpg'}]
&ScrollView
style={{flex:1,marginBottom:50}}&
data={this.state.banner}/&
&/ScrollView&);
module.exports
轮播组件函数Slider.js：
* 轮播组件
ViewPagerAndroid,
StyleSheet,
Dimensions,
TouchableOpacity
'react-native';
React.createClass({
getInitialState()
currentPage:
viewWidth:
renderStatus:
获取待渲染的图片数据
imgsRenderData
this.getImgsRenderData(this.props.data);
将图片列表数据逐个映射到JSX中
imgsRenderData.map((banner,
console.log(banner.banner_url);
style={{flexDirection:
'column'}}
&TouchableOpacity
delayPressIn={0}
style={{flex:1}}&
source={{uri:banner.banner_url}}
style={{flex:1}}/&
&/TouchableOpacity&
var dots = this.renderDots();
&ViewPagerAndroid
style={{flex:1,height:
initialPage={1}
ref={viewPager
this.viewPager
viewPager;
onPageScroll={this.onPageScroll}
onPageSelected
={this.onPageSelected}&
&/ViewPagerAndroid&
getImgsRenderData(data)
判断当前的轮播序号，重新对图片顺序进行组装
imgsRender
data.length;
this.state.currentPage;
这里的代码有点乱，还有优化空间
imgsRender.push(data[imgsLent
imgsRender.push(data[indexNum
imgsRender.push(data[indexNum]);
imgsRender.push(data[imgsLent
imgsRender.push(data[indexNum
imgsRender;
onPageSelected(event){
当前分页被选中
this.state.currentPage;
selectPage
event.nativeEvent.position;
currentPage
selectPage
this.props.data.length;
if(currentPage
currentPage
if(currentPage
imgsLent){
currentPage
this.setState({
currentPage:
currentPage
this.viewPager.setPageWithoutAnimation(1);
StyleSheet.create({
alignItems:
'stretch',
flexDirection:
alignItems:
'stretch',
justifyContent:
module.exports
运行结果：
演示动画(因篇幅关系，轮播序号圆点的代码不包含在以上代码中)：
五、搭建过程遇到的问题
1.比较常见的MSBuild错误
这个错误出现的频率比较高，一般是安装与window环境相关的node包时可能会出现，比如node-gyp会报这个错，报错形式为：MSBUILD：error MSB3248 ...
解决方式：
微软的IDE(如本地环境有或更高版本则无须)
windows开发工具包(如本地环境有则无须)
Win7：安装VisualStadio2013 + Win7 SDKs 7.1
如Win7 SDKs 7.1安装失败，可以卸装电脑上的
Visual c++ 2010 x86 redistributable及Visual c++ 2010 x64 redistributable再重
Win8: 安装VisualStadio2013
2.folly::toJson兼容错误
在目前版本的RNA上遇到了这个错误，
经过了一番调试及查找答案，发现是alignItems: 'center'这个样式引起的，具体参见，把alignItems
修改为alignItems: 'stretch'即可
微个日光日React Native环境配置
Windows版本搭建安装ReactNative环境配置一.开发环境搭建要求在Windows操作系统搭建ReactNative开发环境要求在电脑上安装好JDK,AndoidSDK,还要求电脑上安装有一套C++编译器，如果没有，推荐安装微软的VIsualStudioCommunity2015Andoid的开发环境AndoidStudio(推荐)或者Eclipse在混合开发中也需要用到二、环境搭建步骤第一步：安装JDK1.安装JAVAJDK（需安装1.8或更高版本）下载对应你电脑系统版本的1.832位或64位JDK。第一次是安装jdk，第二次是安装je。建议两个都安装在同一个java文件夹中的不同文件夹中。留意一下JDK安装的目录2.JDK环境变量配置JDK安装完后，需要配置下环境变量(1)选择计算机→属性→高级系统设置→高级→环境变量(2)系统变量→新建JAVA_HOME变量。变量值填写jdk的安装目录（本人是C:\Java\jdk1.8.0_91)(3)系统变量→寻找Path变量→编辑,在变量值最后输入%JAVA_HOME%\%JAVA_HOME%\je\(4)系统变量→新建CLASSPATH变量。变量值填写.;%JAVA_HOME%\li;%JAVA_HOME%\li\tools.ja（注意最前面有一点）系统变量配置完毕(5)检验是否配置成功运行cmd输入java-vesion（java和-vesion之间有空格）。若如图所示显示版本信息则说明安装和配置成功。第二步：安装Andoid环境ReactNative目前需要AndoidStudio2.0或更高版本。
& 果果文库所有资源均来源于互联网，仅供网友学习交流，若侵犯了您的权益，请联系我们予以删除。
17151&&人浏览
12919&&人浏览
6876&&人浏览
17479&&人浏览
7755&&人浏览
10899&&人浏览
5617&&人浏览
15929&&人浏览
17335&&人浏览
7307&&人浏览
5494&&人浏览
9146&&人浏览
13387&&人浏览
13632&&人浏览
4897&&人浏览
本文标题：React Native环境配置 链接地址：
2013- Inc. All Rights Reserved 果果文库 版权所有 联系站长: ; 经营许可证编号:浙ICP备号赏作者包辣条吧,您的支持是我前进的动力!
即使是一小步也想与你分享