React入门教程之Hello World以及环境搭建详解
前言
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转码规则包。在安装完这几个依赖库之后，目录结构如下图所示：
我们就可以使用Browserify对main.js处理及打包了，在当前目录中执行下面的命令即可：
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
执行完这条命令后，当前目录下会生成一个bundle.js，如图所示：
有了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程序，不过使用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的项目，结构如下：
这个项目包含一个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.jb51.net/201707/yuanma/react-dev(jb51.net).rar
使用gulp构建前端工程大大简化了开发流程，大家也可以在这个简易项目基础上针对实际项目做一些扩展，当然如果学习React过程中有了新的构建需求，我也会及时更新到Github上的。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
React Native 环境搭建的教程
一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-
-
快速搭建React的环境步骤详解
前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道. 本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考. 有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么. 1.Nodejs & NPM 为什么要提nodejs呢? 与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态.nodejs平台上衍生出了强大的npm.grunt.express等,几乎重新定义了前端的工作
-
详解基于webpack搭建react运行环境
最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
-
React Native 搭建开发环境的方法步骤
本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y
-
React Native搭建iOS开发环境
一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&
-
React入门教程之Hello World以及环境搭建详解
前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我
-
ES6入门教程之Iterator与for...of循环详解
本文主要介绍了关于ES6中Iterator与for...of循环的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 一.Iterator(遍历器) 遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作.在ES6中遍历操作特质for-.of循环. 它的作用主要有两个: 为遍历对象的属性提供统一的接口. 使对象的属性能够按次序排列. ES6的遍历器协议规定,部署了next方法的对象,就具备了遍历器功能.next方法必须返回一个包含value和d
-
Go语言学习教程之goroutine和通道的示例详解
目录 goroutine 通道 Range 和 Close Select 官方留的两道练习题 等价的二叉树 网络爬虫 源码地址 goroutine goroutine是由Go运行时管理的轻量级线程. go f(x, y, z)在一个新的goroutine中开始执行f(x, y,z). goroutines运行在相同的地址空间中,所以对共享的内存访问必须同步.sync包提供了基本的同步原语(synchronization primitives),比如互斥锁(mutual exclusion loc
-
JAVA环境搭建之MyEclipse10+jdk1.8+tomcat8环境搭建详解
一.安装JDK 1.下载得到jdk-8u11-windows-i586.1406279697.exe,直接双击运行安装,一直next就可以,默认是安装到系统盘下面Program Files, 我这里装在D:\Program Files\Java下面,注意安装完jdk之后会自动运行安装jre,这时的安装路径最好和jdk一样,方便管理,我的都是在D:\Program Files\Java下面. 2.环境变量配置: 右击"我的电脑",点击"属性":选择"高级系统
-
Java MyBatis框架环境搭建详解
目录 一.MyBatis简介 1.MyBatis历史 2.MyBatis特性 3.MyBatis下载 4.和其它持久化层技术对比 JDBC Hibernate 和 JPA MyBatis 二.搭建MyBatis 1.开发环境 2.创建maven工程 3.创建MyBatis的核心配置文件 4.创建mapper接口 5.创建MyBatis的映射文件 6.通过junit测试功能 7.加入log4j日志功能 一.MyBatis简介 1.MyBatis历史 MyBatis最初是Apache的一个开源项目i
-
Vite开发环境搭建详解
目录 Vite初始化项目 集成Vue-Router 集成Vuex 集成Git提交验证 集成Eslint 配置alias Vite现在可谓是炙手可热,可能很多小伙伴还没有使用过Vite,但是我相信大多数小伙伴已经在使用Vite了,因为是太香了有没有.可能在使用过程中很多东西Vite不是配置好的,并不像Vue-cli配置的很周全,那么今天就说一下如何配置开发环境,其中主要涉及到的点有一下几个: TypeScript Vuex Vue-Router E2E
-
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
本文实例讲述了Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法.分享给大家供大家参考,具体如下: MVC结构中视图层和控制器的解耦,以及渲染.往往是重复或者冗余的工作.如果一个完善的框架,对MVC的使用,必定会对这些操作进行合理的设计.让开发者更专注内容而不是控制逻辑结构本身.在ZendFramework中,主要是通过动作助手ViewRenderer来完成这个操作的.ViewRenderer 自动的完成在控制器内建立视图对象并渲染视图的过程: Vie
-
python爬虫教程之bs4解析和xpath解析详解
目录 bs4解析 原理: 如何实例化BeautifulSoup对象: 用于数据解析的方法和属性: xpath解析 xpath解析原理: 实例化一个etree对象: xpath(‘xpath表达式’) 总结 bs4解析 原理: 1.实例化一个BeautifulSoup对象,并且将页面源码数据加载到该对象中 2.通过调用BeautifulSoup对象中相关的属性或者方法进行标签定位和数据提取 如何实例化BeautifulSoup对象: from bs4 import BeautifulSoup Be
-
JavaScript进阶教程之非extends的组合继承详解
目录 前言 一:call() 的作用与使用 1.1 使用 call() 来调用函数 1.2 使用 call() 来改变 this 的指向 二:利用构造函数继承父属性 2.1 实现过程 2.1 实现过程分析 三:利用原型对象继承父方法 3.1 继承父方法的错误演示 3.2 继承父方法的正确做法 3.2 继承父方法的注意事项 总结 前言 继承也是面向对象的特性之一,但是在 ES6 版本之前是没有 extends 去实现继承的,我们只能通过 构造函数 和 原型对象 来实现继承,其中分别为构造函数来继承
-
基于Vue2的移动端开发环境搭建详解
前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa