引入 jsx 语法内容时，需要指定 type为 text/babel
<script src="./jsx.js" type="text/babel"></script>
或者
<script type="text/babel">
...jxs
</script>
ReactDOM.render(html,target[,callback])将内容和渲染到指定的节点
变量用法
{ }代表进入了JavaScript执行环境
//基础用法
const a = <h1>Hello React</h1>;
// 变量用法
//{ }代表进入了JavaScript执行环境
let msg = "Hello React";
let href = "http://www.baidu.com";
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*将内容和渲染到指定的节点
ReactDOM.render(
<div>
{a}
{b}
</div>,
document.querySelector(".box")
)
jsx 标签必须要有结束标签。<a></a><input/>
jsx 中注释必须用{ 包裹}
只有一个根节点
//基础用法
const a = <h1>Hello React</h1>;
// 变量用法
//{ }代表进入了JavaScript执行环境
let msg = "Hello React";
let href = "http://www.baidu.com";
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*将内容和渲染到指定的节点
const c = React.createElement("a",{href:"http://www.baidu.com"},"复杂超链接")
const d = React.DOM.a({href:"http://www.baidu.com"},"复杂的超链接D");
const e = <div>
<h1>嵌套</h1>
<span> 数据</span>
</div>;
const f = React.createElement("div",null,
React.createElement("h1",null,"嵌套二")
);
//书写style时，横线式要改为驼峰式，font-size=>fontSize
const g = <span style={{color:'red',fontSize:'20px'}}>Style 写法</span>
const so = {
color:'green'
}
const h = <span style={so}>STYLE</span>;
//ES6中使用class关键字 声明了类
//对于一些关键字要进行转换， class=>className label的 for=>htmlFor
const i = <span className="cn"> Class 写法</span>;
const j = [
<h3 key="1"> 数组1 </h3>,
<h3 key='2'> 数组2 </h3>,
<h3 key='3'> 数组3 </h3>
];
const k = <div>
<hr/>
<h3>Hello</h3>
{j}
</div>
const l = ['数组4','数组5','数组6']
ReactDOM.render(
<div>
{/*这是一段注释*/}
{a}
{b}
{c}
{d}
{e}
{g}
{f}
{h}
{i}
{j}
{k}
{l}
{
l.map((m,n)=>{
return <h1 key={n}>{m}</h1>
})
}
</div>,
document.querySelector(".box")
)
// Array.map(function(item,index){})
map/forEach/for/filter
组件化
//ES5 的React.createClaa()终将被弃用，请尽量使用ES6的写法创建组件
// 由于继承的子类没有this，所以在ES6中需要使用constructor 得到 this
// 而在 ES5 中，createClass 所创建的类将自动拥有 this，可直接使用this.props
// this.props 将得到父级向下传递的数据
//this.props.children 得到组件的原始内容（子元素）
//当有一个子元素时，返回对象
//当有多个子元素时，返回数组
//当没有子元素时，返回 undefined
const Com1 = React.createClass({
render(){
return <div>
<h1>Hello ES5 React Component!!!</h1>
<h3>{this.props.msg}</h3>
</div>
}
});
//ES6
class Com2 extends React.Component{ //继承的类不能使用this
constructor(props){//props 接收 传过来的值
super(props);
}
render(){
return <div>
<h1>Hello ES6 react component!!!</h1>
<h3>{ this.props.msg }</h3>
</div>
}
}
ReactDOM.render(
<div>
<h1>Hello react</h1>
<Com1 msg="你好"></Com1>
<Com2 msg="你好"></Com2>
{/*<Com2/>*/}
</div>,
document.querySelector(".box")
)
