React&React Native初次体验(1/4)

本篇文章主要介绍了"React&React Native初次体验"，主要涉及到require,github,Node.js方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 可关注每周更新的issues，以iOS与前端开发为主，地址https://github.com/icepy/posts/issues时间2015年11月24日r...

可关注每周更新的issues，以iOS与前端开发为主，地址https://github.com/icepy/posts/issues

时间2015年11月24日

• react 版本信息 0.14.3
• react-dom 版本信息 0.14.3
• react-router 版本信息 1.0.0
• react native 版本信息 0.1.7

Demo下载地址：

• React Web项目
• React Native App项目

如果你下载的Demo无法运行，很可能是因为版本不对，也有可能是sh路径的问题，请核对。

React

在开发之前，做一些必要的准备

调试工具：React Developer Tools

编程工具（Sublime Text插件）：

• Babel
• SublimeLinter-jsxhint

语法检查：

• eslint

编译工具：

npm install --global gulp

安装过python的用户可以在React Web Demo目录下运行，访问http://127.0.0.1:4000：

python -m SimpleHTTPServer 4000

默认使用ES2015来编程，所以需要安装语言转换工具：babel

npm install -g babel-cli

目前为止，想要将项目运行起来，还远远不够。

配置环境

官方出品的入门指南，其实你可以先往下阅读。

第一步

我使用mkdir和touch来快速创建目录与文件

mkdir react-web

cd react-web

mkdir js
mkdir css
mkdir src
touch index.html
touch gulpfile.js
touch .babelrc
touch js/main.js

npm init

第二步

先安装react，react-dom，react-router：

npm install react react-dom history react-router@latest --save-dev

第三步

安装编译环境：

npm install gulp vinyl-source-stream browserify browserify-shim babelify babel-preset-es2015 babel-preset-react babel-eslint eslint eslint-plugin-react gulp-eslint webpack babel-loader babel-core --save-dev

注意事项：

• 使用browserify构建模块化时如何使用babel，可阅读babel-browserify
• 现在要创建.babelrc文件
• babel-preset-react的使用可阅读babel-preset-react
• babel-preset-es2015的使用可阅读babel-preset-es2015

gulpfile.js编写如下：