React之组件
2016-08-05 11:37
435 查看
首先自己创建一个简单的项目,项目的名字自己起,这里创建的文件夹名为MyReact;里面包含文件夹src,用来存JSX代码;文件夹build,用来存React所需的js库以及由JSX代码转换的标准JavaScript代码;还有一个index.html文件。
创建一个简单的组件,代码如下:
现在可以尝试将两个组件添加到另一个组件里,创建JSX2.js文件,放在src文件夹中,代码如下:
具体教程参照:http://reactjs.cn/react/docs/tutorial.html
创建一个简单的组件,代码如下:
<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>引用就可以了。
现在可以尝试将两个组件添加到另一个组件里,创建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>接下来直接在浏览器打开观察效果就搞定了。
具体教程参照:http://reactjs.cn/react/docs/tutorial.html
相关文章推荐
- React Native 开发之 (07) 常用组件-View
- React.js 基础入门三 ---组件状态state
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- React Native-7.React Native NavigatorIOS组件详解
- 简述 React 组件生命周期
- React中父子组件间的通信问题
- [React-Native] ListView 组件
- javaweb-react的入门遇到的问题二:组件的生命周期
- ReactNative之基本组件
- 初学React:定义一个组件
- 用 React 做出好用的 Switch 组件
- React native从入门到深入 ---页面传值,父子组件传值
- React学习之最近公共组件(九)
- React Native之Image组件使用时Android和iOS兼容性
- 14、react之 组件的协同使用(组件的名字首字母必须大写)
- react-native组件避免重复渲染
- React组件生命周期
- 关于React组件之间如何优雅地传值的探讨
- React Native之ViewPagerAndroid 组件
- 浅谈React深度编程之受控组件与非受控组件