ReactJS-1-基本使用

JSX使用

---

一、为什么使用JSX？
React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。但是用js创建虚拟dom可读性差，于是创建了JSX,继续使用HTML代码创建dom，增加可读性

二、如何使用JSX？
JSX变量：用{ }包括起来，如

 const title='hello';
 const elem=<h1>{title}</h1>;

JSX表达式：用{ }包括起来
JSX事件：
onClick={this.function_name.bind(this)}
对比html：<button onclick="function_name(this)">submit</button>
对比jquery：$('#btn').on('click',this.function_name.bind(this))

组件创建

---

底层组件

import React, { Component } from 'react'//import necessary react and component
 
class Comment extends Component {
  render () {
    return (
      <div>...</div>
    )
  }
}
export default Comment //导出组件Comment

包装组件

import React, { Component } from 'react'
import Comment from './Comment' //导入comment组件
 
class CommentList extends Component {
  render() {
    return (
      <Comment />
　　　 <Comment />
) } }
 
export default CommentList //导出包装组件CommentList

根组件

 import React from 'react';
 import ReactDOM from 'react-dom';//导入reactdom
 import './index.css';//导入css
 import CommentApp from './CommentApp';
 
 ReactDOM.render(
     <CommentApp />,
     document.getElementById('root')
 );