🔥🔥 REACT - REACT UI 🔥🔥 Starter Kit + Useful Links

A React boilerplate with and based on:

• React-scripts
• Styled-components
• React-router
• Lerna config
• Storybook
• Babel + Webpack custom config
• ESLINT + airbnb rules
• React Bootstrap (you may prefer Reactstrap, it's more or less the same)
• Customize-CRA
• React-app-rewired
• Ant design

... and more and more

Long story short, a powerful and scalable set of plugins ready-to-use that will allow you to easily start a new project from scratch with everything you may need ( well... 😇).

Lerna is already set up to manage, build and run the storybook/UI Library pack along with the app package. Hot reload included! You have just to create the UI component inside the ui-pkg and then include it in the app-pgk like this:

// in app-pgk containers/components  
import { MyUIComponent } from 'ui-pkg';

It also contains different ways to handle the styling in react, like:

• CSS-in-JS --> Styled Components
• CSS modules
• native inline style={{}}

The steps you need to follow to install and run the project:

• from the root, run npm install
• from the root, run npm run bootstrap-hoist
• from the root, run npm run ui-pkg-build
• and then, to start the app-pkg run the command npm run app-pkg-start
• to see storybook, run the command npm run ui-pkg-storybook-start

Docs

Basic

• React

  • Getting started

  • Hello World

  • Compontents and props

  • State and lifecycle

  • Conditional rendering

  • Thinking in react

  • Create React App

  • Create React App v2 release note

  • Hooks API Reference

  • Hooks Recipes

• Styled Components

  • Basic

  • Advanced

• React Router

• JSX

  • JSX

  • JSX in react

• Storybook

• es6

• css-in-js

• css-modules

• React/Redux main concepts collection

Advanced

• Redux

  • Redux

  • Redux Saga

  • Immutability Pattern

  • Immutable data FAQ

  • Immutabiliby guide

  • Introduction to Immutable.js and Functional Programming Concept

  • Reselct

• Babel

• Webpack

• Lerna

• Immutable.js

• ESLINT + AirBnB rules + Custom rules

• Prop Types

• Prop Types in React

• React - High Order Components

• React - API

• Customize CRA

• React App Rewired

• NextJS - Server Side Rendering

• Universal rendering - SSR

• React - Typescript cheatsheet

Dev Tools

• Chrome - React

• Chrome - React Sight

• Chrome - Redux

• JSX/REACT/REDUX/SCSS/STYLED-COMPONENTS/GIT webstorm/vscode plugins

Extras

• React - Starter kits

• React Boilerplate

• Redux - Starter Kit

• UI Component Libraries

  • Ant Design

  • Material UI

  • Reactstrap - Bootstrap v4 for React

• Gatsby - Site generator

• Grommet

• React Microservices/Microfrontends

• Tailor React Microfrontend

• React Testing Library

• Testing best practices

• Drupal 8 and React Boilerplate

What's next?

In the next future i'll provide the same boilerplate with separate branches including Redux Thunk and Saga config as well. It will be up to you to know which one would fit better for your own need. As of now in master branch there is only the middleware wrapping the App but not the actions/sagas/reducers templates

Contributing

If you think i missed something ( surely i did 😬 ) feel free to create an issue or a PR