你好 反应世界入门教程 环境建设详解

序

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 . jsvar React=required(' React ')；var react DOM=required(' react-DOM ')；ReactDOM.render(h1Hello，world！/h1，document.getElementById('示例')；上面，我们使用了require语法来加载react和react-dom库的代码。另外，代码中有React的JSX语法，所以我们需要对这个文件做一些操作，将源代码转换成当前浏览器可以识别的目标代码。

转换操作涉及到一个工具：Browserify，官方主页介绍如下：

浏览器通过捆绑所有依赖项，您可以在浏览器中要求('模块')。

简单地说，Browsifiy负责用当前文件打包相关库。例如，我们依赖上面的react和react-dom库，所以在Browsifiy处理之后，main.js、react和react-dom将被打包到一个文件中。要打包，我们应该首先用一个简单的命令安装Browserify包：

Npm install -g browserify为了将main.js转换为可用的目标文件，我们需要使用以下命令安装相关的依赖关系库：

NPM安装-保存-开发-反应-DOM巴别塔-巴别塔-预置-反应，其中巴别塔包是Browserify的巴别塔转换器，巴别塔-预置-反应是用于反应的巴别塔转码规则包。安装这些依赖关系库后，目录结构如下图所示：

我们可以使用Browserify来处理和打包main.js，并在当前目录下执行以下命令：

browserify-t[babelify-preferences[react]]main . js-o bundle.js执行此命令后，会在当前目录下生成一个bundle . js，如图：

有了bundle.js文件，我们只需要将它引入应用程序。现在我们在当前目录中创建一个index.html，如下所示：

html body div id=' example '/div script type=' text/JavaScript ' src=' http : bundle . js '/script/body/html您可以通过在浏览器中直接打开这个文件来查看我们的hello world程序，从开发工具中可以看出React确实很好用：

到目前为止，我们已经实现了React的hello world程序，但是使用browserify命令后跟这么多参数非常不方便，所以我们考虑将其移动到package.json中的脚本中：

' scripts ' : { ' bundle ' : ' browserify-t[babelify-preferences[react]]main . js-o bundle . js '配置完成后，我们可以安装并使用本地browserify对应用进行打包，并使用npm命令执行：

当NPM卸载-g browserifynpm安装browserify-save-dev npm run bundle更改main.js以后，只需要执行NPM run bundle就可以完成翻译和打包。

上面描述了如何编译和打包JSX代码。如果应用在项目中，上述操作可能无法满足我们的需求，比如文件变化的实时监控和自动构建。接下来，我将使用grave构建一个简单的自动构建系统，用于打包和压缩React源代码的翻译。首先，我们创建一个具有以下结构的react-dev项目：

这个项目包含一个app目录，里面包含jsx目录和index.html，然后我们把React的源代码main.jsx文件放到jsx目录下。还可以看到gulpfile.js和package.json，我们会一一介绍。

第一个是package.json，它列出了我们项目所需的依赖包：

dev dependencies ' : { ' babel-preset-react': '^6.5.0'，'大口' : '^3.9.1'，'大口-babel': '^6.1.2'，'大口-browserify': '^0.5.1'，大口-connect' :' 3.2.2 '，'大口-重命名' 3360' 1.2.2 '，'大口-uglify' :' 1.5.3 '，' react ' : '首先，我们需要使用npm安装

然后我们介绍gulpfile.js，其中我们定义了几个简单的任务：

var大口=require('大口')；var babel=require('囫囵-babel ')；var browserify=require('大口-browserify ')；var uglify=require('大口-uglify ')；var rename=require('大口-重命名')；var connect=require('大口-连接')；//这个任务负责编译、捆绑、重命名、压缩、生成发布的JS文件. golf . task(' build '、function(){ return golf . src(' app/jsx/*)。管道(babel({ presets: ['react'] }))。管道(browserify())。管道(重命名(' main.min.js ')。烟斗。pipe(gout . dest(' app/js '))})；//此任务将监视app/jsx文件夹中的任何更改，然后重新构建它. gland . task(' watch '，function(){ gland . watch([' app/jsx/*])，function(){//检测到任何更改，请调用build task gland . run(' build ')；});});//此任务将运行一个在端口8080 gulf . task(' server '，function(){ connect . server({ root : ' app '，port: 8080，liveleroad : true })；});build任务负责执行一个build任务，watch任务负责监控jsx目录的变化，如果有变化，build任务会立即再次执行，server任务负责启动8080端口监控器中的一个服务。

最后，如果我们想在内部运行任务，我们需要首先全局安装命令行工具：

然后，在项目的当前目录中，执行一项任务：

大口看打开一个新的命令行并启动网络服务：

吞下服务器后，在浏览器中输入localhost:8080，查看我们的index.html内容。

以上物品已放在Github上。感兴趣的同学可以去看看，或者在当地克隆出来自己试一试。

源代码下载

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

本地下载地址：http://xiaozai.jb51.net/201707/yuanma/react-dev(jb51.net)

使用make构建前端项目大大简化了开发过程，您也可以基于这个简单的项目对实际项目进行一些扩展。当然，如果在学习React的过程中有新的建筑需求，我会及时更新到Github。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。