搭建框架

README.md

@@ -9,7 +9,8 @@ npm start
 ```
 
 ## 介绍
-使用create-react-app创建项目
+火花网真实项目
+使用create-react-app脚手架创建项目
 
 ### 技术栈
 - react-router-dom

package.json

@@ -35,6 +35,7 @@
     "jest-resolve": "24.7.1",
     "jest-watch-typeahead": "0.3.0",
     "mini-css-extract-plugin": "0.5.0",
+    "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -48,7 +49,7 @@
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "resolve": "1.10.0",
-    "sass-loader": "7.1.0",
+    "sass-loader": "^7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.3",

src/App.js

@@ -1,16 +1,10 @@
-import React,{Component} from "react";
+import React, { Component } from "react";
+
 import "styles/common.css";
-import "styles/reset.css"
+import "styles/reset.css";
 export default class App extends Component {
-  componentDidMount() {
-
-  }
-  render(){
-    return (
-      <div className="container">
-        {this.props.children}
-      </div>
-    );
+  componentDidMount() {}
+  render() {
+    return <div className="container">{this.props.children}</div>;
   }
 }
-

src/components/footer/index.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Footer extends Component {
+  render() {
+    return (
+      <div>
+        Footer
+      </div>
+    )
+  }
+}

src/components/header/index.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+import "./index.scss"
+export default class Header extends Component {
+  render() {
+    return (
+      <div className="header">
+        123
+      </div>
+    )
+  }
+}

src/components/header/index.scss

@@ -0,0 +1,8 @@
+.header{
+  height: 86px;
+  background-color: red;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+}

src/pages/common/index.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import "./index.scss"
+export default class Common extends Component {
+  render() {
+    return (
+      <div className="common">
+        <div className="common-center">
+          <Header />
+          {this.props.children}
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+}

src/pages/common/index.scss

@@ -0,0 +1,8 @@
+.common {
+  .common-center {
+    position: relative;
+    width: 1080px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+}

src/pages/home/index.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
-
+import "./index.scss"
 export default class Home extends Component {
   render() {
     return (
-      <div>
-        Home
+      <div className="home">
+        <div className="home-banner">
+
+        </div>
       </div>
     )
   }

src/pages/home/index.scss

@@ -0,0 +1,6 @@
+.home{
+  .home-banner{
+    height: 640px;
+    background-color: orange;
+  }
+}

src/pages/login/index.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Login extends Component {
+  render() {
+    return (
+      <div>
+        Login
+      </div>
+    )
+  }
+}

src/pages/nomatch/index.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class NoMatch extends Component {
+  render() {
+    return (
+      <div>
+        404 not found
+      </div>
+    )
+  }
+}

src/router/index.js

@@ -1,19 +1,32 @@
-import React, { Component } from 'react'
-import {BrowserRouter,Route,Switch} from "react-router-dom"
-import App from "../App"
-import Login from "@/pages/login"
-import Home from "@/pages/home"
+import React, { Component } from "react";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import App from "../App";
+import Login from "@/pages/login";
+import Common from "@/pages/common";
+import Home from "@/pages/home";
+import Nomatch from "@/pages/nomatch";
 export default class Rouer extends Component {
   render() {
     return (
       <BrowserRouter>
         <App>
           <Switch>
-            <Rouer path="/login" component={Login} />
-            <Route path="/" component={Home} />
+            <Route path="/login" component={Login} />
+            <Route
+              path="/"
+              render={() => (
+                <Common>
+                  <Switch>
+                    <Route path="/home" component={Home} />
+                    <Redirect to="/home" />
+                    <Route component={Nomatch} />
+                  </Switch>
+                </Common>
+              )}
+            />
           </Switch>
         </App>
       </BrowserRouter>
-    )
+    );
   }
 }