react组件1

<div id="root"></div>
<script type="text/babel">
	//写组件
	class Cmp1 extends React.Component{
		constructor(...args){
			super(...args);
		}
		
		render(){
			return <div>aaa</div>;
		}
	}
	//用组件
	let root=document.getElementById('root');
	ReactDOM.render(<Cmp1></Cmp1>, root);
</script>

react组件2

<div id="root"></div>
<script type="text/babel">
	//写组件
	class Cmp1 extends React.Component{
		constructor(...args){
			super(...args);
			this.a=12;
		}
		render(){
			return <div>
			  a={this.a}
			</div>;
		}
	}
	//用组件
    let root=document.getElementById('root');

    ReactDOM.render(<Cmp1></Cmp1>, root);
</script>

react组件3

<div id="root"></div>
<script type="text/babel">
	//写组件
	class Cmp1 extends React.Component{
		constructor(...args){
			super(...args);
		}
		fn(){
			return 55+88;
		}
		render(){
			return <div>
			  a={this.fn()}
			</div>;
		}
	}
	//用组件
    let root=document.getElementById('root');

    ReactDOM.render(<Cmp1></Cmp1>, root);
</script>

react组件4

<div id="root"></div>
<script type="text/babel">
	//写组件
	class Cmp1 extends React.Component{
		constructor(...args){
			super(...args);
		}
		render(){
			let a=12;
			let name='blue';
			let age=18;

			return <div>
			  姓名:{name},年龄:{age}
			</div>;
		}
	}
	//用组件
    let root=document.getElementById('root');

    ReactDOM.render(<Cmp1></Cmp1>, root);
</script>

react组件5

<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
  constructor(...args){
	super(...args);
  }

  fn(){
	return 55+88;
  }

  render(){
	let url='https://www.baidu.com/img/baidu_jgylogo3.gif';
	return <div>
	  a={this.fn()}
	  <img src={url} />
	</div>;
  }
}

//用组件
let root=document.getElementById('root');

ReactDOM.render(<Cmp1></Cmp1>, root);
</script>

react组件6

<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
  constructor(...args){
	super(...args);
  }

  fn(){
	return 55+88;
  }

  render(){
	let name="blue";
	return <div>
	传进去是string=>"name"
		<span title="name">sss</span>
		传进去是变量=>name
		<span title={name}>sss</span>
	</div>;
  }
}

//用组件
let root=document.getElementById('root');

ReactDOM.render(<Cmp1></Cmp1>, root);
</script>