React For Beginners Notes

-this.props.tagline … this refers to component instance

To pass anything other than a string as a prop you use {}

If in React dev tools you click on a component, you can then reference it in the console using $r and it will show you

NON REACT: If you select an item on the elements dev tools, and then go to the console and type $0, it will show that element.

8 - Stateless Functional Components

If there is no dynamic data, there is no need for it to be an entire component, it’s essentially just a render function which renders out some HTML. (If only render method and prop types, it is a stateless functional component).

Stateless functional component does not have “this”, instead pass props as a parameter to the function and then instead of {this.props.tagline} you would use {props.tagline}

function Header(props){}
can be rewritten as an arrow function like so:
const Header = (props) => {}

Implicit return: const Header = props => ()

rather than const Header = props => { return()};

If more than two params you can do const Header = (props, i) => (); if only one param, do not need to include ()

Another way to pass props:

const Header = ({ tagline, age }) => ()
then you can just reference { tagline } in c ode.

9 - React Router Step

Routing is not baked into React

<Switch/> the way the switch tag works is that it’s going to try the first route, then the second route and then fallback to not found

<Route exact path="/" component={StorePicker} />

^ When the path exactly matches “/“ load the component storepicker

If the path is equal to forward slash store forward slash anything, /store/:storeId .. works as a catchall for the store name

How including the routing component looks in React Dev Tools..

10 - Helper Functions

Just plain javascript, not React.

You can export functions from Helper.js. import { getFunName } from '../helpers";

difference between value and defaultValue in React. If you put value=“hello” on an input, react will yell at you. Values of inputs have to be attached to state.

For default text in a React Input use the attribute defaultValue.

To use exported method you can do as follows:

<input type="text" required placeholder="Store Name" defaultValue={getFunName()}/>

11 - Events

Exactly the same as vanilla js except React wraps your events in a Synthetic Event which ensures the events work cross browser and cross device.

Events are done inline in React.

<button onClick={this.handleClick} > Click me! </button>

Golden rule in React: don’t touch the DOM!

A ref allows us to actually reference an actual Dom node on the page

There are a few ways to add refs

ref="myInput" DEPRECATED

ref={(myInput) => this.myInput = myINput} confusing but works

You can create a ref by doing this…

