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')
);