Notes on React & ES6

There are two modes for development: Single Page Applications, Multi Page Applications

Build Workflow

1. Dependency Management Tool: npm or yarn
2. Use Bundler: Webpack
3. Compiler: Babel + Presets
4. Use Development Server (Docker preferrably)

Single Page Applications (SPA)

For React 16, I like to scaffold a new project using the create-react-app CLI:

npm install -g create-react-app

Multiple Page Applications (MPA)

ES6 Basics

Functions

// Alternative function declaration.
const myFunction = (someVar, anotherVar) => { return console.log(somevar + " and " + anotherVar); }

// Removing brackets and return keyword.
const myFunction = (someVar, anotherVar) => console.log(somevar + " and " + anotherVar);

Exports & Imports (Modules)

Export example from JSON object.

// person.js
const person = {
    name: "Duane"
}

export default person;

// utility.js
export const clean = () => {}
export const baseData = 10;

Import example of the above class.

// Example 1
import person from "./person.js";
import prs from "./person.js";

// Example 2
import { baseData } from "./utility.js";
import { clean } from "./utility.js";

From lecture:

Spread & Rest Operators

Spread Operator: …

Yes, three dots 🙂

// Spread
// Used to spread out array elements or object properties.
const newArray = [...oldArray, 1, 2];
const newObject = {...oldObject, newProp: 5}

// Rest
// Used to merge a list of function arguments into an array.
function sortArgs(...args) {
    return args.sort();
}

Destructing

Easily extract array elements or object properties and store them in variables.

// Array Destructing
[a, b] = ["Duane", "Leem"];
console.log(a); // Duane
console.log(b); // Leem

// Object Destructing
{name} = {name: "Duane", age: 37}
console.log(name); // Duane
console.log(age); // 37

Reference and Primitive Types

Object and arrays are reference types. This is stored in memory (a pointer to the memory).

As shown below, I’ve updated firstPerson but console.log secondPerson.  Noticed firstPerson is also “Mario”?  This is because Objects and Arrays are pointed to the same variable in your computer’s memory.

const firstPerson = {
    name: "Duane "
}

const secondPerson = firstPerson ;
firstPerson.name = "Mario";
console.log(secondPerson); // Mario

Array Functions

const numbers = [1, 2, 3];

// Using .map returns a new array.
const doubleNumArray = numbers.map((num) => {
    return num * 2;
});

console.log(numbers); // [1, 2, 3]
console.log(doubleNumArray); // [2, 4, 6]

The original numbers were unchanged and the new array is actually new.

 

React Basics

Creating Components

There are two ways to create components: Functional or Class

Best practices is to use Functional Components.  Personally, I prefer Class Components but in the end it depends if your components are stateless or stateful.

Functional Components

const cmp = () => { 
    return

 

 

Class Components

class Cmp extends Component {
    render () {
        return

 

 

Props & State

Changes to props/state triggers React to re-render components and potentially updates to DOM.

Props

Props allow you to pass data from a parent (wrapping) component to a child (embedded) component.

// Parent Component
const posts = () => {
    return (
        <Post title="My first Post" />
    );
}

// Child Component
const posts = (props) => { 
    return (
        <h1>{props.title}</h1>
    );
}

We’re passing the title from the parent/wrapping component call back to the child component.

State

Changes to State also triggers the component UI render automatically.

class NewPost extends Component { 
    // state can only be accessed in class-based components!
    state = {
        counter: 1
    }; 
 
    // Needs to be implemented in class-based components! Needs to return some JSX!
    render() { 
        return (
            <h1>{this.state.counter}</h1>
        );
    }
}

Excerpt from course:

Here, the NewPost component contains state. Only class-based components can define and use state. You can of course pass the state down to functional components, but these then can’t directly edit it.

state simply is a property of the component class, you have to call it state though – the name is not optional. You can then access it via this.state in your class JSX code (which you return in the required render()  method).

Whenever state changes (taught over the next lectures), the component will re-render and reflect the new state. The difference to props is, that this happens within one and the same component – you don’t receive new data (props ) from outside

Sources: Supported Events

Sources

• Udemy: React the Complete Guide
• Create React App
• Supported Events