React 项目记录（二）——修改目录结构

水深无声 2022-03-26 04:28 285阅读 0赞

## Step 1：删除不必要的文件 ##

删除 src 文件夹中不必要的文件：

rm App.* index.css logo.svg

## Step 2：src 下创建需要的文件夹 ##

mkdir coms page router style tool

coms：放置组件

page：放置页面

router：放置路由的配置

style：放置样式文件

tool：放置自己写的工具

## Step 3：修改 index.js文件 ##

将原本的 index.js 文件的内容：

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();

更改为：

import React from 'react';
    import ReactDOM from 'react-dom';
    import './style/style.scss';
    import App from './router/App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();

## Step 4：创建 style.scss 和 App.js 文件 ##

在 src 目录下的 style 文件夹下创建 style.scss 文件，并在 router 文件夹下创建 App.js 文件。

style.scss：存放全局样式

App.js：存放路由

App.js：

import React, { Component } from 'react'
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
    
    import SiteIndex from '@/page/site/index'
    
    export default class App extends Component {
      render () {
        return (
          <Router basename="/">
            <Switch>
              <Route exact path='/' component={SiteIndex} />
            </Switch>
          </Router>
        )
      }
    }

在文件头部，我们引入了 react-router-dom ，所以我们在这需要安装它：

npm i react-router-dom

在这我们引入了一个 `@/page/site/index` 路径的文件，所以我们要在 `page` 目录下创建 `site` 目录和 `index.jsx` 文件。

index.jsx 文件内容：

import React, { Component } from 'react'
    
    export default class Index extends Component {
      constructor (props) {
        super(props)
        this.state = {}
      }
    
      componentDidMount () {
      }
    
      render () {
        return (
          <div className="outer home">
            indexPage
          </div>
        )
      }
    }

## Step 5：启动项目 ##

npm start