ReactJs环境配置简单介绍
现在React比较火热，下面就介绍一下关于它最为基础的知识。
先从它的环境配置入手:
一.配置环境:
1.下载npm: https://nodejs.org/en/download/ 并安装。
2.此处安装在目录：D:\Program Files\nodejs。
3.配置环境变量：变量名：NODE_PATH 值：D:\Program Files\nodejs\node_modules。
4.打开cmd，输入node -v 如果出现对应版本号则成功。
二.测试程序:
初学者练习见官网：http://reactjs.cn/react/docs/getting-started.html 下载
在examples目录下新建一个test目录练习：Hello world。
此处有两种方法：
1.引用JSXTransformer.js来在浏览器中进行代码转换（由于reactjs应用的是jsx语法，故而需要一个脚本来解析：jsx语法入口）
新建Index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello,world</h1>,
document.getElementById('example') //此处要使用js原生的方法来获取容器元素
)
</script>
</body>
</html>
2.离线转换
使用之前装的npm来进行离线转换，这样直接引用转换完的js文件即可
如何进行离线转换呢？
1）.将之前的jsx代码独立一个js文件,这里命名为test.js
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
那么相对应的index.html代码：
注意：
【1】JSXTransformer.js这个文件无须引用，因为接下来会使用npm进行离线转换。
【2】引用了一个js:<script src="../testResult/test.js"></script>
此处引用的js是即将使用npm处理完毕后的js文件
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script src="../../build/react.js"></script> </head> <body> <div id="example"></div> <script src="../testResult/test.js"></script> </body> </html>
2）.使用jsp --watch命令进行转换（此处官方示例给的是jsx --watch src/ build/ 即监听此文件夹并将修改后的js文件也保存至此，为了更加清晰将解析后的js文件另放一个文件夹并引用次文件：
jsp --watch E:\test\react-0.13.0\react-0.13.0\examples\test E:\test\react-0.13.0\react-0.13.0\examples\testResult）
这样就得到了转换之后的js文件并且页面中直接引用次文件即可：
React.render(
React.createElement("h1", null, "Hello, world!"),
document.getElementById('example')
);
ReactJs环境配置简单介绍，这样的场景在实际项目中还是用的比较多的，关于ReactJs环境配置简单介绍就介绍到这了。
ReactJs环境配置简单介绍属于前端实例代码，有关更多实例代码大家可以查看。