README.md

Tutorials + Helpful Docs

• React tutorial ~ We recommend using the CodePen starter-link in order to go through this
• Webpack tutorial
• JSX
• React Patterns
• Optimizing Performance

Recitation 3: React

ECMAScript

• Scripting-language specification for standardizing Javascript
• currently on 9th Edition - ECMAScript 2018, but ES.Next is being worked on
• What do browsers currently support?

Babel

Javascript compiler that allows for new features while remaining backwards compatible. Babel

• transforms syntax
• contains Polyfill features that are missing in your target environment
• can perform source code transformations

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

Webpack

• A bundler for modules
• Hot reload of modules for development
• Advanced code-splitting

  const path = require('path');
  
  module.exports = {
    mode: 'development',
    entry: {
      index: './src/index.js',
  +   another: './src/another-module.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

• There's even an Webpack bundle analyzer!

Thinking in React

React is...

• a JavaScript library – one of the most popular ones, with over 100,000 stars on GitHub.
• not a framework (unlike Angular, which is more opinionated).
• an open-source project created by Facebook.
• used to build user interfaces (UI) on the front end.
• the view'ish layer of an MVC application (Model View Controller).

Heavily makes uses of a Virtual DOM:

• All about components ~ parent -> children
• Rendering as a primitive!

Tic-Tac-Toe Demo

Create-React-App

This will make your life better! ~ coalesces needed babel, webpack, etc... starter code

host$ npx create-react-app my-app

Resulting directory:

README.md         build             node_modules      package-lock.json package.json      public            src

// App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Things to Consider

• Progressive Web Applications and Making a Progressive Web App with service workers (web workers with no DOM access)