ES6 features

let and const ━ 🗣 2m

const means that the identifier can't be reassigned. Use as default choice over let to keep usage as clear as possible in the code.

Use let when you need a variable that can be reassigned, such as a counter in a loop, or a value swap in an algorithm.

There is no situation where you would use var over let in ES6.

Block Scope in ES6 ━ 🗣 4m

if (true) {
    let x = 'hi';      // x is confined within {}
    console.log(x);    // "hi"
}
console.log(x);        // "error"

With let and const, variables are now scoped at the block level (the nearest curly brackets {}).

Babel ━ 🗣 7m

Babel compiles ES6 code into ES5.

ES6 class vs Constructor Function ━ 🗣 8m

// ES5 Constructor Function

function User(options) {
    this.name = options.name;
    this.password = options.password;
}

const me = new User ({name: 'Ben', password: '12345'})

// ES6 class Function

class User {
    constructor(options) {
        this.name = options.name;
        this.password = options.password;
    }    
}

const me = new User ({name: 'Ben', password: '12345'})

Template Literals ━ 🗣 8m

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

Template literals are string literals allowing multi-line strings and embedded expressions (${...}).

Tags allow you to parse template literals with a function.

function highlight() {
    // do something
}

const name = 'Snickers';
const age = '100';
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;

console.log(sentence)

React

create-react-app ━ 🗣 13m28s

~/Desktop/Lambda/Pro/1st-react-lesson/$ npm install -g create-react-app

~/Desktop/Lambda/Pro/1st-react-lesson/example/$ create-react-app test

~/Desktop/Lambda/Pro/1st-react-lesson/example/test/$ npm start

import / export ━ 🗣 20m

React is modular, you can store different components in many different files and import and export them from one another.

To use React in your file, include this line:

import React, { Component } from 'react';

which grabs the React source code from node_modules folder.

To access your React file from another file, add this line to your source file:

export default NameOfApp;

and this import line in the destination file:

import NameOfApp from './NameOfApp';

Component ━ 🗣 25m

Boilerplate Component code:

class App extends Component {
    render() {
        return <div></div>
    }
}

Every Component has render().

Create a New Component ━ 🗣 30m15s

// NavBar.js

import React, { Component } from 'react';
import NavBarButton from './NavBarButton';
import './NavBar.css';

export default class NavBar extends Component {
    render() {
        return (
            <div className="navbar">
                <NavBarButton text={'Home'} />
                <NavBarButton text={'FAQ'} />
                <NavBarButton text={'LogIn'} />
                <NavBarButton text={'About'}  />            
            </div>
        )
    }
}

// NavBar.css

.navbar {
    height: 100px;
    background-color: whitesmoke;
}

// App.js

import React, { Component } from 'react';
import NavBar from './NavBar';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    render() {
        return (
            <div>
                <NavBar />
            </div>
        )
    }
}

export default App;

// NavBarButton.js

import React, { Component } from 'react';

export default class NavBarButton extends Component {
    render() {
        return (
            <button>
                { this.props.text }
            </button>
        )
    }
}