https://github.com/hex2f/react

My React boilerplate for 2019, using the new fancy hooks and eveything.
https://github.com/hex2f/react

Last synced: about 1 month ago
JSON representation

My React boilerplate for 2019, using the new fancy hooks and eveything.

• Host: GitHub
• URL: https://github.com/hex2f/react
• Owner: hex2f
• Created: 2019-10-02T19:56:40.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T13:16:09.000Z (almost 2 years ago)
• Last Synced: 2024-05-02T05:30:19.707Z (7 months ago)
• Language: JavaScript
• Size: 1.3 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React 2019

My React boilerplate for 2019, using the new fancy hooks and eveything.

## npm scripts

`npm run dev` Launch dev server on localhost:3000

`npm run build` Build to dist/

## Structure

`@` is a prefix for `/src/` that can be used for importing easily from anywhere. For example, to import a view you do `import ViewName from '@views/ViewName/ViewName.jsx'`.

Routes go in `@views/ViewName` entry file is called the same as the containing folder. Ex. `@views/Home/Home.jsx` with asociated files in the same folder.

Routes are defined in `src/index.js`.

Global states are defined in `@states/stateName`. Example of a state:

```js

import useGlobalState from './useGlobalState'

export default useGlobalState({

  loggedIn: false,

  name: ''

})

```

Components that are used across multiple views should be in `@components` with the same folder structure as in @views.

## Components

We use functions in this house >:(

```jsx

import React, { useState, useEffect } from 'react'

export default function Landing () {

  const [seconds, setSeconds] = useState(0)

  // Same as componentDidMount

  useEffect(() => {

    const interval = setInterval(() => {

      setSeconds(seconds + 1)

    }, 1000)

    // what you return here will get run on componentWillUnmount

    return () => clearInterval(interval)

  })

  return (

    


      
Seconds Passed: {seconds}

    

  )

}

```


## Styling

JS files exporting objects or functions are prefered for styling but you can use both css and sass anywhere by doing `import "./someStylesheet.sass"` for example.

Example of a JS style file:

```js

export const header = (theme) => ({

  background: theme.background,

  color: theme.color,

  flex: 1,

  padding: 24,

  borderRadius: 12

})

```

And to use it in a component:

```jsx

import * as styles from './style.js'

// later...



```