https://github.com/flexdinesh/react-redux-boilerplate

A minimal React-Redux boilerplate with all the best practices
https://github.com/flexdinesh/react-redux-boilerplate

jest react react-boilerplate react-redux react-redux-boilerplate reactjs redux redux-saga

Last synced: 2 months ago
JSON representation

A minimal React-Redux boilerplate with all the best practices

• Host: GitHub
• URL: https://github.com/flexdinesh/react-redux-boilerplate
• Owner: flexdinesh
• License: mit
• Archived: true
• Created: 2018-03-03T13:07:36.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-22T05:13:09.000Z (almost 5 years ago)
• Last Synced: 2024-05-27T22:16:47.380Z (8 months ago)
• Topics: jest, react, react-boilerplate, react-redux, react-redux-boilerplate, reactjs, redux, redux-saga
• Language: JavaScript
• Size: 1.9 MB
• Stars: 782
• Watchers: 31
• Forks: 273
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-projects-boilerplates - React Redux minimal - Redux boilerplate with all the best practices (JavaScript)

README

        
# This project is no longer maitained. If you've been using the boilerplate, it will work well and good. Latest version of redux and react hooks patterns are not used in the boilerplate and it is not recommended to start a new project with this boilerplate in 2020.






A minimal, beginner friendly React-Redux boilerplate with all the industry best practices







  

  

    

  

  

  

    

  

  

  

    

  

  

  

    

  








  Created by Dinesh Pandiyan



## Why? [![start with why](https://img.shields.io/badge/start%20with-why%3F-brightgreen.svg?style=flat)](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action)

The whole React community knows and will unanimously agree that [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) is the ultimate starter template for kickstarting a React project. It's setup with all the industry best practices and standards. But it also has a lot more than what you just need to start a react-redux app. It took me quite some time to get my head around what was happening in the codebase and it's clearly not for starters. They quote this right in their readme,

> Please note that this boilerplate is **production-ready and not meant for beginners**! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

So it involves a lot of additional learning curve to get started with [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate). That's why I forked it, stripped it down and made this _leaner, **beginner friendly**_ boilerplate without all the additional complexity.

## Features

This boilerplate features all the latest tools and practices in the industry.

- _React.js_ - **React 16**✨, React Router 5

- _Redux.js_ - Redux saga and Reselect

- _Babel_ - ES6, ESNext, Airbnb and React/Recommended config

- _Webpack_ - **Webpack 4**✨, Hot Reloading, Code Splitting, Optimized Prod Build and more

- _Test_ - Jest with Enzyme

- _Lint_ - ESlint

- _Styles_ - SCSS Styling

Here are a few highlights to look out for in this boilerplate 



  
Instant feedback

  
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!


  
Next generation JavaScript

  
Use template strings, object destructuring, arrow functions, JSX syntax and more, today.


  
Component Specific Styles

  
Separate styles for each component. Style in the good old scss way but still keep it abstracted for each component.


  
Industry-standard routing

  
It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.


  
Predictable state management

  
Unidirectional data flow allows for change logging and time travel debugging.


  
SEO

  
We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)



But wait... there's more!

  - *The best test setup:* Automatically guarantee code quality and non-breaking

    changes. (Seen a react app with 99% test coverage before?)

  - *The fastest fonts:* Say goodbye to vacant text.

  - *Stay fast*: Profile your app's performance from the comfort of your command

    line!

  - *Catch problems:* TravisCI setup included by default, so your

    tests get run automatically on each code push.

## Quick start

1. Clone this repo using `git clone https://github.com/flexdinesh/react-redux-boilerplate.git`

2. Move to the appropriate directory: `cd react-redux-boilerplate`.


3. Run `yarn` or `npm install` to install dependencies.


4. Run `npm start` to see the example app at `http://localhost:3000`.

Now you're ready build your beautiful React Application!

## Info

These are the things I stripped out from [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) - _github project rules, ngrok tunneling, shjs, service worker, webpack dll plugin, i18n, styled-components, code generators and a few more._

## License

MIT license, Copyright (c) 2018 Dinesh Pandiyan.