REACT

REACT

run the following cmd first before deploy to heroku

heroku create -b https://github.com/mars/create-react-app-buildpack.git

JSX

What is JSX

JSX is a syntax extension to JavaScript. It allows us to build UI elements right in the JavaScript code!

Expressions in JSX

We can use any JavaScript expression inside JSX using curly braces.

Attributes in JSX

React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX.

Virtual DOM

How does JSX work

When the JSX expressions are compiled, they are converted into JavaScript objects, representing React elements. React then uses these elements to build the corresponding HTML DOM and display it in the browser.

In practice, most React apps call ReactDOM.render() once.

About Virtual DOM

React uses a Virtual DOM, which is a lightweight representation of the DOM. When an element gets changed, it is first updated in the Virtual DOM. That process is fast, as the virtual DOM is represented by simple objects.

After that, React compares the Virtual DOM to its previous state and only applies the DOM updates necessary to bring the DOM to the desired state.

Components

Components let you split the page into independent and reusable parts.

In React, there are two types of components that you can use: Functional Components and Class Components.

Functional Components

A functional component is a simple JavaScript function:

function Hello() {
  return <h1>Hello world.</h1>;
}

The code above defined a functional component called Hello, that returns a simple React element.

Notice that the name of the functional component begins with a capital letter. This is absolutely critical. If we start the name of a component with a lowercase letter, the browser will treat our component like a regular HTML element instead of a Component.

In order to display the component, we need to create the corresponding JSX element.

we can use our user-defined element and render it on the page:

function Hello() {
  return <h1>Hello world.</h1>;
}

const el = <Hello />;
ReactDOM.render(
  el,
  document.getElementById('root')
);

Class Components

Class components are typically used when there are more advanced user interactions, like forms, and animations.

All class components need to extend the React.Component class.

We can rewrite our Hello functional component as a class component:

class Hello extends React.Component {
  render() {
    return <h1>Hello world.</h1>;
  }
}

Class components need to have a render method, which is in charge of telling what the page should show.

Props

Functional components can accept arguments, similar to JavaScript functions. These arguments are called props, and represent an object.

For example, we can use props in our Hello component:

function Hello(props) {
  return <p>Hello, {props.name}!</p>;
}

Now, we can add a name attribute to our element:

const el = <Hello name="David" />;

The attribute value will be passed to the component when rendered.

Components using Components

Components can use other components to generate an output.

For example:

function App() {
  return <div>
    <Hello name="David" />
    <Hello name="James" />
    <Hello name="Amy" />
  </div>;
}

Here, our App component uses the Hello component three times, each times with a new name attribute.

Props in Class Components

Props can be accessed in class components using this.props.

For example:

class Hello extends React.Component {
  render() {
    return <p>Hello, {this.props.name}!</p>;
  }
}

State

In order to allow components to manage and change their data, React provides a feature called state. State is an object that is added as a property in class components.

For example:

class Hello extends React.Component {
  state = {
    name: "James"
  }

  render() {
    return <h1>Hello {this.state.name}.</h1>;
  }
}

Changing State

State should not be modified directly. Instead, React provides a setState() method, that can be used to modify state.

For example:

this.setState({
  name: "James",
  age: 25
});

You need to pass an object with the new key:value pairs to the setState method.

Why should we use setState, instead of simply changing the values of the object properties directly? The answer uncovers one of the most useful features of React: when setState is called, React automatically re-renders the affected component with the new state!

Props vs State

As a recap, here is a summary of the main differences between props and state:

  • We use props to pass data to components.
  • Components use state to manage their data.
  • Props are read-only and cannot be modified.
  • State can be modified by its component using the setState() method.
  • The setState() method results in re-rendering the component affected. Components that have state are called stateful, while components that do not use state are called stateless.

Hooks

Earlier version of React allowed to use state only with class components. In recent iterations of React, a new feature called hooks was introduced, allowing to use state inside of functional components.

First, we need to import the useState hook:

import React, { useState } from 'react';

useState returns a pair, the current state value and a function, that lets you change the state. useState takes one argument, which is the initial value of the state.

Let’s look at an example:

function Hello() {
  const [name, setName] = useState("David");

  return <h1>Hello {name}.</h1>;
}

In the example above, we create a name state variable and a setName function. The square brackets syntax is called array destructuring. It assigns the name variable to the current state value, and setName to the function that allows to change the state. You can name these variables anything you like. Then, we pass “David” as the initial value for our name variable to useState().

Counter App using Hooks

Now we can rewrite our Counter app from the previous lesson using a functional component and hooks!

Here is the code:

function Counter() {
  const [counter, setCounter] = useState(0);

  function increment() {
    setCounter(counter+1);
  }

  return <div>
  <p>{counter}</p>
  <button onClick={increment}>
    Increment
  </button>
  </div>;
}