React学习笔记1

文件导入

导入react必要文件
http://facebook.github.io/react下载react.js和react-dom.js.
下载browser.js
browser.js

开始

HTML编写一个DOM节点,React渲染的内容会插入到这个DOM节点

<div id="container"></div>

react开发使用jsx语法,<script>的类型设置为text/babel

<script type="text/babel"></script>

关于JSX

  • JSX必须借助React环境运行
  • JSX标签就是HTML标签,在Javascript书写这些标签的时候不需要使用""括起来
  • JSX语法能让我们更直观的简单组件的DOM结果,JSX不能直接在浏览器运行,最终会转化成JavaScript代码在浏览器运行
  • 在JSX中运行Javascript代码使用{}括起来,{表达式}
ReactDOM.render(
<h1>Hello React</h1>
document.getElementById("container")
)

React组件类创建

  • React创建的组件类以大写字母开头,驼峰命名
  • 在React使用React.createClass方法创建
  • 每个组件类都必须实现自己的render方法,返回null,false,定义好的组件模板
  • 组件类只能包含一个顶层标签
let HelloMessage = React.createClass({
    render:function(){
        return <h1>Hello React</h1>
       }
});
ReactDOM.render(
     <HelloMessage/>,
     document.getElementById("container")
);

组件的样式

  • 组件有三种样式
  • 1.内联样式
  • 2.对象样式
  • 3.选择器样式

React的key不能出现"-"符号,必须使用驼峰是命名,如果value为字符串需要加上引号,以,结尾,value不需要带单位比如px
代码示例


let ShowMessage = React.createClass({
        render:function () {
            return(
                    <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
                        <h1 style={hStyle}>{this.props.firstRow}</h1>
                        <p className="pStyle">{this.props.secondRow}</p>
                    </div>
            )
        }
    });

内联样式
和HTML内联差不多

style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}

对象样式


//先在标签中设置
<h1>{this.props.firstRow}</h1>
//然后创建对象
var hStyle = {
        backgroundColor:"green",
        color:"red"
    };

选择器样式


//先在标签中设置
<p className="pStyle">{this.props.secondRow}</p>
//注意使用className不是class,class是一个保留字

然后自己写css样式就可以了


<style>
 .pStyle{
 font-size:20px;
 }
 </style>

又上wp编辑器的当了.搞忘把<>写成lt;gt;了
迭代了22次.郁闷

分享 二维码
分类:代码笔记
还没有评论


在此输入评论..
0/100