1. Introduction to React

Introduction

1. Get a boilerplate project
get a headstart with react.  gonna start with the basics

2. once familar with react, will learn about general data modeling

3. then delve into redux

To get help, go to facebook group, or support@i-ducate.com

Source code:
https://github.com/StephenGrider/ReduxCasts

Purpose of Boilerplate Projects

Modern Javascript Tooling

Our project files
component_1.js
component_2.js
component_3.js
React.js
React.js

// no browser has support for ES6 yet. We will write in ES6 and will compile to ES5 via transpiling.

Tooling (Transpile JSX + ES6 to ES5) 
Webpack + babel // transpile ES6 code into ES5 code to run in the browser

will output
index.html
application.js
style.css

that we can run in a browser.

Environment and Project Setup

download boilerproject from https://github.com/StephenGrider/ReduxSimpleStarter

unzip folder.

In Terminal, Go to folder.

run npm install

The Application we are going to built. Will build a youtube clone.
Will use actual youtube api.

npm start

will start the boiler plate package and run a local server. We write js files inside this package, then babel and webpack bundles these files together convert them into ES5 that can run in a browser and makes a local server available to view all those files.

http://localhost:8080/

A Taste of JSX

Now that we have the local server running, lets make some changes.
Open code editor. Make sure server is running You can make server run by npm start in the command line.

In index.html. We have a simple DOM here. head tag, body tag, div, script tag
bundle.js is a compiled js for our entire app.

webpack and babel takes all these files put them together in a single file bundle,js

web server displays index.html

start from scratch

new 'src' folder, new file index.js

What is React?

is a javascript library used to produce html shown to user in a web browser. When we write react code, we write individual components or views. Components are snippets of code that produce html. We write multiple different components and we nest them together by placing them one inside the other in different fashions to make really complex apps relatively simple.

A component is a collection of js functions that produces html. We write components in js but it ultimately produces html.

In index.js,

// Step 1. create a new component. This component should produce some html.

// const is ES6 syntax.
// we declare variables using 'var'
// but when use const, we declare a constant, value not going to change

// function
const App = function(){
    return <div>Hi!</div>; 

}

    /* above JSX code. subset of JS, looks like html but is js.
    JSX code cannot be interpreted by browser. Purpose of boiler pack with
        webpack and babel is to translate this into vanilla js that can be ran on the browser
        What is purpose of JSX? This is js code that produces the html that is inserted into the DOM when we
        render this component (place html on to the page).
    */

// Step 2. take this component's generated html and put it on the page (in the DOM)

To see babel translating JSX into plain js code, go to

http://babeljs.io/repl/

JSX code

const App = function(){
    return <div>Hi!</div>; 
}

js code

"use strict";

var App = function App() {
    return React.createElement(
        "div",
        null,
        "Hi!"
    );
};

generated js code is ugly and hard to figure out. We can clean concise code.

const App = function(){
    return <ol>
      <il>1</il>
      <il>2</il>
      <il>3</il>
    </ol>; 
}

js code

"use strict";

var App = function App() {
  return React.createElement(
    "ol",
    null,
    React.createElement(
      "il",
      null,
      "1"
    ),
    React.createElement(
      "il",
      null,
      "2"
    ),
    React.createElement(
      "il",
      null,
      "3"
    )
  );

};

Very hard to understand code especially when its nested. Complex code will be almost ineligible. That is the purpose of JSX to make out components more clean and legible to understand.

ES6 Import Statements

Render Targets

// find react library from node_modules folder and assign library to the variable React
import React from 'react';
import ReactDOM from 'react-dom';

const App = function(){
    return <div>Hi!</div>; 

}

// use reactDOM to interact with the DOM. because we are trying to render something to the DOM.
//Trying to touch the DOM directly

//need to pass in an instance of app by putting in JSX <> around it, not class.
// 2nd argument, the target DOM
ReactDOM.render(<App />,document.querySelector('.container'));

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  dsfsdf
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

Lamda expression (ES6 syntax)

=> 'fat arrow'

const App = function(){
    return <div>Hi!</div>; 

}

change to

// more compact syntax. might need multiple functions for a component
const App = () => {
    return <div>Hi!</div>; 

}

Component Structure

A react application is made up of many components. A component is a function or object that returns some amount of html. It makes sense that we have different components for different functions.

1. Search bar at top.
2. Video screen, title, description
3.

If all logic inside index.html, it gets really messy really fast. React can render many components at the same and does it really fast. Rather than stuffing all logic into a single component, we spread it out into different components with different purposes.

Comes with practise.
For // show youtube screen

Component 1. search bar at top
Component 2. video player, title, description
Component 3. a single video preview on the right. Will have mulitple previews. Can always have multiple of one component
Component 4. a component that renders a list of component 3. Can nest components inside a components. Often, one component that lists a components.
Component 5. One final big component overall which is our app in index.js that will contains all components.