class StorePicker extends React.Component{
myInput = React.createRef();

render(){
return(....
<input
ref={this.myInput}
...
}

If above the render method you have a function like

goToStore(event){
console.log(this.myInput);
console.log(this);
}

You will get an error, this is undefined. If you use it within the render method, this works.

This is because of how binding works in React.

React has built in lifecycle events and methods like render();

componentDidMount you can use the “this” keyword inside of it because its a built in method that comes with React, and they are in the React.Component parent. We make our own component that extends that (like StorePicker) and any methods that we then add ontop are not bound by default.

It’s hard to reference the component within one of it’s own methods which is a problem.

Solution: bind our own methods as well

Because es6 classes are new, no standard way to do that however there is a proposal on how to do it with funky syntax

Constructor

You would bind them using a constructor() method, method that runs before store picker component is created .

in constructor you must call super(); Super runs the component that we are extending first. (React.Component)

Next inside the constructor you bind all the methods.

What that does is it overwrites the method on it, and it will attach a binding to, (it will reference “this” inside of the goToStore within the store picker instance.

Instead of using the constructor, you can declare a property which is set to an arrow function.

goToStore is a property on the component (just like myInput is a property of the component). Then we set it to an arrow function, which will allow us to bind the value of this to the store picker component.

With an arrow function you can access {this} without binding in the constructor.

If you need to access “this” within a custom method you must use the arrow function syntax or do the whole constructor song and dance.

12 - Handling Events

Step 3 Change page to /store/whatever-name

We don’t actually want to refresh page, just change the url with “push state”.

It allows us to change the url without having to refresh the page or lose anything that we have in memory.

No way to pass something from a high level to a low level without passing it as props in react, so if the component was a few layers deep it would be difficult.

Since store picker is a child of the router, we have access to all the methods we need.

myInput = React.createRef()
goToStore = event => {
  //1. Stop form from submitting
  event.preventDefault()
  //2. get the text from that input
  const storeName = this.myInput.current.value
  //3. Change the page to /store/whatever-the-store-name
  this.props.history.push(`/store/${storeName}`)
}

The reason it is so fast is that we are no reloading anything or loading other pages. The router instead if say oh, this no longer matches, but this route does, so load the associated component.

13 - Understanding State

Is an object that lives inside of a component that stores all of the data /holds data that itself and it’s children may need.

React, reacts to changes in states and re-renders

Add Fish Form

We need to turn the inputs into an actual fish object that has the values and properties on it.

To do that we add onSubmit to the form.

There are two ways we can pull the values out of the inputs. One is refs, giving a ref to every single input. Or we could listen to a keyup event, and mirror the data to state.

-to each input, add ref={this.statusRef} and then in function above capture those ref values and set them to a const, like so:

Now we have the fish, but how do we get it into state, and also where does state live?

It is often the case where you have a parent state on one of the components and you pass it to the children.

Right now, the fish const is limited to the add fish form component. We want to give it to inventory, order and menu. There is no way to share that data with those other components, unless that data lives at a higher level .

You cannot pass data up, but you can pass it down.

First you have to set the initial state or empty state. This is what the component looks like when it initially mounts before we have had a chance to add items to our state.

Load a component first with an empty state and then do an Ajax request for example.

How do we get an item into state? You cannot actually update it directly from the AddFishForm because the methods that update state and the actual state always need to live in the exact same component.

How do you get a function that lives in App, down to a lower component? The answer is: props (how does anything get into a component).

In order to update state, you need to use Reacts set state API or else it’s not going to work.

Two steps to setting state:

1. Take a copy of the existing state (because you never want to reach into state and actually modify it directly, that is what is called a mutation in JS. const fishes = { ...this.state.fishes}; object spread is a nice clean way to copy Object spread operator An alternative approach is to use the object spread syntax recently added to the JavaScript specification. It lets you use the spread (…) operator to copy enumerable properties from one object to another in a more succinct way.
2. Add new object to state variable (or add fish to fishes variable) fishes[fish${Date.now()}] = fish;
3. Set new fishes object to state

this.setState({
fishes:fishes
});

HINT: In ES6 if your property and value are the same, you don’t need to do fishes:fishes, you can just do this.setState({fishes});

14 - Loading Data into State onClick

Load Samples Button, we need to add it to the inventory component so when you click a button, it loads the samples

Where do we put that function? In App.js not Inventory.js Why?? Because we have created custom functions which update state, and any custom function which updates state needs to live in the same component where our state lives.

How do you get a function from one component into another? Props! That’s how anything gets anywhere.

In child component that is using the function from another component, you need to use props to access it. this.props.loadSampleFishes

15 - Displaying State with JSX

JSX doesn’t have conditionals or loops of ifs, so you have to use plain javascript for that.

State is an object and you cannot map over an object, a map is for an array.

When you use {} in JSX it’s telling JSX that it’s JS

{Object.keys(this.state.fishes)} Object.keys() - JavaScript | MDN It will loop over fishes and grab the keys for each object, which we can use to loop over every single fish we have.

ERROR: index.js:1446 Warning: Each child in an array or iterator should have a unique “key” prop. REASON: each component does not have a unique identifier, which React needs to be able to update instance. SOLUTION: Give property called key and give a key of anything that is unique

In a component, if you don’t want to keep typing out this.props you can assign the props to variables right underneath the render() method.

ES6 Destructuring.

Instead of

    const image = this.props.details.image;
    const name = this.props.details.name;

You can do const {image, name} = this.props.details;

16 - Updating Order State

This code will check if order.fish1 exists, if it does it will increment it by 1 if not it will return 1

There is a way to test a function without a click event. In Chrome, go to React tools and find App.js or state component. Then in console you can reference it using $r

You can then use $r to call the function like so:

And then in React tools, can you look at the App component, and the state, and the change should be reflected there

Add to order needs to be clicked inside of the fish, so in order to expose the functionality we need to pass it as props.

If you need access to the key, you have to pass it to props as something other then key, such as:

How to Handle Add to Order Click on Button

In Fish, we can do <button onClick={this.handleClick}/>

And then at top above render() the code would be:

handleClick = () =>{
this.props.addToOrder(this.props.index);
}

Javascript to display conditional text:

{isAvailable? "Add to Order"? "Sold out"}

Javascript to reset a form:

event.currentTarget.reset();

17 - Displaying Order State With JSX

Order right now doesn’t have any information. In order to pass it information, we need to pass it props. We need to pass it at least 2 props: order, and fishes. Both of those props come from state.

Object spread in React … <Order {…this.state } /> That will spread everything from state into Order.

Avoid passing entire state, because components are modular and may be reused. What if you add to state later?

Javascript 30.com, Array Cardio Day 1 and 4 Map, filter, reduce

As soon as you have too much code in your render function, that probably means you are doing too much in one component and you can probably shell of some of that complexity to a separate component.. but sometimes it doesn’t warrant an entire new component

Wesbos likes to do is make separate render functions inside of a single component.

 import React from “react”;
import { formatPrice } from “../helpers”;
class Order extends React.Component {
  render() {
    const orderIds = Object.keys(this.props.order);
    const total = orderIds.reduce((prevTotal, key) => {
      const fish = this.props.fishes[key];
      const count = this.props.order[key];
      const isAvailable = fish && fish.status === “available”;
      if (isAvailable) {
        return prevTotal + count * fish.price;
      }
      return prevTotal;
    }, 0);
    return (
      <div className=“order-wrap”>
        <h2>Order</h2>
        <ul>
          {orderIds.map(key => (
            <li>{key}</li>
          ))}
        </ul>
        <div className=“total”>
          <strong>{formatPrice(total)}</strong>
        </div>
      </div>
    );
  }
}

export default Order;

Instead he will break up render() like so:

class Order extends React.Component {
  renderOrder = key => {
    return <li>{key}</li>;
  };
  render() {
    const orderIds = Object.keys(this.props.order);
    const total = orderIds.reduce((prevTotal, key) => {
      const fish = this.props.fishes[key];
      const count = this.props.order[key];
      const isAvailable = fish && fish.status === “available”;
      if (isAvailable) {
        return prevTotal + count * fish.price;
      }
      return prevTotal;
    }, 0);
    return (
      <div className=“order-wrap”>
        <h2>Order</h2>
        <ul>{orderIds.map(this.renderOrder)}</ul>
        <div className=“total”>
          <strong>{formatPrice(total)}</strong>
        </div>
      </div>
    );
  }
}

Before we return list item in renderOrder method, we need to check first if the fish is available.

18 - Persisting our State with Firebase

We want to save to a database so when we come back to it later, that data needs to be available to them.

Go to firebase.google.com and create a new project.

Go to product and in src/ folder, create a new file called base.js and import Rebase which is a package that allows React and firebase to work together to mirror state to the firebase changes.

Also import firebase package from firebase, and we use that for everything that is no mirroring to state.

We turned off authentication temporarily on the database, and then went to project overview -> chose the code option -> copied the values for var config.

We have created our firebase app and rebase bindings, and now we have to export them.

Next we need to go to App.js and mirror our fish state into our firebase. But in order to do that we need to wait until the app component is on the page and then we sync them up.

Lifecycle Methods

componentDidMount - is like a hook into the very first possible second that the application is loaded onto the page.

this.ref is a firebase command

 componentDidMount() {
    const { params } = this.props.match;
    this.ref = base.syncState(`${params.storeId}/fishes`, {
      context: this,
      state: “fishes”
    });
  }

Memory leak is possible if we are always listening to changes, and not unlisteninh.

When component is unmounted, we want to stop listening.

  componentWillUnmount() {
    base.removeBinding(this.ref);
  }

19 - Persisting Order State with localstorage

A different way to persist state without a database but within the browser.

Local storage works with key value storage You can pull that data back into the application.

componentDidUpdate() Is called immediately after updating occurs, and is not called on the initial render. As soon as it’s loaded and as soon as someone modifies their order, we want to update our local storage showing this is exactly what they added to their order.

console.log(wes) = [object Object] JSON.stringify(wes) = {“name”:”wes”}

JSON.parse(localStorageRef) this will switch it back to an object.

20 - Bi-directional Data Flow and Live State Editing

Added component, passed fishes={this.state.fishes} to Inventory component from App.js

Added same inputs as AddFishForm.

We need to pass individual fish down to the EditFishForm using following js:

{Object.keys(this.props.fishes).map(key => (
          <EditFishForm fish={this.props.fishes[key]} />
        ))}

WARNING: index.js:1446 Warning: Each child in an array or iterator should have a unique “key” prop. FIX: Add key= prop to EditFIshForm like so:

<EditFishForm key={key} fish={this.props.fishes[key]} />

WARNING: index.js:1446 Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

React doesn’t like you putting state in an editable area without having a plan to update it. WHY? Because as soon as you put state into a textbox, you have state in two spots. It’s spread across two different areas.

So we add on onChange={} attribute to the inputs in the fish form, like so:

        <input
          type=“text”
          name=“name”
          onChange={this.handleChange}
          value={this.props.fish.name}
        />

Now we need to create an updated fish object and somehow swim upstream from edit fish form to inventory and then to app. We need to get that updated fish back into our state.

What if you want to change the price? It doesn’t work! (It updates name instead) Why? It doesn’t know which property to update

console.log(event.currentTarget.name) tells us which property name was updated

ES6 Computed Property Names

const updatedFish = {
      …this.props.fish,
      [event.currentTarget.name]: event.currentTarget.value
    };

How do we get updated fish to swim upstream? Go back to where our state is (our app component).
Below AddFish function we add updateFish property (function).

updateFish = (key, updatedFish) => {
    //1. take a copy of the current state
    const fishes = { ...this.state.fishes };
    //2. update that state
    fishes[key] = updatedFish;
    //3. set that to state
    this.setState({ fishes });
  };

Go into Inventory and pass it one step further via props.

In EditFishForm, use that prop in the handleChange function where we call this.props.updateFish(key, updatedFish). Problem is we do not know the key. Although in React dev tools you see the key like so:

You cannot access the key when we are inside of the component so if we need it for whatever reason we have to pass it down ourselves.

In inventory we added:

<EditFishForm
            key={key}
            index={key}
            fish={this.props.fishes[key]}
            updateFish={this.props.updateFish}
          />

21 - Removing Items from State

We will be deleting items from our inventory and from our order.

//takes key of which fish we would like to delete
  deleteFish = key => {
    //1. take a copy of state
    const fishes = { …this.state.fishes };
    //2. update the state
    //if this was an array I would filter using this.state.fishes.filter() and return the new amount of fishes that I want.
    //because it’s an object, we first take a copy of it, and we set the fish that we don’t want to null.
    fishes[key] = null;
    //3. update state
    this.setState({ fishes });
  };

Before hooking it up, we can test it in the console. React dev tools, find App component and select it.

Then in console we can do $r.deleteFish(‘fish1’); and it will disappear from the menu and from the inventory.

We need to get deleteFish function down to the EditFishForm button component.

It is going to work exactly the same as the rest of them did. Add deleteFish as prop to Inventory in App. Then in inventory pass it down as a property for the EditFishForm. Within EditFishForm, on the button we will add an onClick. We can do it inline

<button onClick={() => this.props.deleteFish(this.props.index)}>
          Remove Fish
        </button>

22 - Animating React Components

Slack

In order, we imported TransitionGroup and CSSTransition from “react-transition-groups”. We replaced the ul element with but left the className and everything the same, that tells it what element to actually render out to the page

CSSTransition element needs property classNames, key and timeout

Stylst, like SASS but works with indentation

React is giving us these states as CSS classes and we can go ahead and use those CSS classes to add animation

If you need to reuse a transition group, you can put it in a variable.

If you want to put the transition options in a separate file because you are using the transition in many components, you can export it from that file and import it into this file and use it.

23 - Component Validation with PropTypes

With Proptypes we can validate the data that is being passed to ensure we are passing the right kind of data.

Example:

Header.propTypes = {
  tagline: PropTypes.string.isRequired
};

Typechecking With PropTypes – React

Header is a stateless functional component so we need to add PropTypes after, like so.

Fish is a regular React component so we can declare PropTypes as a variable. Since the proptypes are the same for all Fish components, we declare it as static so it lives on the momma component and we are not unnecessarily copying the proptypes to every single instance.

How to find props in the component? Search for this.props.

When you have a PropType that is an object, you could do PropType.object but then any object can work. Instead, if you know the properties of the object that you are expecting you can use

fish: PropTypes.shape({
      image: PropTypes.string,
      name: PropTypes.string,
      desc: PropTypes.string,
      status: PropTypes.string,
      price: PropTypes.number
    }),

24 - Authentication

In firebase, go to authentication and add Facebook authentication. Follow steps on Facebook apps to get app id, secret and past the auth url to the app config.

Stopped at 14:04 Import named and default export: import base, { firebaseApp } from "../base";

If we want to put the store into the variable and not the promise into the variable we put await in front of it.

storeId={this.props.match.params.storeId}

await base.post(${this.props.storeId}/owner, {

This will create a new field called owner if it does not already exist

Whenever anybody logs into a store, we are going to figure out who is the currently logged in user and who is the owner of the store? If they are the same people, we will let them manage or we will display the error message.

We set state on Inventory. Sometimes you don’t need state on any other component so what you do is create state that is local to that component.

If we refresh, everything is gone.

Lets look at how we can show the inventory rendering out and how to persist that so when you refresh the page it will automatically log the user in.

Go to the render method of Inventory.js, we want to perform a check instead of returning inventory all the time.

 //1. check if they are logged in
    if (!this.state.uid)

Checks if state contains a userid. If not, return Login button or otherwise render inventory.

Try to login, it sets state, and then inventory is rendered out.

We only want to show that just if the currently logged in user is also the owner of that store.

Check whether currently logged in user matches the owner of the store:

//2. check if they are not the owner of the store
    if (this.state.uid !== this.state.owner) {
      return (
        <div>
          <p>Sorry you are not the owner!</p>
        </div>
      );
    }

We want logout button in two places: 1) if they are not the owner and 2) if they are managing the inventory

We need to add a logout button and we need to check it on page load.

Since we need it in two places, we will put it in a variable so we can reuse it.

const logout = <button onClick={this.logout}>Log Out!</button>; Then use it like {logout} within render method.

Then add logout method.

To actually log them out, we make it an async method because we want to first wait for them to first logout of firebase, and clear state.

  logout = async () => {
    console.log(“Logging out!”);
    await firebase.auth().signOut();
    this.setState({ uid: null });
  };

Logout of firebase: await firebase.auth().signOut();

Update state to set uid to null.

When we refresh, we should recheck if we are logged in.

Listen for the componentDidMount() like so:

componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.authHandler({ user });
      }
    });
  }

