DAY15-React to React

前言：

上一篇我们讲了如何建立你的第一个React网页，那今天阿森会介绍我们写网页会用到怎样的架构，就让我们开始吧！

示范网页：

这里就拿我之前写过的网也来当范例吧！

那我这个网页主要可以分为几个部分：

HeroSection:

About:

Experience:

Projects:

Contact:

还有一直都在最上面的NavBar:

如果用手机开会出现的Sidebar:

大慨是以上六个部分。

Ｗorkspace:

接下来就让我们看看workspace里长什麽样子吧！

那这里面比较重要的东西有两个，一个是src资料夹，里面存放我们主要撰写的程序码、图片等等，我们下一节再说。

再来是package.json这个档案，在这个json档里写的是我们用一共用到哪些插件，插件的版本是多少等等资讯，像这样：

{
  "name": "smooth",
  "homepage": "https://cooksen.github.io/mywebpage",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aos": "^2.3.4",
    "copy-to-clipboard": "^3.3.1",
    "gh-pages": "^3.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在合作开发中做版本核对也是很重要的一环，到时候就会需要来对这一块。

SRC资料夹：

接下来在我的src资料夹里一共有这些资料夹和档案：

所以当他在读我的档案时，会先找index.js，再来会读取到我的App.js，这两个档案分别长这样：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js:

import { BrowserRouter as Router } from 'react-router-dom'
import './App.css';
import Home from './pages';

function App() {
  return (
    <Router>
      <Home />      
    </Router>
    
  );
}

export default App;

之後我会把所有的元件都摆放在pages这个资料夹中的index.js，再以Home的名称将他export：

/pages/index.js:

import React from 'react'
import Navbar from '../components/Navbar'
import Sidebar from '../components/Sidebar'
import { useState } from 'react'
import HeroSection from '../components/HeroSection'
import InfoSection from '../components/InfoSection'
import { homeObjOne, homeObjTwo, homeObjThree } from '../components/InfoSection/Data'
import InfoSec2 from '../components/InfoSec2'
import Services from '../components/Services'
import Projects from '../components/Projects'
import Contact from '../components/contact'

export const Home = () => {
const [isOpen, setIsOpen] = useState(false)

const toggle = () => {
    setIsOpen(!isOpen)
}
    return (
        <>
        
         <Sidebar isOpen={isOpen} toggle = { toggle }/>
         <Navbar toggle = {toggle} />   
         <HeroSection />
         <InfoSection {...homeObjOne}/>
         
         <InfoSec2 {...homeObjTwo}/>
         <Services />
         <Projects />
         <Contact {...homeObjThree} />
        </>
    )
}

export default Home

这里就可以很清楚看到我components的架构了，我会在compnents资料夹中为每个元件再创一个资料夹，这里是我整个components资料夹的内容和HeroSection，其实我每个元件打开都长这样：

里面会有一个index.js和Elements.js，前者是主要显示的内容，後者是利用style-components代替css的装饰用档案。

index.js:

import React, { useState } from 'react'
import { HeroContainer, HeroBg} from './HeroElements'
import {
    HeroContent, HeroH2, HeroH2Wrapper
} from './HeroElements'

const HeroSection = () => {
const [hover, setHover] = useState(false)
const onHover = () => {
    setHover(!hover)
}

    return (
        <HeroContainer >
            <HeroBg />
            <HeroContent>
                <HeroH2Wrapper>
                <HeroH2>Hi</HeroH2>
                <HeroH2>I'm Sen Chao!</HeroH2>
                <HeroH2>Nice to meet</HeroH2>
                <HeroH2>you!</HeroH2>
                </HeroH2Wrapper>
            </HeroContent>
        </HeroContainer>
    )
}

export default HeroSection

HeroElements.js:

import styled from "styled-components";
import meblur from '../../images/bandblur.jpg'

export const HeroContainer = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    height: 950px;
    position: relative;
    z-index: 1;
    background-size: cover;
    width: 100%;
    background-image: url(${meblur});
    background-size: cover;
    background-position: center;

    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(120deg, #ee7752, #23d5ab);
        background-size: 400% 400%;
        animation: change 10s ease-in-out infinite;
        opacity: 0.4;
        z-index: 2;
    }

    @keyframes change{
        0%{

    background-position: 0 50%;

    }

    50%{

    background-position: 100% 50%;
    }

    100%{

    background-position: 0 50%;

    }
    }
`

export const HeroH1 = styled.h1`
    color: #fff;
    font-size: 48px;
    text-align: center;

    @media screen and (max-width: 768px) {
        font-size: 40px;
    }

    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
`

export const HeroP = styled.p`
    margin-top: 24px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    max-width: 600px;

    @media screen and (max-width: 768px) {
        font-size: 24px;
    }

    @media screen and (max-width: 480px) {
        font-size: 18px;
    }
`

当然HeroElements中一定不只这些，但相信透过这样展示大家可以大概了解Style-components的作用，如果不了解也不用担心！明天阿森会就这个题目在做一次详细的介绍。

而透过上面这样的结构，可以让我们在设计时更有效率，之後若要进行维护也会更加轻松，这里阿森推荐大家都可以照这样的结构来开发喔！

小结：

今天大概介绍了我开发网页习惯用的架构，如果你有更好的办法也不一定要用我的！那明天我会继续介绍Style components这个插件，那今天就先这样吧！