React.js

View library to build efficient web application - Github / HN

Build components that you can reuse by assembling LEGO block.
Data flows from top to bottom (from root to components), and only components downstream have to be repainted.

React was meant to be a way to provide snappy page loads and UX. - HN

This is a very common misconception. React was meant to provide one-way data flow. With an app built directly on the DOM you have to deal with the DOM having its own state to manage on top of the state your own code is storing. You have a list of comments in a variable, and a list of DOM elements for each comment, and nothing but your own code is making sure they stay in sync with each other. React changed things so that the state of the DOM is always derived from your own app’s state, which eliminates what turned out to be a pretty tedious and error-prone amount of work in complex web apps.

It wasn’t the first to provide this but its API was unique and compelling vs existing alternatives. The virtual DOM, server-side rendering, etc. are not things that make React faster than non-React code, they are things that counteract the inherent slowness in React’s design to make it competitive with non-React code.

Watch the original JSConf talk where React was publicly announced and released, and notice how the talk is mostly about the one-way data binding, and the virtual DOM/reconciliation are mentioned in the back half as ways React catches up to non-React app speeds: https://www.youtube.com/watch?v=GW0rj4sNH2w

Virtual DOM

A javascript object that describe the state of our app, converted to DOM by react.

import React, { Component } from 'react';

// new React 4
function App() {
	return ... ; // as replaced render
}

// older
class Clock extends React.Component {
	render() {	// mandatory method
    }
}

JSX

inline HTML DSL inside javascript to define snippet of html. with some caveat class => className.

Starting

use npm package create-react-app 2.0

npx create-react-app my-app          # run package without installing
npm start    # start the empty app
  • react-scripts - install all tools + dependancies (webpack,…)

folders:

  • public
  • src
    • index.js
    • index.html

Classes vs Hooks

Hooks are react specific.

Introduction

Course

Helpers

  • tachyons - React predefined style

Refs

Written on July 6, 2018, Last update on February 9, 2024
web js react