The all-in-one beginner’s guide to modern React application development!

React Express

Why?

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!

Table of Contents

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

Contributing

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

Installation

yarn

OR

npm install

Running Dev Server

Client development

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

npm run dev:client

This will run the webpack dev server with hot reload.

Server development

For working on the server:

npm run dev:server

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

Both

For working on both client and server:

npm run dev

Building and Running Production Server

npm run build
npm run start

Contributing

Make sure to lint and prettify your code!

npm run format
npm run test

License

MIT, Copyright (c) 2017 Devin Abbott

Author

Devin Abbott, @dvnabbott