React之组件
来源:互联网 发布:云之家软件 编辑:程序博客网 时间:2024/05/19 13:15
- 首先自己创建一个简单的项目,项目的名字自己起,这里创建的文件夹名为MyReact;里面包含文件夹src,用来存JSX代码;文件夹build,用来存React所需的js库以及由JSX代码转换的标准JavaScript代码;还有一个index.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
0 0
- React之组件嵌套
- React之组件
- React Native]React Native组件之Navigator
- 前端之React实战-组件
- React Native之ViewPagerAndroid 组件
- React Native之ViewPagerAndroid 组件
- React Native组件之Text
- React Native 组件之Image
- React Native 组件之TextInput
- React Native组件之Button
- 10、react之 组件生命周期
- React基本组件之DropDown
- React-Native 组件之 Modal
- react之相关组件API
- React之高阶组件
- React 之 组件与组件抽离
- React之路--组件和自定义组件
- React之智能组件和木偶组件
- 【Java】JDK的环境变量配置
- 逻辑地址、虚拟地址、线性地址、物理地址
- 使用安卓自带刷新控件实现ListView的上拉加载和下拉刷新
- 【Oracle学习】之 表空间
- javaWEB总结(24):相对路径和绝对路径
- React之组件
- CentOS安装monitorix
- 限制不能打开同名程序
- 百度地图自定义大头针图片和添加标注
- Spring MVC 自定义Validator
- Vue2.0简易案例
- react知识点
- 蓝桥杯进制转换JAVA
- Cocoapods详解之---进阶篇2