初识React以及jsx的实现原理

React

定义：用于构建用户界面的JavaScript库

特点

1. 组件化

2. 虚拟dom

3. jsx JavaScript xml

写法

主入口文件：index.js

import React from 'react'

import ReactDOM from 'react-dom'



ReactDOM.render(

    <div>welcome to home !</div>,

    document.querseleter('#root')

)

组件的创建

1. 箭头函数(名字需要大写)

   import React from 'react'
   import ReactDOM from 'react-dom'
   
   const App = (prop) => (
   <div title={porp.title}>
    hello {prop.title}
   </div>
   )
   
   ReactDOM.render(
   
    <App title="hello world!"/>,
   
    document.querseleter('#root')
   
   )
   

   2. 使用类创建组件

     import React from 'react'
     
     import { render } from 'react-dom'
     
     class App extends React.Component {
         render () {
             return <h1>类组件！！！</h1>
         }
     }
     
     // render是ReactDom提供的一种方法，通常只会使用一次
     render(
     
       <App desc="hello world"/>,
     
       document.querseleter('#root')
     
     )
   

   • 实现原理：

   import React from 'react'
   
   import { render } from 'react-dom'
   
   class App extends React.Component {
       render () {
           return <h1>类组件！！！</h1>
       }
   }
   
   const app = new App({
       desc="hello world"
   }).render()
   
   // render是ReactDom提供的一种方法，通常只会使用一次
   render(
   
     app,
   
     document.querseleter('#root')
   
   )
   

class传参通过this.props进行传参