realpython / react-intro

Discover React

• https://www.youtube.com/watch?v=PGUMRVowdv8&feature=youtu.be
• https://github.com/petehunt/webpack-howto

Part 1 - React Intro

In this part, we'll detail how to set up a basic React todo app, utilizing ES6 syntax, Babel to transpile ES6 to ES5, and Webpack to bundle everything together.

Prerequisites

1. Work through the React Getting Started guide
2. Read this props vs state guide, making sure to understand the differences between a React component's props and state

What is React?

React simplifies both the building and maintaining of Single Page Applications by making it easy to create reusible UI components and manage changes (e.g., state) to your application's data.

• React is a library not a framework. Unlike full JavaScript UI Frameworks, like Angular and Ember, React is just a JavaScript library that provies a view for data rendered as HTML. Put another way, it's the view in MVC!
• It's an implementation of Web Components, the new standard for custom HTML5 UI elements
• Compared to AngularJS directives: "React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy." (Source: Facebook)

Who's using React?

• Facebook (duh)
• Instagram
• Netflix
• Atom Editor
• Pivotal Tracker
• NFL
• Khan Academy
• Cloudflare
• Venmo
• Trulia
• Rally Software
• Docker
• Instacart

Tools

Modern-day JavaScript development is all about tools. We will utilize:

• NPM for managing dependncies
• Webpack for bundling modules
• Babel for transpiling ES6 to ES5

Let's get them installed!

Start by going to the Node.js Foundation to install both NodeJS and NPM.

Once done, clone down the boilerplate structure (00_todo) and install the remaining dependencies:

• React and the React DOM

  npm install --save react@0.14.8
  npm install --save react-dom@0.14.8

• Webpack and the Webpack development server (the latter is used for serving up the bundled JavaScript application)

  npm install --save-dev webpack@1.12.14
  npm install -g webpack-dev-server@1.14.1

• Babel and the Babel tools for React

  npm install --save-dev babel-core@6.7.4
  npm install --save-dev babel-loader@6.2.4
  npm install --save-dev babel-preset-es2015@6.6.0
  npm install --save-dev babel-preset-react@6.5.0

Project Structure

Your project structure should now look like this:

├── index.html
├── package.json
├── src
│   ├── components
│   │   └── App.jsx
│   └── index.js
└── webpack.config.js

ADD EXPLANATION OF THE STRUCTURE

webpack-dev-server --progress --colors

Your First Component

It's time to say, "Hello World!"!

• ES6
• this.state
• this.props

Build

DETAIL THE BUILD PROCESS

What's next

1. RECAP
2. INFO ON CREATING A TODO APP

Part 2 - React Todo