React之组件-白红宇

React之组件

阅读量：6791 次

发布时间：2019-06-26

本文共 1504 字，大约阅读时间需要 5 分钟。

首先自己创建一个简单的项目，项目的名字自己起，这里创建的文件夹名为MyReact；里面包含文件夹src，用来存JSX代码；文件夹build，用来存React所需的js库以及由JSX代码转换的标准JavaScript代码；还有一个index.html文件。

创建一个简单的组件，代码如下：
这里有几点需要注意：a.创建的组件名称首字母必须大写。元素的话则首字母小写；b.为元素添加css的class时，要用className。以上两点是需要注意的。还有JSX代码也单独放在一个JS文件里，然后通过npm工具将JSX代码转换为标准的JS代码，命令如下：
```
jsx --watch src/ build/
```
输入这行命令后，可以不用关掉命令行工具，这样以后创建的JSX代码都会自动转换为标准的JS代码，这样在Html文件中直接调用标准的JS代码即可。上面的JSX转换为JS的代码如下：
```
var CommentBox = React.createClass({	render: function() {		return( 			
      
       			Hello, world!I am a CommentBox. 			
      
		);	}});ReactDOM.render( 	
      
        , document.getElementById('content'));
      
```
标准的JavaScript代码文件会存在Build文件夹中，通过<script>引用就可以了。

现在可以尝试将两个组件添加到另一个组件里，创建JSX2.js文件，放在src文件夹中，代码如下：

var CommentList = React.createClass({	render:function(){		return (			
      
       				Hello!I am a CommentList!			
      
		);	}});var CommentForm = React.createClass({	render:function(){		return (			
      
       				Hello!I am a CommentForm!			
      
		);	}});

接着创建JSX3.js文件，代码如下：

//将JSX2.js中的两个组件添加到CommentBox里面，最终在id为content2的div中显示 var CommentBox = React.createClass({  render: function() {    return (      
              
       Comments
        
               
             
      
    );  }});ReactDOM.render(  React.createElement(CommentBox, null),  document.getElementById('content1'));

刚才命令行工具没关的话，以上两个文件则以编译到build文件夹中，文件名字一样，接下来就通过<script>标签在html文件中引用即可，代码如下：