JavaScript Frameworks

React.JS

Created by Kostas Minaidis | Jan 2019

Front-end Bootcamp

What is React.JS?

A JavaScript library for building user interfaces using reusable encapsulated Components that manage their own State.

It uses the Virtual DOM and JSX technologies to accomplish that.

React was developed by engineers at Facebook.

It is specially for projects which need performant DOM manipulations, like Facebook, AirBnB, etc. where a lot of areas update.

It is also a way to work by splitting the interface and app features into components.

What the heck is the VirtualDOM?

Whenever something is needed to be re-rendered, a virtual representation of the updated DOM is generated.

The Virtual DOM consists of light representations of elements modeled after the component tree, making the process of generating them much more efficient than generating real DOM elements.

Before applying the changes to the real DOM, checks are done to determine where exactly in the component tree the changes happened, a diff is created, and only those specific changes are applied.

Source: https://www.toptal.com/react-native/cold-dive-into-react-native-a-beginners-tutorial

Breaking down our Web App
into Components

General Front-end Framework Concepts

  • COMPONENTS: Split UI into independent, isolated, reusable pieces.
  • PROPS: Data passed into a COMPONENT
  • STATE: Private COMPONENT data
  • LIFE CYCLE: Different forms in which a component can exist: mounted, destroyed, etc.
    • MOUNT: constructor, render, componentDidMount
    • UPDATE: render, componentDidUpdate
    • UNMOUNT: componentWillUnmount
Our Tools

Prerequisites:

It requires Node.JS and knowledge of ES6

Do you have node?

$ node -v

Prerequisites:

ES6 Import/Export
& Object Destructuring

A Quick Tour...

ES6 Object Destructuring

let React = { Component: "My Component", Render: "Render!" }
let { Component } = React;						

Component; // "My Component"

ES6 Modules | Named Exports

lib.js

export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return Math.sqrt( Math.sqrt(x) + Math.sqrt(y) );
}

main.js

import { square, diag } from 'lib';

ES6 Modules | Default Exports

(One per module)

lib.js

export default function (){ ... };

main.js

import myFunc from './lib.js';
myFunc();

Gettings started with
create-react-app

$ npm install create-react-app -g
$ create-react-app my-app
$ cd my-app
$ npm start

When you are ready for production...

$ npm run build
Let's meet our practice partner:

CodeSandbox

https://codesandbox.io/
Create React App Boilerplate

https://codesandbox.io/u/kostasx/

Quick Start 
import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
let math = 
2 + 3 = { 2 + 3 }
;

ReactDOM.render( math, document.getElementById("app"));
Basics: Our App
Basics: JSX

Smart Syntax using HTML + JS

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array...you name it.

If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses.

Basics: A Component

Reusable Block

A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. Every component must come from a component class.

A component class is like a factory that creates components. If you have a component class, then you can use that class to produce as many components as you want.

To make a component class, you use a base class from the React library: React.Component

Basics: Component Styling

External and Inline CSS Styling. Adding Media.

Basics: Component Props

Passing data to our Components top-down. (Extras: Children)

Basics: Component State

2 ways to initialize:

state = {...} directly inside the class

Write a constructor and use this.state = { ... }

Basics: Component Event Handlers

Take care of your class binding:

(1) Constructor this.method.bind(this)

(2) method = ()=> { ... }

Events: onClick, onMouseOver, etc.

Docs

Handling Events / Supported Events

Passing Data from Child Component
to Parent
CodeSandbox
Hands-on: A Click Counter Button
Click Counter Button
Hands-on: Crypto Ticker
Click Counter Button
CodeSandBox Collection:
kostasx

React Gotchas

  • Self-closing JSX
  • A JSX expression must have exactly one outermost element
  • Using class instead of className
  • Using <label for="" instead of < label htmlFor=""
  • You cannot inject an if statement into a JSX expressions

    Use logical operators: &&, || or ternary operators: ( condition ) ? then : else ;

  • Changing the state directly via this.state instead of this.setState
  • Forget to export the Component
Resources