But for a split second it does show the login screen. If you wanted to skip that, you could have a loading screen.

Locking Firebase Down With Some Rules

In firebase, go to Authentication tab. Go to our database tab, and go to rules, you will see

Firebase uses javascript to handle the rules. If you open securityRules.json.

// These are your firebase security rules - put them in the “Security & Rules” tab of your database
{
  “rules”: {
    // won’t let people delete an existing room
    “.write”: “!data.exists()”,
    “.read”: true,
    “$room”: {
      // only the store owner can edit the data
      “.write”:
        “auth != null && (!data.exists() || data.child(‘owner’).val() === auth.uid)”,
      “.read”: true
    }
  }
}

Explained: -for writing, we make sure that the data actually exists which won’t allow people to exist existing room. (They can write to it if the data does not exist). -there are nested rules -so the top level of the entire database is the write rules -someone can only write to a specific store if the data does not exist, if the store already exists they cannot create the store for a second time. -everybody can read that

-then we go one level deep into our actually stores. In this case he uses the variable called $room which is a wildcard which will match up against anything that is a second level deep. It can be named $store

“$room”: {
      // only the store owner can edit the data
      “.write”:
        “auth != null && (!data.exists() || data.child(‘owner’).val() === auth.uid)”,
      “.read”: true
    }

