Skip to content

lesson2.md

Latest commit

 

History

History
231 lines (153 loc) · 5.12 KB

lesson2.md

File metadata and controls

231 lines (153 loc) · 5.12 KB
author Jared Siirila
title React Overview

React Overview

Icebreaker

First React App

https://reactjs.org/redirect-to-codepen/hello-world

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

We will discuss where the ReactDOM object came from in another class

--

spec

ReactDOM.render(element, container)
  • element is the React element to render
  • container is a reference to the location in the DOM to render

Wait a minute...what is a React element?

React elements

  • The smallest building block of React apps
  • Plain JavaScript Objects
  • React elements are immutable
    • A little like variables declared using const
  • Usually created using JSX syntax

Great...now what is JSX

The JSX is a lie

  • Looks like HTML
  • Writes like HTML
  • NOT HTML

--

JSX

A syntax extension for JavaScript that makes it easy to define React elements that compile to JavaScript

--

Allows embedding expressions similar to template literals

ReactDOM.render(
    <div>2 + 5 = {2+5}</div>,
    document.getElementById('root')    
);

--

Any valid JavaScript expression can be embedded in JSX using curly brackets.

let computeHypotenuse = (a, back) => Math.sqrt(a * a + b * b);

let result = <div> computeHypotenuse(3,4) = {computeHypotenuse(3,4)}</div>;

--

JSX tags must be closed. If there is no children in a JSX tag then it can be a self-closing tag.

let Icon = <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />

--

JSX support attributes similar to HTML attributes. JSX attributes can be eithe a string or a JavaScript Expression enclosed in curly brackets.

let theAnswer = <button title="The Answer" onClick={() => alert(42)}>The Answer</button>

--

One difference between JSX attributes and HTML attributes is that JSX attributes are camelCased, where HTML attributes are lowercase.

In addition, when setting classes in a JSX tag use the classNames attribute instead of class.

Web Development History

Static Pages

http://info.cern.ch/

  • Very simple
  • Each page is its own document
  • Documents are created ahead of time, like a Word document
  • Similar to a file system

--

Server Side Rendering

  • Like static pages, but allows for pages to be created on the fly by a program on the server

--

Pros of static and server side rendered sites

  • Initial page load can be fast
  • No state transition logic

--

Cons of static and server side rendered sites

  • Little to no interactivity
  • Page transitions can be slow (network speed)
  • Can be hard to scale

JavaScript to the rescue

  • Dynamic websites
* interactivity
* animation
* mutable
  • At first it just enhances server side rendered pages
  • As the interaction and need for a fast site increases more and more work is done on the front end

--

Rise of the spas

SPA stands for Single Page Application

In a SPA almost all of the UI (HTML) on the page is created on the front end using JavaScript

The back end returns raw data, not prerendered HTML

--

Benefits of Dynamic sites and spas

  • Allows creation of sites that couldn't exist otherwise
* Wordprocessors
* Infinite scroll (Google Images)
* Gmail
  • Smaller network requests once page is initially loaded

--

Drawbacks of spas

  • Inital load time is probably slower

Complex state management and mutation logic

React's Approach

Let the developer act like the page is completely rerendered with each state change

Let the framework handle which portions of the page are actually changed

This declarative API is one of React biggest pieces of magic

--

Virtual Dom

React has a separate representation of the DOM from the browser called the Virtual DOM

Whenever React renders, it creates an updated virtual DOM representation and compares it to the previous one

It then only updates the portions of the actual DOM that changed in the virtual DOM