React之组件

r囧r小猫 2022-07-10 04:55 211阅读 0赞

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][http_reactjs.cn_react_docs_tutorial.html]

[http_reactjs.cn_react_docs_tutorial.html]: http://reactjs.cn/react/docs/tutorial.html