React之组件

  1. 首先自己创建一个简单的项目,项目的名字自己起,这里创建的文件夹名为MyReact;里面包含文件夹src,用来存JSX代码;文件夹build,用来存React所需的js库以及由JSX代码转换的标准JavaScript代码;还有一个index.html文件。
  2. 创建一个简单的组件,代码如下:
    <script type="text/babel">
    	var CommentBox = React.createClass({ 
    		render: function() { 
    			return (
    				<div className="commentBox">
    					Hello,world! I am a CommentBox.
    				</div>
    			); 
    		} 
    	}); 
    	ReactDOM.render(
    		<CommentBox />,document.getElementById('content') 
    	);
    </script>

    这里有几点需要注意: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( 
    			<div className = "commentBox" >
    			Hello,world!I am a CommentBox. 
    			</div>
    		);
    	}
    });
    ReactDOM.render( 
    	<CommentBox / >,document.getElementById('content')
    );

    标准的JavaScript代码文件会存在Build文件夹中,通过<script>引用就可以了。

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

    var CommentList = React.createClass({
    	render:function(){
    		return (
    			<div className="CommentList">
    				Hello!I am a CommentList!
    			</div>
    		);
    	}
    });
    
    var CommentForm = React.createClass({
    	render:function(){
    		return (
    			<div className = "CommentForm">
    				Hello!I am a CommentForm!
    			</div>
    		);
    	}
    });

    接着创建JSX3.js文件,代码如下:

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

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

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Hello React!</title>
    		<script src="build/react.js"></script>
    		<script src="build/react-dom.js"></script>
    	</head>
    
    	<body>
    		<div id="content"></div>
    		<div id="content1"></div>
    		<script src="build/JSX1.js"></script>
    		<script src="build/JSX2.js"></script>
    		<script src="build/JSX3.js"></script>
    	</body>
    
    </html>

    接下来直接在浏览器打开观察效果就搞定了。

  4. 具体教程参照:http://reactjs.cn/react/docs/tutorial.html

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...