2020 React Styleguide
Tags: react, tutorial, javascript, codequality
Published: 2020-09-25 06:11:30

<h1>Purpose</h1>

This stylegyide is aimed to help those who are just starting out, and a quick reference for my future self. 

Code is meant to be minimal, intuitive, and clear. My goal is to create something that I can easily read years from now. If you want to try my method to madness, there is a "Quick Start" template at the bottom of the page. 

Please comment your suggestions for improvement. 

<h1>General Practices:</h1>

1. Make sure every space serves purpous.
2. Group like elements to create a flow.
3. Be consistant for future readability. 

I use React Hooks and functional components because they make your code cleaner and more semantic. Here is an example of accessing state vs accessing a hook: 

*{this.state.element} vs {element}*

Writing to hooks is also much more simple. 

<h1>Flow:</h1>

**Essentials** To import all the core React functionality.
**Local Components** To import and quick index your local components.
**Styles** To define the look of the app.
**State and Props** To store *Variable Data*. Components here are meant to be updated.
**Defenitions** To store *Firm Data*. Bigger defenitions can be abstracted for a cleaner look. 
**Action** To define when and how functions should work.
**Return** To orgonize all the data in the desired layout. 

```
|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 */}
```

Below is a code example of all these pieces working together in a more real world enviroment. Does it make it easier to read when you know what to expect and why it's there?

```javascript
//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 />
        </>
    )
}



```


Here is the Quick Start: 

```
//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 />
        </>
    )
}
```