初识React以及jsx的实现原理

React

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

特点

1. 组件化

2. 虚拟dom

3. jsx JavaScript xml

写法

主入口文件：index.js

import React from 'react'

import ReactDOM from 'react-dom'



ReactDOM.render(

    
welcome to home !
,

    document.querseleter('#root')

)

组件的创建

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

   import React from 'react'
   import ReactDOM from 'react-dom'
   
   const App = (prop) => (
   
    hello {prop.title}
   
   )
   
   ReactDOM.render(
   
    ,
   
    document.querseleter('#root')
   
   )
   

   2. 使用类创建组件

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

   • 实现原理：

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

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