2.定义组件的两种方式

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.使用箭头函数的方式进行定义

import React from 'react'
import ReactDOM from 'react-dom'
const createApp=(props)=>{
    return (
        <div>
            {/*只要在jsx中插入js代码，就加入大括号即可 注释也一样*/}
            <h1>Hello world</h1>
            <span>title:{props.title}</span>
        </div>
    )
};
const app=createApp({
    title:"Hello React"
});
ReactDOM.render(app,document.getElementById("root"));

或

import React from 'react'
import ReactDOM from 'react-dom'

const App=(props)=>{
    return (
        <div>
            {/*只要在jsx中插入js代码，就加入大括号即可 注释也一样*/}
            <h1>Hello world</h1>
            <span>title:{props.title}</span>
        </div>
    )
};
ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));

2.创建类组件
2.1.创建文件 src/components/App.js

import React from 'react'

//React组件必须继承于 React.Component
class App extends React.Component {

    //渲染
    render() {
        return (
            <div>
                <h1>你好</h1>
                {this.props.title}
            </div>
        )
    }
}
export default App

2.2.在index.js中引用App组件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './component/App.js'
ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));

3.嵌套组件

import React from 'react'
import ReactDOM from 'react-dom'
const Hello=()=>{
  return (
    <div>Hello</div>
  )
}
const App=(props)=>{
    return (
        <div>
            <Hello/>
            <span>title:{props.title}</span>
        </div>
    )
};
ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));

JSX原理

//jsx
<div className="app" id="appRoot">
  <h1 className="title">JSX原理</h1>
  <p>JSX原理</p>
</div>

将JSX转换为JSON如下

{
    "tag" :"div",
  "attrs":{
    "className":"app",
    "id":"appRoot"
  },
  "children":[
        {
      "tag" :"h1",
      "attrs":{
        "className":"title"
      },
      "children":["jsx原理"]
    },
    {
      "tag" :"p",
      "attrs":{},
      "children":["JSX原理"]
    }
  ]
}