2020 React Styleguide

Purpose

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.

General Practices:

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.

Flow:

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?

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

Comments

[Sung M. Kim]

Could you share what looks "messy" in more detail?

It'd be helpful for others and the author

[dandalgatov]

Hey RZ. Can you give me some advice on how to make it cleaner? My goal is to create readable code and I'd love some constructive criticism.

[Lyrod]

You're useEffect async will not work. Because useEffect need a function to run when the component unmount. You need to have a IIFE or create an async function and call it