React Milkshake🥤

A React boilerplate that comes with a custom CLI for increased productivity and that is designed for scalable and high-performance web applications. Visit reactmilkshake.com for more information or read the documentation below.

CLI

This project includes a custom CLI for generating components & features. The CLI can handle a lot of the redux boilerplate for you. First mark the scripts as executable (with the command chmod +x ./cli/*) and you’re good to go.

npm run make:component COMPONENT_NAME

• creates the component folder
• add a component file to the folder
• add a styles file to the folder (styled-components)
• include the styles file in the component

npm run make:connected_component COMPONENT_NAME

This will do the same as make:component but connects the component to the redux store.

npm run make:feature FEATURE_NAME FEATURE_TYPE FEATURE_URL

• creates the feature folder
• sets up a action with the given name and type
• sets up a reducer for the created action
• sets up a sagas file for the created action
• sets up a services file for making an API call

Examples:

• npm run make:component Button
• npm run make:connected_component Container
• npm run make:feature books getBooks GET_BOOKS
• npm run make:feature users getUsers GET_USERS www.example.com/api/users

Try it out to see how it looks or check the code_templates folder. You can customize these files to your own needs.

Styled Components

React Milkshake is a boilerplate for kick-starting your new projects. It is not a component library and does not come with a template or theme. But, it does come with a couple of styled components, like a sidebar layout or card component, that you can use to quickly develop your application.

Dependencies

• React
• Redux
• Redux Saga
• Redux Persists
• React Loadable
• React Helmet
• Styled Components

Create React App

This project was bootstrapped with Create React App.

Quick Start

In the project directory, first run yarn or npm install, then run yarn start or npm start.