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实现的网页局布刷新效果
Dec 01 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
JS定时器实例
Apr 17 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Vue声明式渲染详解
May 17 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
使用js和canvas实现时钟效果
Sep 08 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
yii用户注册表单验证实例
2015/12/26 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
详解Python中的文件操作
2016/08/28 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python set内置函数的具体使用
2019/07/02 Python
python中如何使用虚拟环境
2020/10/14 Python
python 基于opencv操作摄像头
2020/12/24 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
副董事长岗位职责
2014/04/02 职场文书
大学生求职计划书
2014/04/30 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers