목적

이 stylegyide는 이제 막 시작하는 사람들에게 도움이 되고 미래의 나에게 빠른 참고가 되는 것을 목표로 합니다.

코드는 최소한의 직관적이고 명확해야 합니다. 제 목표는 몇 년 후에도 쉽게 읽을 수 있는 것을 만드는 것입니다. 내 방법을 미친 듯이 시도하고 싶다면 페이지 하단에 "빠른 시작"템플릿이 있습니다.

개선을 위한 제안을 댓글로 남겨주세요.

일반 관행:

모든 공간이 푸르름을 제공하는지 확인하십시오.

같은 요소를 그룹화하여 흐름을 만듭니다.

향후 가독성을 위해 일관성을 유지하십시오.

나는 React Hooks와 기능적 구성요소를 사용합니다. 왜냐하면 그것들이 코드를 더 깔끔하고 의미론적으로 만들기 때문입니다. 다음은 상태 액세스와 후크 액세스의 예입니다.

{this.state.element} 대 {element}

후크에 쓰는 것도 훨씬 더 간단합니다.

흐름:

필수 요소 모든 핵심 React 기능을 가져옵니다.
로컬 구성 요소 로컬 구성 요소를 가져오고 빠르게 색인을 생성합니다.
스타일 앱의 모양을 정의합니다.
State와 Props 변수 데이터를 저장합니다. 여기에 있는 구성 요소는 업데이트될 예정입니다.
회사 데이터를 저장하기 위한 정의. 더 큰 정의는 더 깔끔한 모양을 위해 추상화할 수 있습니다.
조치 기능이 작동해야 하는 시기와 방법을 정의합니다.
돌아가기 원하는 레이아웃의 모든 데이터를 정리합니다.

|Import
|
|  |!Essentials
|  |  |>React
|  |  |>Plugins
|  |!Local Components
|  |  |>Views
|  |  |>Elements
|  |  |>Assets
|  |!Styles
|  |  |>CSS
|  |  |>UI Library
|
|Function 
|
|  |!State  and Props
|  |!Defenitions
|  |!Action
|  |  |>On Wake
|  |  |>Functions
|  |!Return
|     |{/* Label Components */}

다음은 보다 실제 환경에서 함께 작동하는 이러한 모든 부분의 코드 예입니다. 무엇을 기대하고 왜 거기에 있는지 알면 읽기가 더 쉬워집니까?

//React [Essentials]
import React, { useEffect, useState } from 'react'
import { Route, Switch, useHistory } from "react-router-dom"
//Plugins [Essentials]
import axios from 'axios'

//Views [Local Components]
import Home from './views/home'
import About from './views/about'
import Mission from './views/mission'
//Elements [Local Components]
import Header from '../components/shared/header'
import Footer from '../components/shared/footer'
//Assets [Local Components]
import Image_1 from '../../assets/images/img1.jpg'

//CSS [Styles]
import './App.css'
//UI Library [Styles]
import 'ui-library.css';
import { StarIcon } from '@ui-library/icons';
import { Button, Card, Container, } from 'ui-library';
const { Action } = Card;


export default function About(props) {
//State and Props [Variable Data]
    const { props1, prop2, prop3 } = props
    const [currentPage, setCurrentPage] = useState('home')
    const [hook, setHook] = useState(true)
    const [hook2, setHook2] = useState(0)
    const [hook3, setHook3] = useState({
        nested: {
            object: 1,
            object: 2,
            object: 3,
        }
    })
//Defenitions [Firm Data]
    const history = useHistory()
    const MenuText =
        <div>
            <H1>
                You can abstract medium and small components!
            </H1>
            <p>
                This makes RETURN look much cleaner, but 
                larger components will need their own file in 
                the same repository.
            </p>
        </div>
    const MissionButtonStyle = {
        color: 'red',
        height: '12px',
        width: '24px',
    }

//On Wake
    useEffect(async () => {
        const response = await axios('https://fakeapi/dandalgatov')
        setHook3(response.data)
        document.addEventListener('scroll', () => {
            setHook2(window.scrollY)
        })
    }, [])
//Functions
    const handleClick = e => {
        setCurrentPage(e.name)
        history.push(`/${e.name}`)
    }
    //Final Build. Return is simply orgonizing the elments we defined above in the right order.
    //I like to give it 2 lines for separation. 
    return (
        <>
            {/* One line break between major components. Label when not obvious. */}
            <Header />
            {/*============LOGO============*/}
            <img src={Image_1} alt='Logo' />
            {/*============MENU============*/}
            <Container>
                <Card>
                    <StarIcon /> {MenuText}
                    <Action >
                        <Button
                            className='action-button'
                            style={{ color: 'green' }}
                            onClick={history.push('/about')}
                        />
                        <Button
                            name='mission'
                            className='action-button'
                            style={{ ...MissionButtonStyle }}
                            onClick={(e) => {
                                setHook(false)
                                handleClick(e)
                            }}
                        />
                    </Action>
                </Card>
            </Container>
            {/*============BODY============*/}
            <Container>
                <Switch >
                    <Route exact path="/"
                        render={() => <Home hook={hook} setHook={setHook} />}
                    />
                    <Route exact path="/about"
                        render={() => <About hook2={hook2} setHook={setHook} />}
                    />
                    <Route exact path="/mission"
                        render={() => <Mission hook3={hook3} setHook={setHook} />}
                    />
                </Switch >
            </Container>
            {/*============FOOTER============*/}
            <Footer />
        </>
    )
}

빠른 시작은 다음과 같습니다.

//React
import React from 'react' 
//[options] import React, { useEffect, useState } from 'react' 
//[options(npm i react-router-dom)] import { Route, Switch, useHistory } from "react-router-dom"
//Plugins
//Views
//Elements
//Assets
//CSS
//UI Library

export default function App() {
// State and Props Ξ 
    const [hook, setHook] = useState()
//Defenitions ☑
    const history = useHistory()
//On Wake ☼
    useEffect(() => {}, [])
//Functions ✎
    const handleClick = e => setHook(true)

    return (
        <>
            <Header />
            {/*============LOGO============*/}
            {/*============MENU============*/}
            {/*============BODY============*/}
            <Footer />
        </>
    )
}