React入门教程之Hello World以及环境搭建详解


Posted in Javascript onJuly 11, 2017

前言

React 是一个用于构建用户界面的 JavaScript 库。react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践。

不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React。

入门教程及环境搭建

在官方文档中,有一种方式是基于npm的,我比较喜欢这种方式,这也是官方比较推荐的,下面我们就一步一步创建一个React的简单应用。

首先我们创建一个react-test目录,进入该目录后运行“npm install ?yes”生成一个默认的package.json文件,然后创建一个main.js文件,用于放置React的源代码,如下:

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
);

上面我们使用到了require语法加载react和react-dom库的代码中,另外代码中还有React的JSX语法,所以我们需要对这个文件做一些操作,把源代码转换成目前浏览器识别的目标代码。

转换操作涉及到了一个工具:Browserify,官方首页是这么介绍的:

Browserify lets you require(‘modules') in the browser by bundling up all of your dependencies.

言简意赅,Browserify就是负责把依赖到的库和当前文件打包到一起,比如上面我们依赖到了react和react-dom库,那么在经过Browserify处理之后,main.js和react以及react-dom会被打包到一个文件里面。要想打包,首先我们应该安装Browserify包,只需一个简单的命令即可:

npm install -g browserify

为了将main.js转换成可用的目标文件,我们需要使用下面的命令安装相关的依赖库:

npm install --save-dev react react-dom babelify babel-preset-react

其中babelify包是Browserify的babel转换器,而babel-preset-react是针对React的babel转码规则包。在安装完这几个依赖库之后,目录结构如下图所示: 

React入门教程之Hello World以及环境搭建详解 

我们就可以使用Browserify对main.js处理及打包了,在当前目录中执行下面的命令即可:

browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

执行完这条命令后,当前目录下会生成一个bundle.js,如图所示: 

React入门教程之Hello World以及环境搭建详解 

有了bundle.js文件,我们只需在应用中引入即可,现在我们在当前目录创建一个index.html,内容如下:

<html>
 <body>
  <div id="example"></div>
  <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

在浏览器中直接打开这个文件即可看到我们的hello world程序了,可以从开发工具中看的到,React的确起作用了: 

React入门教程之Hello World以及环境搭建详解 

到目前为止,我们已经实现了React的hello world程序,不过使用browserify命令时后面跟那么多参数,十分的不便,我们考虑将其移至package.json中的scripts中:

"scripts": {
 "bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}

配置完成之后,我们就可以安装并使用本地的browserify来打包应用了,并且使用npm的命令来执行:

npm uninstall -g browserify
npm install browserify --save-dev
npm run bundle

以后再改动main.js时,只需执行npm run bundle即可完成转译和打包。

以上介绍了如何编译打包JSX代码,如果在项目实际应用时,上面的操作可能满足不了我们的需求,比如实时监测文件变化自动构建等功能。下面我会使用gulp来搭建一个简易的自动化构建系统,用于将React源代码转译打包和压缩。
首先,我们创建一个react-dev的项目,结构如下: 

React入门教程之Hello World以及环境搭建详解 

这个项目包含一个app目录,里面又包含jsx目录和index.html,然后在jsx目录里我们放置了React的源代码main.jsx文件。
大家也可以看到gulpfile.js和package.json,我们逐一介绍。

首先是package.json,里面列举了我们项目所需的依赖包:

"devDependencies": {
 "babel-preset-react": "^6.5.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-uglify": "^1.5.3",
 "react": "^0.14.8",
 "react-dom": "^0.14.8"
 }

这些依赖包负责转译、打包、压缩以及启动Web服务。首先我们需要使用npm install将这些依赖包安装在本地。

然后介绍gulpfile.js,我们在这个构建文件中定义了几个简单的任务:

var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file.
gulp.task('build', function() {
 return gulp.src('app/jsx/*')
   .pipe(babel({
    presets: ['react']
   }))
   .pipe(browserify())
   .pipe(rename('main.min.js'))
   .pipe(uglify())
   .pipe(gulp.dest('app/js'))
});

//this task will watch any change in app/jsx folder and then re-build it.
gulp.task('watch', function() {
 gulp.watch([
 'app/jsx/*'
 ], function() {
 //any changed detected, call build task
 gulp.run('build');
 });
});

//this task will run a server listening at port 8080
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8080,
 livereload: true
 });
});

build任务负责执行一次构建任务,watch任务负责监听jsx目录变化,如有改动则立即再次执行构建任务,server任务负责启动一个服务,在8080端口监听。

最后如果要运行里面的任务,我们需要先在全局安装命令行工具:

npm install --global gulp-cli

然后,在项目当前目录下,执行一个任务:

gulp watch

开启一个新的命令行,启动Web服务:

gulp server

之后在浏览器中输入localhost:8080就可以看到我们的index.html内容了。

上面的项目已放到Github上,感兴趣的同学可以去看一下,也可以克隆到本地亲自试一试。

源码下载

github地址:https://github.com/scottliu2011/react-dev

本地下载地址:http://xiazai.3water.com/201707/yuanma/react-dev(3water.com).rar

使用gulp构建前端工程大大简化了开发流程,大家也可以在这个简易项目基础上针对实际项目做一些扩展,当然如果学习React过程中有了新的构建需求,我也会及时更新到Github上的。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
jQuery 操作XML入门
Dec 25 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
vuejs如何配置less
Apr 25 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 #Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 #Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 #Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 #Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 #Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 #Javascript
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
LayUI表格批量删除方法
2018/08/15 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
.net开发工程师面试题
2014/02/25 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
MySQL时区造成时差问题
2022/04/13 MySQL