前言

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的源代码，如下：

上面我们使用到了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包，只需一个简单的命令即可：

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

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

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

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

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