These rules above apply to second level deep.

Who can then write at a second level?

First we make sure that the authentication does not equal null (that auth variable comes from firebase since we are using their built in auth). Then we check if the data doesn’t exist AND that the owner is equal to the actual person that is logging in. Only the person who owns the store can write to it. Anybody can read that specific store.

Copy and paste security-rules.json and paste it in the rules .

Other

Rewatching #7 Passing Dynamic Data with Props

Header Component has prop tagline. Within Header, we access it using this.props.tagline. this means the component instance, so whatever gets passed when it is used.

For example within one component you may have many Headers like so:

class Header extends React.Comopnent{
render(){
return(
<header className="top">
<h1>
Catch of the day </h1>
<h3 className="tagline">
<span>{this.props.tagline}</span>
</h3>
</header>
);
}

function Header(props){
	return(
<header className="top">
<h1>
Catch of the day </h1>
<h3 className="tagline">
<span>{props.tagline}</span>
</h3>
</header>
);
}

const Header = (props)=>{
	return(
<header className="top">
<h1>
Catch of the day </h1>
<h3 className="tagline">
<span>{props.tagline}</span>
</h3>
</header>
);
}

const Header = props =>(
<header className="top">
<h1>
Catch of the day </h1>
<h3 className="tagline">
<span>{props.tagline}</span>
</h3>
</header>
);

const Header = ({tagline, age}) =>(
<header className="top">
<h1>
Catch of the day </h1>
<h3 className="tagline">
<span>{tagline}</span>
</h3>
</header>
);

handleClick(){
alert(“heyyy”);
}

goToStore(event){
console.log(this)
}

render(){
console.log(this);
return (
<p>dummy</p>
);
}

constructor(){
super()
this.goToStore = this.goToStore.bind(this);
console.log(this)
}

goToStore = event => {
console.log(this);
}

localStorage.setItem(this.props.match.params.storeId, JSON.stringify(this.state.order));

const localStorageRef = localStorage.getItem(params.storeId);
if(localStorageRef){
this.setState({order:JSON.parse(localStorage));

   "dev": "react-scripts start",
    "start": "serve --single ./build",

$ cd build
$ touch _redirects
$ code _redirects

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]