Reactjs

REACTjs

when to use React? (or other frameworks) over pure js?

1. when there is a lot of state

Even "state" is a bit of a nebulous word. Imagine things like this:

    Which navigation item is active
    Whether a button is disabled or not
    The value of an input
    Which accordion sections are expanded
    When an area is loading
    The user that is logged in and the team they belong to
    Whether the thing the user is working on is published, or a draft

"Business logic"-type stuff that we regularly deal with. State can also be straight up content:

    All the comments on an article and the bits and bobs that make them up
    The currently viewed article and all its metadata
    An array of related articles and the metadata for those
    A list of authors
    An an activity log of recent actions a user has taken

2. to fight spaghetti

3. lots of DOM management

REACT, FLUX, REDUX, REACT-REDUX

react apps

the babel for reactjs

the Travis CI for reactjs

props and state (two most important things to know in react)

DONE

what is ReactJS

make a component

import React from 'react'; // npm install react react-dom

class MyComponent extends React.Component {
    /* your component stuff goes here, usually ends with, or consists only of, render(){} */

    // single line render (no brackets)
    render(){
        return <p>Hello World!</p>
    }

    // multiline render (with brackets)
    render(){
        return (
            <p>Hello World!</p>
            <p>This is multiline!</p>
            );
    }
}
two ways to make a component

class way, the standard way

// standard way
class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

simple way

//simpler syntax called 'functional components'
// used for components that only have a 'render' method
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

this.props

class ButtonComponent extends React.Component {
  render() {
    return <button>{this.props.name}</button>;
  }
}

then used in another component with

<ButtonComponent value=2>

constructors

looks like this

constructor(props){
    super(props);
    this.state= {
        value: null
    };
}

what's super(props) ? read this

In JavaScript classes, you need to explicitly call super(); when defining the constructor of a subclass.

states (RAM for the component)

React Devtools (to see what's going on and see props and state for everything)

what react devtools looks like

where to best store state and props data (if interaction outside of component needed)

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

facebook's react app creator (like cookiecuter template)

React did some changes to Javascript

the heart of Javascript - DOM

Virtual DOM

Programming in React means constantly working with event listeners

Event Listeners

JSX is not compulsory to write React

You can write React code without using JSX at all!

The majority of React programmers do use JSX, and we will use it for the remainder of this tutorial, but you should understand that it is possible to write React code without it.

The following JSX expression:

const h1 = <h1>Hello world</h1>;
can be rewritten without JSX, like this:

const h1 = React.createElement(
    "h1",
    null,
    "Hello, world"
);

When a JSX element is compiled, the compiler transforms the JSX element into the method that you see above: React.createElement(). Every JSX element is secretly a call to React.createElement().

We won't go in-depth into how React.createElement() works, but you can start with the documentation if you'd like to learn more!

export default ComponentName, what is that?

why export default ?

A Basic Component

// this file is saved as component1.jsx
class HelloWorldComponent extends React.Component {
    render() {
        <div>
            <p>Hello World!</p>
        </div>
    }
}

// option 1
export default HelloWorldComponent;

// option 2
export HelloWorldComponent;
// export AnotherComponent;
//if you don't follow convention and write another component in this file
// you can still export them

then in the main file:

// option 1 - renamable component
import Jollywag from "component1.jsx"; //means you can rename your component

// option 2 - multiple, non-renamable components
import { HelloWorldComponent, AnotherComponent } from "component1.jsx";

// option 3 - both default and specific names
// you can rename the default export, but can't rename the non-default one
import HelloRenamed, { AnotherComponent } from "component1.jsx";

confusing? good. now follow the conventions.

this error: Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.