本文目录一览：
- 1、怎么在linux上部署reactjs
- 2、webpack怎么自动编译reactjs
- 3、如何学习用Typescript写Reactjs
- 4、如何使用react-tools将jsx编译成JavaScript
- 5、如何搭建reactjs开发环境
- 6、如何用reactjs构建一个完整的前端页面
怎么在linux上部署reactjs
jsp渲染是服务器端的技术，react是客户端的技术，这两个完全是可以共存的，最极端的做法jsp完全不做任何渲染，直接输出纯的html就可以了
webpack怎么自动编译reactjs
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。
react安装
当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。
# npm install react react-dom –save
react安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。
react解析器babel安装
babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_modules下。
# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安装
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
一般情况下我们选择本地安装，这样便于管理。
打包工具webpack的安装
同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。
# npm install webpack –save-dev
//本地安装
# npm install webpack –g
//全局安装
如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。
这里我们选择全局安装。这样才能出现我们将要说的问题。
webpack配置文件编写
安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。
代码一
module:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets:['react']
}
}
]
}
编译过程中出现的错误
好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。
接下来我们就要编译打包我们的项目。
# webpack
执行该命令以后，你会发现出现如下的错误：
ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Module build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/process"
……
这也就是说找不到babel-preset-react。
好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。
解决问题的方式
出现上述问题以后，我们有这样三种方式可以解决。
方式一
要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。
query:{
presets:['react']
}
好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。
#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安装的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。
方式二
此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。
# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//将webpack安装到本地位置——也就是项目目录下的node_modules中
# ln –s /项目根目录/node_modules/webpack/bin/webpack.js /usr/bin/webpack
//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）
//这样我们就可以在任意位置直接使用webpack命令了。
此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。
此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。
方式三
该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。
代码二
module:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude:/node_modules/,
query:{
presets:['react']
}
}
]
}
如何学习用Typescript写Reactjs
1.安装node，因为ts的编译器是js/ts写的；
安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器
npm i -g typescript@next
4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快。
如何使用react-tools将jsx编译成JavaScript
使用react-tools将jsx编译成JavaScript方法：
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
如何搭建reactjs开发环境
1、下载源码 通过搜索引擎找到CVS的源代码包，也可以从CVS的官方网站cvshome.org上寻找，由于CVS历史上也出现过一些安全漏洞，所以建议要定期去其官方网站上看看有没有最新版本推出。 2、编译安装 [root@terry src]# tar -xjpvf cvs-1.12.5.tar
如何用reactjs构建一个完整的前端页面
用reactjs构建一个完整的前端页面的步骤：
准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
!DOCTYPE htmlhtml head script src="../build/react.js"/script script src="../build/react-dom.js"/script script src="../build/browser.min.js"/script /head body div id="example"/div script type="text/babel" // **用户代码 ** /script /body/html
上面代码有两个地方需要注意。
首先，最后一个 script 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render( h1Hello, world!/h1, document.getElementById('example'));
