- <script src="js/react.js"></script>
- <script src="js/browser.min.js"></script>
- <script src="js/react-dom.js"></script>
这里需要注意的是这三个文件必须首先加载!并且react.j文件要放在最前面进行导入! react.js是react.js的核心库。 react-dom.js提供与DOM相关的功能。而 browser.js是将JSX语法转化为JAVASCRIPT语法。
二、模板语法之后创建script标签,我们的核心JSX语法就写在标签内部:
这里需要注意的地方是:<script> 标签的 type 属性为 text/babel 。凡是使用 JSX 的地方,都要加上 type="text/babel" 。
tips: 在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后,这个依赖的库改为browser.js。 页面script标签的type也由text/jsx改为text/babel。
接下来我们写一个简单的小案例,利用React.js打印输出语句,代码如下:
- <script type="text/babel">
- /*一、基本结构:
- ReactDOM.render() 是react中的最基本的方法,作用是将模板转为HTML语言,并将其插入到DOM节点中。
- */
- ReactDOM.render(//render:渲染的意思
- <h1>你好,React!</h1>,
- //必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点;
- document.getElementById("example1")
- )
- </script>
使用上面语句就可以打印输出语句“你好,React!”,这就实现了简单的案例。
接下来我们介绍一下,React.js中的CSS样式书写方式,与原生分离式写法有很大不同:
① React 推荐使用内联样式!(使用小驼峰法则)
② React 会在指定元素数字后自动添加 px 。
- <script type="text/babel">
- var myStyle = { //传入一个样式数组
- fontSize: 100,
- color: 'red'
- };
- var testStyle = {
- width: 800,
- heigth: 500,
- backgroundColor: "yellow"
- };
- ReactDOM.render( < div style = {
- testStyle
- } > <h1 style = {
- myStyle
- } > 这段文字使用了内联样式 < /h1>
- </div > , document.getElementById('example'))
- </script>
显示效果如下:
接下来我们在模板插入 JavaScript 变量,以数组为例,看一下会是什么效果
- <script type="text/babel">
- var arr = [
- <h1 key="1">这是数组元素1</h1>,
- <h2 key="2">这是数组元素2</h2>,
- <h3 key="3">这是数组元素3</h3>,
- ];
- ReactDOM.render(
- <div>{arr}</div>,
- document.getElementById("example")
- )
- </script>
代码的运行结果如下:
以上我们可以看到JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员。
一、什么是组件?
组件化思想在React.js中很重要,eact 允许将代码封装成组件,然后像插入普通 HTML标签一样,在网页中插入这个组件。
二、组件的创建以及输出
- 创建:
- var HelloMessage = React.createClass({
- render:function (){
- return
- }
- })
- 输出:使用伪标签 实例化组件类并输出信息 <HelloMessage />
下面我们创建一个组件来实现一个简单的功能:
- <script type="text/babel">
- var HelloMessage = React.createClass({
- render: function() {
- return <h1>这是一个自定义组件---{this.props.name}---{this.props.age}</h1>
- // <p>这是个测试标签</p>;
- }
- });
- //输出组件
- ReactDOM.render(
- <HelloMessage name = "这是组件的name属性!" age = "这是组件的age属性!"/>,
- //在调用组件的时候,如果想要多次调用组件,也需要给组件设置一个根标签
- <div>
- <HelloMessage name="这是组件的name属性!" />
- <HelloMessage age="这是组件的age属性!" />
- </div>,
- document.getElementById('example')
- );
- </script>
上面代码运行结果如下:
在上述代码中,如果我们将
这是个测试标签
放开控制台会报错如下:
原因是因为组件类只能包含一个顶层标签(根标签),可以嵌套标签例如我们可以将上述组件类写成如下格式:
- var HelloMessage = React.createClass({
- render: function() {
- return <h1>
- 这是一个自定义组件---{this.props.name}---{this.props.age}
- <p>这是个测试标签</p>
- </h1>
- }
- });
运行时就不会再报错,结果如下所示:
在声明与调用组件的时候我们需要注意以下几点:
注意:
① 自定义的 React组件类名以大写字母开头,使用大驼峰法则命名!
② 所有的组件都必须拥有自己的render!
③ 组件类只能包含一个顶层标签(根标签),可以嵌套标签!
④ 组件可以任意加入属性,其属性属可以在组件类的 this.props.对象上获取。(组件的所有子节点)
Tips: 在添加属性时,
class 属性需要写成 className ,
for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字
复合组件:创建多个组件来合成一个组件,即把父组件的不同功能点进行分离
- <script type="text/babel">
- var BaseModule = React.createClass({
- render:function(){
- return(
- <div>
- <Module title={this.props.title} />
- {/* <h2>作品:{this.props.title}</h2>*/}
- <p>作者:{this.props.author}</p>
- </div>
- )
- }
- });
- var Module = React.createClass({
- render:function(){
- return(
- <h2>{this.props.title}</h2>
- )
- }
- });
- ReactDOM.render(
- <BaseModule title="围城" author="钱钟书" />,
- document.getElementById('container')
- );
- </script>
上述复合组件运行结果如下:
好了。第一篇React的介绍就先这么多了,通过这些实例我们也大致了解了React所谓混写的概念以及其便捷性,和Vue等框架孰优孰劣现在还不能太早下定论,在以后的几篇文章里我们将会更深一步的了解下它们的异同再做比较。
来源: http://www.cnblogs.com/wq1994/p/7790018.html