GithubHelp home page GithubHelp logo

christiantracy / cra-redux-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
13.0 5.0 2.0 4.64 MB

βš›οΈπŸ”¨create-react-app application with redux and another cool libraries to make your life easier.

JavaScript 89.74% HTML 10.26%
reactjs redux-thunk reselect pwa react-redux react-router reducer router selector react

cra-redux-boilerplate's Introduction

(LITL)

Project base

The project was created using create-react-app.

πŸ‘‹ Getting started

Create an empty folder for you project and move to it

  mkdir my-app
  cd my-app

Generate your boilerplate

  npx degit ChristianTracy/cra-redux-boilerplate

πŸ€– To do this in a SINGLE COMMAND use (just copy and paste into your workspace folder):

mkdir my-app && cd my-app && npx degit ChristianTracy/cra-redux-boilerplate

πŸ’» Start dev server

Don't forget to install your dependencies first

  npm install
  npm run start

if you need change something see create-react-app docs.

πŸ₯ Testing

Create your files to test with [filename].test.js inside your modules folders.

The base config for test used by create-react-app was removed. This project use jest to test files.

npm test

This command will prompt the test results and the coverage percentage.

🌈 ESLint + Prettier

This project contains the basic configuration to use the base airbnb rules. You'll find this inside the .eslintrc.json file. Feel free to change to use custom rules.

If you use VSCode, install the eslint and prettier extensions to format your code on save and get the lint errors inside the editor.

🚧 Project folder structure

β”œβ”€β”€ README.md
β”œβ”€β”€ node_modules
β”œβ”€β”€ package.json
β”œβ”€β”€ .gitignore
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ index.html
β”‚   └── manifest.json
└── src
    β”œβ”€β”€ locales
    β”‚   └── en.json
    β”‚   └── es.json
    β”œβ”€β”€ modules
        └── home
        β”‚   └── Home.jsx
        β”‚   └── HomeActions.js
        β”‚   └── HomeReducer.js
        β”‚   └── HomeSelectors.js
        └── commons
        β”‚   └── ViewsContainer.js
    β”œβ”€β”€ store
    β”‚   └── Store.js
    β”œβ”€β”€ App.css
    β”œβ”€β”€ App.js
    β”œβ”€β”€ App.test.js
    β”œβ”€β”€ index.css
    β”œβ”€β”€ index.js
    β”œβ”€β”€ logo.svg
    └── registerServiceWorker.js

πŸ“š Libraries included

REDUX:

ROUTER:

UTILS

πŸ‘‰ Redux project conventions

Reducers

- Reducers locations

The reducers files should be located inside the modules/[module_name]/ folders.

- Reducers names

The file name should be created with the name of the module (or not) + Reducer. E.g: HomeReducer.js inside modules/home/HomeReducer.js

- Reducers tip

Always use combineReducers to manage little parts of the store (https://redux.js.org/api/combinereducers);

Actions

- Actions locations

The reducers files should be located inside the modules/[module_name]/ folders.

- Actions names

The file name should be created with the name of the module (or not) + Actions. E.g: HomeActions.js inside modules/home/HomeActions.js

- Actions tips

Create your actions using FSA standard : https://github.com/redux-utilities/flux-standard-action Remember that you're using redux-thunk in this projects.

Selectors

- Selectors locations

The reducers files should be located inside the modules/[module_name]/ folders.

- Selectors names

The file name should be created with the name of the module (or not) + Selectors. E.g: HomeSelectors.js inside modules/home/HomeSelectors.js

- Selectors tips

Selector concept : https://redux.js.org/introduction/learningresources#selectors If you can, use reselect (already installed in this project).

πŸ”¨ Utils

🌎 i18n

Define your texts inside the locales/[language].js files. The library used to manage this is react-i18next.

Use

  import { useTranslation } from 'react-i18next';

  ...

  const MyComponent = () => {
    const { t, i18n } = useTranslation();
    <span>{t('home.text')}</span>
  }

  ...

You can check the complete implementation in modules/home/Home.jsx

πŸ›£οΈ Router

See the full documentation of used router in react-router and connected-react-router.

You've a redirect example in HomeActions.js and Home.jsx files.

export const redirectExample = () => dispatch => {
    dispatch(push('/another'))
}

All your views should be placed in commons/ViewsContainer.jsx file

  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/another" component={Another} />
    <Route render={() => <div>DEFAULT</div>} />
  </Switch>

❓ FAQ's

  • Where should I put my bussines logic?
    • The selectors are a good place to do that.
  • Should I make test for every single reducer an action?
    • The tests are awesome. It's a good practice to test all your reducers and actions to avoid problems :)
  • I need to add a new view...
    • In that case create a component inside a new module like /modules/about/About.jsx
    • The next step will be add your new view in the modules/commons/ViewsContaines.jsx.

cra-redux-boilerplate's People

Contributors

christiantracy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

cra-redux-boilerplate's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.