react

what is Module?

  • A piece of reusable code
  • A modern web application might depend on hundreds of modules
  • What will happen when you have too many modules?
  • How would you manage 1000 modules

javascript modules

  • The official implementation of module is relatively new in JavaScript (introduced in ES6), but the concept is never new
  • Popular module patterns: anonymous closure, global import, object interface, revealing module pattern
  • Popular module systems:
    • CommonJS: server-side first approach, commonly seen in Node.js
    • AMD (Asynchronous Module Definition): client-side first approach
    • UMD (Universal Module Definition): both sides
    • ES6 Module: official, YEAH!

module bundlers

  • Help us manage complex module dependencies
  • Popular bundlers: Webpack (for web app) and Rollup (for library)
  • Since we will be building web applications, we will focus on Webpack in this course

Webpack

  • Transpiling, bundling, or packaging modules with dependencies into static assets for browser usage
  • You can customize what loaders to include when bundling your application. E.g. If your code is written in JavaScript with ES6 syntax, you might need a Babel loader

Babel

  • A transpiler for transforming your JavaScript source code written in advanced syntax into plain JavaScript that all browsers can understand
  • Compile vs transpile (blurry definition)
    • compile: from higher abstraction level to lower abstraction level
    • transpile: modify source code within same abstraction level

React

set up

  • React team has made it super easy to create a modern web application with React via create-react-app command
  • Recommended for most personal React projects or people who are lazy to learn Webpack

JSX

  • Stands for JavaScript XML, a syntax extension to JavaScript for describing UI elements
  • Just a syntax sugar to React.createElement() function. It is not HTML. It is a JavaScript expression
  • Example:
<h1 className='title'>Hello, world!</h1>;

// compiles into

React.createElement(
  'h1',
  {className: 'title'},
  'Hello, World!'
);

Creating new components

  • There are two types of components in React: class component and stateless functional component
// Class component
class MyComponent extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

// Stateless functional component
const myComponent = () => {
    return (
        <h1>Hello, World!</h1>
    );
};

class component

  • Use class component when you need:
    • Access to lifecycle methods
    • Manage component state or local data
  • Not encouraged because they are hard to test and less performant, only use it when necessary

Stateless functional component

  • Use functional component when you need:
    • Describe simple UI with data passed by parent component
    • Write some HTML
  • Encouraged to use it as much as possible

state vs prop

  • State: component local data
  • Prop: data passed by parent component
  • Example:
const Title = (props) => <h1>{props.text}</h1>

class App extends React.Component {
    state = {
        data: "Hello, World!"
    }

    render() {
        return (
            <Title text={this.state.data} />
        )
    }
}

Lifecycle

  • Represents the lifecycle of a component (when it is created, updated, destroyed, and etc.)
  • Only class component has lifecycle
  • Lifecycle methods are hard to test and reason about. Only use them when necessary
class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        )
    }

    componentDidMount() {
        console.log("App is created");
    }

    componentDidUpdate() {
        console.log("App is updated");
    }

    componentWillUnmount() {
        console.log("App is destroyed");
    }
}

advanced react

  • There are much more to React. It is a powerful framework that allows us to create performant UI
  • React has been evolving rapidly. New APIs are announced every few months. Keep learning and stay on top of the trend

Assignment

Chat application

Made with Slides.com