All Projects โ†’ ChristianTracy โ†’ cra-redux-boilerplate

ChristianTracy / cra-redux-boilerplate

Licence: other
โš›๏ธ๐Ÿ”จcreate-react-app application with redux and another cool libraries to make your life easier.

Programming Languages

184084 projects - #8 most used programming language
75241 projects

Projects that are alternatives of or similar to cra-redux-boilerplate

React Antd Admin Template
Stars: โœญ 1,022 (+6713.33%)
Mutual labels:  react-router, react-redux, redux-thunk
โšก๏ธSetup your entire project quickly and easily with 1-line command โšก๏ธ
Stars: โœญ 58 (+286.67%)
Mutual labels:  react-router, react-redux, redux-thunk
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: โœญ 885 (+5800%)
Mutual labels:  react-router, react-redux, redux-thunk
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: โœญ 58 (+286.67%)
Mutual labels:  react-router, react-redux, redux-thunk
React Admin
ๅŸบไบŽantdใ€redux-observableใ€redux-thunkใ€react-routerๅ“ๅบ”ๅผSPA่„šๆ‰‹ๆžถ๏ผŒๅŽๅฐ็ฎก็†็ณป็ปŸdemo. ๆƒ้™็ฎก็†๏ผŒ็”จๆˆท็ฎก็†๏ผŒ่œๅ•็ฎก็†ใ€‚ๆ— ้™็บง่œๅ•๏ผŒไธ‹ๆ‹‰ๆ ‘ๅฝข้€‰ๆ‹ฉๆก†
Stars: โœญ 141 (+840%)
Mutual labels:  react-router, react-redux, redux-thunk
eCommerce application based on the microservices architecture built using Spring Boot and ReactJS.
Stars: โœญ 221 (+1373.33%)
Mutual labels:  react-router, react-redux, redux-thunk
Redux First History
๐ŸŽ‰ Redux First History - Redux history binding support react-router - @reach/router - wouter
Stars: โœญ 163 (+986.67%)
Mutual labels:  router, react-router, react-redux
Learning reactjs from the ground up (router, redux, thunk, hooks, context, portals, and functional components)
Stars: โœญ 15 (+0%)
Mutual labels:  react-router, react-redux, redux-thunk
Best List of Open Source / Examples / Free / Case Study & Featured Template React Native Apps
Stars: โœญ 39 (+160%)
Mutual labels:  react-router, react-redux
A collection of helpers and utilities for selectors
Stars: โœญ 16 (+6.67%)
Mutual labels:  selector, reselect
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: โœญ 16 (+6.67%)
Mutual labels:  react-router, redux-thunk
tiny, flexible, hook for rendering route breadcrumbs with react-router v6
Stars: โœญ 170 (+1033.33%)
Mutual labels:  router, react-router
โ˜€๏ธReact ๅˆ/ไธญ็บง้กน็›ฎ๏ผŒCnodeJS็คพๅŒบ้‡ๆž„ (a junior project, rewrite ) ๐ŸŒŸ DEMO:
Stars: โœญ 66 (+340%)
Mutual labels:  react-router, react-redux
Fullstack React: The Complete Guide to ReactJS and Friends by Anthony Accomazzo
Stars: โœญ 100 (+566.67%)
Mutual labels:  react-router, react-redux
๐ŸŒˆ A starter project structure for React.js app using Dva.
Stars: โœญ 46 (+206.67%)
Mutual labels:  react-router, react-redux
A type-safe MobX router with parallel routing support.
Stars: โœญ 74 (+393.33%)
Mutual labels:  router, react-router
Production ready Wordpress theme built with React, Redux, Redux-Thunk, Intl, React Router v4, etc... and packaged by Webpack 2. Enjoy!
Stars: โœญ 14 (-6.67%)
Mutual labels:  react-router, redux-thunk
A MERN stack e-commerce website.
Stars: โœญ 45 (+200%)
Mutual labels:  react-router, redux-thunk
ไปŽ้›ถๆญๅปบไธ€ไธชreact-ssrๆก†ๆžถ ่งฃๅ†ณ้กต้ขjsไบ‹ไปถ ๆ ทๅผๅŒๆž„ ๆœๅŠกๅ™จๅฎขๆˆท็ซฏ่ทฏ็”ฑ ๆ•ฐๆฎๆณจๆฐด่„ฑๆฐด็ญ‰้—ฎ้ข˜
Stars: โœญ 42 (+180%)
Mutual labels:  react-router, react-redux
boss build a boss
Stars: โœญ 25 (+66.67%)
Mutual labels:  react-redux, redux-thunk


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

โ”œโ”€โ”€ 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 project conventions


- 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 (;


- 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 : Remember that you're using redux-thunk in this projects.


- 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 : 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.


  import { useTranslation } from 'react-i18next';


  const MyComponent = () => {
    const { t, i18n } = useTranslation();


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 => {

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

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

โ“ 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].