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 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
javascript版2048小游戏
Mar 18 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP类的反射用法实例
2014/11/03 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python分布式计算dispy的使用详解
2019/12/22 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
大专毕业自我鉴定
2014/02/04 职场文书
护士进修自我鉴定
2014/02/07 职场文书
软件项目开发计划书
2014/05/01 职场文书
国际商务专业求职信
2014/07/15 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript