Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
133 lines (102 sloc) 3.58 KB

Tutorials + Helpful Docs

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:

Virutal Dom Diff

  • 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