🔥🔥 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

Utils

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

• Styled Components

  • Basic

  • Advanced

• React Router

• JSX

  • JSX

  • JSX in react

• Storybook

• es6

• css-in-js

• css-modules

Advanced

• Redux

• Redux Saga

• 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

• 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

• UI Component Libraries

  • Ant Design

  • Material UI

  • Reactstrap - Bootstrap v4 for React

• Gatsby - Site generator

• Grommet

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