React One

Introduction to React

React Content

React content is notoriously difficult.

Many consider this content the most difficult of the program.

You can expect to struggle

You can expect to feel overwhelmed

You can expect to feel behind

Keep hustling, stay positive, and don't give up!

Work hard and good results will follow.

What is React?

React is a JavaScript library that was created and is maintained by Facebook.

React is used to manage the DOM and create highly performant user interfaces.

Some websites that use React are:

Instagram

Netflix

Imgur

Venmo

Why Use React?

React's purpose is to make front-end JavaScript development easier.

To accomplish this, React offers:

JSX

Virtual DOM handling

Component Based Architecture

Unidirectional Data Flow

Component Based Architecture

In React, code is split into chunks called components.

Component-based architecture makes code highly reusable and easy to debug.

The Virtual DOM

The Virtual DOM is a light-weight copy of the DOM.

React uses the Virtual DOM to make changes to the user-interface more performant.

When a change is made to the virtual DOM, a process known as reconciliation happens between the virtual DOM and the actual DOM.

Only necessary changes to the UI are made to the actual DOM, which increases performance.

create-react-app

To get started with React, we will be running the create-react-app package from npm.

Create-react-app handles all of the boiler plate setup of React so that we can start building right away.

To create a new React project, navigate to where you would like that project to live in your file-tree, and then run the following command:

npx create-react-app name-of-app

Once the app has been created, navigate into it and run the following:

npm start

Components

In React, components are the building blocks of our apps.

There are two types of components:

Class Components
Functional Component

Class Components

Class components are built from JavaScript classes, and allow us to store data, called state, in our component.

The syntax for a class component is as follows:

import React, {Component} from "react";

class ClassComponent extends Component {
  // render method
  render() {
    return <h1>Hello, I'm a class component</h1>;
  }
}

export default ClassComponent;

Import React

Build class for component

Render Display

Export Component

Functional Components

Functional Components are built from JavaScript functions, and are commonly used to compartmentalize functionality.

Functional components are also often used for static display:

import React from "react";

const FuncComponent = () => {
    return(
      <h1>Hello, I'm a functional component</h1>;
    )
}

export default FuncComponent;

Import React

Build function

Display

Export Component

JSX

You may be looking at the display part of components and be thinking, "That's HTML!".

It's actually known as JSX, which is a syntax extension for JavaScript that is structured similarly to HTML.

JSX

When working with JSX, you have access to all the same elements that you would with HTML.

An important difference between HTML and JSX is that events in JSX will be camelCased and the class attribute is called className, due to class being a reserved keyword in JavaScript.

<div>
    <h1 className="heading">This is JSX</h1>
    <p onClick={this.handleClick}>It looks very similar to HTML.</p>
</div>

<div>
    <h1 class="heading">This is HTML</h1>
    <p onclick={this.handleClick}>It looks very similar to JSX.</p>
</div>

Regular HTML

JSX

Working with State

As mentioned earlier, Class Components are able to store state. State is a main object used to store data in a component.

import React, {Component} from 'react';

class MyComponent extends Component {
    constructor(){
        super();
        this.state = {
            name: 'Matias'
        }
    }
    render(){
        return (
            <h1>Class Component</h1>
        )
    }
};

export default MyComponent;

State is an object that contains our data

Working with State

State values can be accessed by accessing the state object:

this.state.name

State values can only be changed using the setState method, which is built into react.

this.setState({
  name: 'Great Scott'
})

import React, {Component} from 'react';

class MyComponent extends Component {
    constructor(){
        super();
        this.state = {
            name: 'George McFly'
        }
    }
    render(){
        return (
            <h1>Class Component</h1>
        )
    }
};

export default MyComponent;

this.state.name

'Great Scott'

Working with State

We can pair event handlers with a function that changes the state, like in the following example:

handleChange(e){
    this.setState({
        name: e.target.value
    })
}

<input type="text" onChange={(e) => this.handleChange(e)}/>

In the example above, typing into the input field would change the name property on a state object to have a value of whatever is typed into the input field.

Unidirectional Data Flow

React is designed for data to flow unidirectionally. This means the data is intended to flow in one direction. More specifically, data should flow from the top of the component tree downward. The only way you should change data from the bottom up is by passing down a function that originates from the top.

Unidirectional Data Flow & Props

React component have access to two main objects for handling data:

state
props

The props object is designed to hold data that is passed down from a parent component.

//passing props from parent component
<Component propName={propValue}/>

//accessing props on class component
this.props.propName

//accessing props on a functional component
props.propName