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环境配置简单介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容