react-项目配置

主文件配置：src / index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
render(
    <App />, 
    document.getElementById('root')
);
serviceWorker.unregister();

主组件配置：src / App.js

import React,{ Component,Fragment } from 'react';
class App extends Component({
  return(
    <Fragment >
    
    </Fragment >
  ) 
})
export default App;
// 注意Fragment可以替代div作为外层标签使用，不会被渲染出来，好处就是不会出现多余的div标签。任何组件里面都可以使用Fragment标签

组件集合文件配置：component / index.js

src下创建在component目录，在此跟目录下创建index.js用于导出所有的组件，在App.js里面引入这个文件里面的组件

component / index.js:

方式一：
import Page1 from './pahe1'
import Page2 from './pahe2'
import Page3 from './pahe3'
import Page4 from './pahe4'
.....

export{
    Page1,
    Page2,
    Page3,
    Page4
    ...
}

方式2：
export { default as Page1 } from './pahe1'
export { default as Page2 } from './pahe2'
export { default as Page3 } from './pahe3'
export { default as Page4 } from './pahe4'
...

如果在组件导出前需要对组件做统一的处理，则使用方法1，如果不做处理可以使用方法2，代码简洁一些。

App.js导入组件：

import React,{ Component } from 'react';
import {
    Page1,
    Page2,
    ...
} from './compopnent'
class App extends Component({
  return(
    <div>
        <Page1 />
        <Page2 />
    </div>
  ) 
})
export default App;