React的React Native
2015-09-28 23:20
507 查看
React的React Native
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000。有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边。而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上。而面向未来的ES6,模块化的支持似乎已成定局。
我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来。
这篇文章就给还没走在这条路上的前端一个入门的指南。
文章导读:
一、先把例子跑起来玩玩(setup your background)
二、理解React
三、webpack入门
四、现在开始探索&&扩展阅读
1.1 我们在名为react-webpack的新项目中要做的第一件事,就是新建一个package.json文件,它看起来应该是这个样子的:
View Code
1.2 第二步就是创建我们webpack的配置文件webpack.config.js:
View Code
1.3 同时我们还需要在入口文件index.html中引入程序跑起来的一些必要的东西,虽然他的作用看起来没有那么明显:
View Code
注意,这里面引用的bundle.js文件非常重要,他是我们打包后的入口文件,不引入它程序是跑不起来的。
app.js文件是程序的入口文件,我们在这里处理简单的类似路由的逻辑:
View Code
相信你已经看到了ES6的身影,没错,在这里,我们写ES6的代码,只要新建js文件,我们就在里面写ES6的代码。
我们在入口文件上放上了一个连接,分离我们最熟悉的helloworld代码。也是为了方便以后我们写其他的例子可以有单独的文件,易于管理和查看,就像下面看到的项目目录一样,一个js文件就是一个小例子的代码。
hello.js:
View Code
1.4 执行:
再加上一些必要的文件入口,我们的项目现在看起来应该是这样的:
View Code
它通常放在根目录下,他自己也是一个标准的Commonjs模块,我们可能已经看到了require,module.exports这样的标志性关键词。
它的主要的配置参数有:
- entry:
它定义了打包的入口文件,数组中的文件会按顺序进行,并且它会自行解决依赖问题。
在这里其实我们还定义了Webpack开发服务器,webpack-dev-server,我们可以在package.json文件中看到:
这也是我们npm start启动了服务器之后访问http://localhost:8080/webpack-dev-server/可以访问到页面的原因。
- output:
它定义了输出文件的的位置,包括路径,文件名,还可能有运行时的访问路径(publicPath)参数。
- module:
webpack将所有的资源都看做是模块,而模块就需要加载器:
对于不同的文件,我们可以自行配置使用不同的加载器。也可以自行实现合心意的加载器。
在这里我们配置了babel-loader,可以让我们在js文件中随心所欲的开始写ES6规范的代码。
Webpack的加载器之间可以进行串联,一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。
- resolve:
Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。
resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件,添加了这个配置我们只要写:require('common');就可以了。
- plugin:
我们可以在plugin参数中配置我们需要用到的各种各样的插件。比如我们想将多个文件分开打包,可能会用到:
通过打造这样的工作环境,我们可以同时使用多种面向未来的新技术开始新的探索。
现在就开始探索吧!不要等到未来到来,却发现自己还没做好准备。
扩展阅读:
[基于webpack的前端工程化探索]
[webpack入门]
[webpack-howto]
[webpack home]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000。有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边。而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上。而面向未来的ES6,模块化的支持似乎已成定局。
我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来。
这篇文章就给还没走在这条路上的前端一个入门的指南。
文章导读:
一、先把例子跑起来玩玩(setup your background)
二、理解React
三、webpack入门
四、现在开始探索&&扩展阅读
一、先把例子跑起来(setup your background)
可以fork我在github上的[react-webpack]demo项目,也可以从头开始:1.1 我们在名为react-webpack的新项目中要做的第一件事,就是新建一个package.json文件,它看起来应该是这个样子的:
View Code
1.2 第二步就是创建我们webpack的配置文件webpack.config.js:
View Code
1.3 同时我们还需要在入口文件index.html中引入程序跑起来的一些必要的东西,虽然他的作用看起来没有那么明显:
View Code
注意,这里面引用的bundle.js文件非常重要,他是我们打包后的入口文件,不引入它程序是跑不起来的。
app.js文件是程序的入口文件,我们在这里处理简单的类似路由的逻辑:
View Code
相信你已经看到了ES6的身影,没错,在这里,我们写ES6的代码,只要新建js文件,我们就在里面写ES6的代码。
我们在入口文件上放上了一个连接,分离我们最熟悉的helloworld代码。也是为了方便以后我们写其他的例子可以有单独的文件,易于管理和查看,就像下面看到的项目目录一样,一个js文件就是一个小例子的代码。
hello.js:
View Code
1.4 执行:
1 npm install
再加上一些必要的文件入口,我们的项目现在看起来应该是这样的:
View Code
它通常放在根目录下,他自己也是一个标准的Commonjs模块,我们可能已经看到了require,module.exports这样的标志性关键词。
它的主要的配置参数有:
- entry:
1 entry: [ 2 'webpack/hot/only-dev-server', 3 "./js/app.js" 4 ],
它定义了打包的入口文件,数组中的文件会按顺序进行,并且它会自行解决依赖问题。
在这里其实我们还定义了Webpack开发服务器,webpack-dev-server,我们可以在package.json文件中看到:
1 "scripts": { 2 "start": "webpack-dev-server --hot --progress --colors", 3 "build": "webpack --progress --colors" 4 },
这也是我们npm start启动了服务器之后访问http://localhost:8080/webpack-dev-server/可以访问到页面的原因。
- output:
1 output: { 2 path: './build', 3 filename: "bundle.js" 4 },
它定义了输出文件的的位置,包括路径,文件名,还可能有运行时的访问路径(publicPath)参数。
- module:
webpack将所有的资源都看做是模块,而模块就需要加载器:
1 module: { 2 loaders: [ 3 { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 4 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 5 { test: /\.css$/, loader: "style!css" }, 6 {test: /\.less/,loader: 'style-loader!css-loader!less-loader'} 7 ] 8 },
对于不同的文件,我们可以自行配置使用不同的加载器。也可以自行实现合心意的加载器。
在这里我们配置了babel-loader,可以让我们在js文件中随心所欲的开始写ES6规范的代码。
Webpack的加载器之间可以进行串联,一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。
- resolve:
1 resolve:{ 2 extensions:['','.js','.json'] 3 },
Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。
resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件,添加了这个配置我们只要写:require('common');就可以了。
- plugin:
1 plugins: [ 2 new webpack.NoErrorsPlugin() 3 ]
我们可以在plugin参数中配置我们需要用到的各种各样的插件。比如我们想将多个文件分开打包,可能会用到:
1 { 2 entry: { a: "./a", b: "./b" }, 3 output: { filename: "[name].js" }, 4 plugins: [ new webpack.CommonsChunkPlugin("init.js") ] 5 }
四、现在开始探索&&扩展阅读
面向未来的ES6,模块化的支持似乎已成定局。我们通过从webpack中的配置即可马上开始编写ES6的代码。通过打造这样的工作环境,我们可以同时使用多种面向未来的新技术开始新的探索。
现在就开始探索吧!不要等到未来到来,却发现自己还没做好准备。
扩展阅读:
[基于webpack的前端工程化探索]
[webpack入门]
[webpack-howto]
[webpack home]
相关文章推荐
- ReactJs 技巧
- ReactJS
- ReactJs之render
- ReactiveCocoa & MVVM 学习总结一
- ReactJs之表单处理
- React Native -- Flexbox
- ReactiveCocoa & MVVM 学习总结二
- React 入门实例教程
- react-native —— 在Windows下搭建React Native Android开发环境
- Mutations #Facebook Relay文档翻译#
- ReactiveCocoa2 源码浅析
- Facebook发布React Native for Android
- 一位iOS开发者使用React Native的体验
- Webpack+React+ES6开发模式入门指南
- 最快让你上手ReactiveCocoa之基础篇
- Scala深入浅出进阶经典 第69讲:Scala并发编程react、loop代码实战详解
- 用 CocoaPods 安装 React Native
- reactjs
- Connection #Facebook Relay文档翻译#
- GraphQL Relay Specification #Facebook Relay文档翻译#