前端——React---将组建单独抽离成.jsx文件

我们可以将index.js文件中的组件抽离出来，每个组件抽离为一个.jsx文件，再从index.js中到进来。

eg.

index.js:

import React from 'react';//创建组件，虚拟DOM元素，必须这么写
import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示的
import Hello from './components/Hello.jsx';
const dog={
    name:'大黄',
    age:3,
    gender:'熊'
}
ReactDOM.render(<div> 
    123
  <Hello {...dog}></Hello>
    </div>,
    document.getElementById('app')
);
var o2={
    age:22,
    address:'北京',
    phone:'139999'
}

var o1={
    name:'zs',
    ...o2
}

Hello.jsx

import React from 'react';//创建组件，虚拟DOM元素，必须这么写
export default function Hello(props){

//如果在一个组件中return一个null。则表示此组件是空的，什么都不会渲染

//在组件中，必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)