react-workshop

A hands-on workshop on building Web Apps with React

Table of Contents

• Environment Setup
• Project Setup
• ES6 Primer
• Introduction to JSX

Environment Setup

For this workshop, we use the following set of tools and technologies:

• Node.js v7+
• Yarn!
• WebStorm / Sublime 3
• Google Chrome v60+
• React Developer Tools (Browser Extension)

Project Setup

The demo project can be setup by the procedure mentioned below.

Run the following commands in the exact order in order to download project dependencies and start the project.

• $ cd react-workshop
• $ yarn install
• $ yarn start

ES6 Primer

The next (and much better) version of JavaScript that helps write consistent and error-free code.

• let / const
• template literals
• Classes
• Arrow functions
• Object Literal Enhancements
• Default Parameter Values
• Object Spread Operator
• Module Exports / Imports

Study Links:

• ES6 For Humans
• ES6 Overview & Comparison
• es6features

Introduction to JSX

JSX allows writing Markup in JavaScript. It's a utility that helps developers create React components quickly and seamlessly.

• Branch: lesson_jsx

Study Links:

• Introducing JSX
• React: Rethinking best practices