Building small components like this make it easier for us to build. For can, can reuse search bar component in other application.

Index is the root of our application, all other components will branch from it.

Remember, we always make one component per file.

Create new folder, 'components'.

Create new files,
search_bar.js
video_detail.js
video_list.js
video_list_item.js -

// continue #13

Youtube Search API Signup

Using the youtube API is a two step process. First, you need a API key.

Go to https://console.developers.google.com

Go to API Manager -> Enable API -> Search for youtube -> YouTube Data API v3 -> click on enable API -> Credentials -> Create Credentials -> API Key -> Browser Key -> Provide a name or leave it as default -> Create -> Pop up box with API key (select and copy api key)

index.js

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

const API_KEY = 'AIzaSyC2AOEumcukxg2H2E5TOYBfeV5--GWOeyU';

const App = () => {
    return <div>Hi!</div>; 
}

ReactDOM.render(<App />,document.querySelector('.container'));

Next, download an install package that will help us make this search request. Will download and install package youtubeapisearch. It will take an api key and search term and return search results.

Go to project directory

npm install --save youtube-api-search

// --save, please save this to package.json file in project. Its a list of dependencies that the project has.

Will be reflected in package.json file

  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.0.0",
    "react-router": "^2.0.1",
    "redux": "^3.0.4",
    "youtube-api-search": "0.0.5"

  }

Export Statements

Open search_bar.js

import React from 'react';

const SearchBar = () => {
    return <input />;    
// Need to import React. React.createElement
};


export default SearchBar;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar'; // for files that we write ourselves, need to provide folder reference

const API_KEY = 'AIzaSyC2AOEumcukxg2H2E5TOYBfeV5--GWOeyU';

const App = () => {
    return (    // use parenthesis for multiple line JSX expression
        <div>
            <SearchBar />
        </div>
    );
}

ReactDOM.render(<App />,document.querySelector('.container'));
// app is at the top level, and the first child is search bar

Run and see in browser

Class Based Components

We will explore creating a component not with a function but with a ES6 class.  
We have implemented a functional component because its literally is a function. Some info comes in, some JSX comes out. Simple.

Another type is a class based component. Used when you want your component to have an internal recording keeping. To be aware of itself and what happened to it since its been rendered.

Because users will be typing into this component, it needs some ability to check itself what's is typed. It needs to be aware. To upgrade from functional component to class component, where its more aware, more intelligent.

Its an actual js object with properties and methods.

import React from 'react';
//import React, {Component} from 'react';

class SearchBar extends React.Component{    // inherit from all functionalities from React.Component class
    render(){   // method used to render to DOM, have to return some JSX 
        return <input />;
    }
}

export default SearchBar;

When to use functional component or class based component? As a general rule, start with functional component, and if you need added functionality that you refactor it into a class. Will illustrate later.

Handling User Events

User trigger event, mouseover, type something in an input. How to respond to events? How to handle?

Two steps.

1. Declare event handler.
2. Pass event handler into t

        // html event
        // create a new input element and pass it a property onChange with value as this.onInputChange 

        // easier to tell purpose by name of method
        // event Object descirbes context/information about event that has occured
        // can use event object to get value of inout
        // see developer tools in chrome to view console
        // can find out info about other events in react docs

import React from 'react';
//import React, {Component} from 'react';

class SearchBar extends React.Component{    
    render(){    

        return <input onChange={this.onInputChange}/>;
    }

    onInputChange(event){
        console.log(event.target.value);
    }
}

export default SearchBar;

can change code to ES6.

    render(){     
        return <input onChange={event => console.log(event.target.value)}/>;

    }

// can clean up code a lot. concise

Introduction to State

Confusing. Hardest to understand in React.

Definition: State is a plain js object that is used to record and react to user events. Each class based component has its own state object. Whenever a component state is changed, the component immediatelt re-renders and forces all of its children to re-render as well.

Before we use the state object, we need to re-initailize. To do it,

import React from 'react';
//import React, {Component} from 'react';

class SearchBar extends React.Component{

    constructor(props){
        // calls parent class Component constructor method
        super(props);

        // define and initialize state
        // properties of state. can be any property we want
        this.state = {term: ''};
    }

    render(){     
        // change our state. Don't use this.state= ...'
        return (
            <div>                 
                <input onChange={event => this.setState({term: event.target.value})}/>;
                Value of Input: {this.state.term}
            </div>
        )
        // when input changes, re-assign value of input to state
    }
}

export default SearchBar;

     // constructor: first and only function called automatically when new instance of class created
    // reserved for doing setting up functions, like initializing variables and states

Controlled Components

    constructor(props){
        super(props);
        this.state = {term: 'Starting Value'};
    }

    render(){     
        return (
            <div>                 
                <input
                    value = {this.state.term} 
                    onChange={event => this.setState({term: event.target.value})}
                />;         
            </div>
        )
    }