ReactJs学习（环境配置，一个hello world）

来源：互联网发布：小程序cms系统编辑：程序博客网时间：2024/06/06 00:59

ReactJs学习（环境配置，一个hello world）

记录一下学习过程以备后用

一：配置环境
1.下载npm:  https://nodejs.org/en/download/  并安装 Windows Installer (.msi) 版安装包
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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

1
2
3
4
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文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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文件另放一个文件夹并引用次文件：
jsx --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文件并且页面中直接引用次文件即可：

1
2
3
4
React.render(
    React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

二：一些官方示例
示例来源： http://reactjs.cn/react/docs/tutorial.htmlReactjs的一大特点就是组件化，下面在test.js中实验一些官方示例，熟悉一下reactjs
1）简单组件

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});
//组件4
var FinalBox = React.createClass({
    render:function(){
        return (
                <CommentBox/>
        );
    }
});
 
//最后显示FinalBox组件中的内容，而FinalBox中引用的是CommentBox组件
//故此处直接使用CommentBox是一样的效果
React.render(
  <FinalBox/>,
  document.getElementById('example')
);

组件化的模式确实很好，方便组件复用提高效率，但是要注意reactjs使用驼峰命名法(e.g: CamelName)，如果将FinalBox改成finalBox（小驼峰？）并且在最后使用<finalBox/>会发现不会显示任何东西

2）使用属性props
官方解释：让我们创建 Comment 组件，该组件依赖于从父级传入的数据。从父组件传入的数据会做为子组件的属性（ property ），这些属性（ properties ）可以通过 this.props 访问到。使用属性（ props ），我们就可以读到从 CommentList 传到 Comment 的数据，然后渲染一些标记

3）接入数据模型

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author} >
           {comment.text}------{comment.year}
        </Comment>
      );//调用map方法循环数据，每条循环出来的数据都传入Comment组件处理
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );//调用CommentList并传入数据
  }
});
React.render(
  <CommentBox data={data} />,//调用组件CommentBox并传入数据
  document.getElementById('example')
);

4）从服务器获取数据
后台使用asp.net mvc模拟
5）向服务器提交数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//后台c#代码
public static List<info> infoList = new List<info>() { new info { author = "Tom", text = "This is Tom", year = 2015 }, new info { author = "Peter", text = "This is Peter", year = 2016 } };
定义一个静态变量存储数据;
        [HttpPost]
        public ActionResult subData(info info)
        {
            infoList.Add(info);
            return Content("success");
        }
//test.js代码
var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      type:"GET",
      async:false,
      dataType: "jsonp",
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this),
 
    });//定时从服务器获取数据
  },

或者配合jquery将数据序列化后传至后台：

三：组件间传值
参考网址： http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/

1）父组件传值给子组件（利用props，缺点是如果层级过多，则每一级都需要将父级传入的Props属性向下再传递）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//父组件
var TestContainer = React.createClass({
    render:function(){
        return (
           <TestContext text="This is a test"/>
        )
    }
});
//子组件
var TestContext = React.createClass({
    render:function(){
        var  text = this.props.text;
    return (
            <label>
                {text}
            </label>
      );
    }
});
React.render(
     <TestContainer />,
     document.getElementById('example')
)

2）子组件传值给父组件（调用回调函数传值，其实还是从props中获取......）

3）context
根据参考文章中的方法可以使用上下文context来进行传递，文中给出的代码：

但是根据文中所说，此方法在官方文档中尚未给出正式的文档说明
使用此方法能够被子组件所共享，并通过调用this.context获取
注意点：
1.在父组件（外层组件？）定义getChildContext 并返回一个js对象作为context
2.在父组件（外层组件？）定义childContextTypes 并为context中的每个属性都定义类型
3.在子组件（内层组件？）定义contextTypes并指明要从context中读取的数据

阅读全文

0 0