React has a problem. While the proliferation of JavaScript libraries, frameworks, and tools (JavaScript fatigue) is fantastic for the web development ecosystem, it can be extremely intimidating for beginners to get started.

I've created this all-in-one guide for beginners to get an opinionated walkthrough from start to finish: create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more.

Proudly presenting, React Express!

Environment

• Quick Start
• Setup & Build Tools
  • npm
  • Webpack
  • Babel
  • React

Modern JavaScript

• ES2015
  • Block Scoped Declarations
  • Fat Arrow Functions
  • Destructuring
  • Imports and Exports
  • Default Parameters
  • Classes
  • Dynamic Object Keys
  • Array Spread
• ES2016 and More
  • Static Class Properties
  • Class Instance Properties
  • Bound Instance Methods
  • Object Spread
  • Async and Await
• JSX

React Top-Level API

• React Components
• Component API
• Lifecycle API

Styling

Fundamentals

• Performance Model
• Event Handling
• Input Handling
• Conditional Rendering
• Lists and Keys
• Refs and the DOM

Data Management

• Component State
• Redux
  • React Redux

If you'd like to contribute, follow along below to get the repo set up.

yarn

OR

npm install

For working on the client (new pages, etc):

npm run dev:client

This will run the webpack dev server with hot reload.

For working on the server:

npm run dev:server

This will build the server bundle for server-side rendering.

For working on both client and server:

npm run dev

npm run build
npm run start

Make sure to lint and prettify your code!

npm run format
npm run test

MIT, Copyright (c) 2017 Devin Abbott

Devin Abbott, @dvnabbott