React One

Week Three Content

This week's content is going to be very difficult. Many consider this the most difficult week for them. Like mentioned in orientation, you should expect to:

Struggle

Feel Overwhelmed

Feel Behind

Don't get discouraged! 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. Some of its advantages are:

JSX

Virtual DOM

Component Based Architecture

Unidirectional Data Flow

Component Based Architecture

In React, code is split into chunks called components. This 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.

create-react-app

To get started with React, we will be installing 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.

npm install -g create-react-app

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:

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 code. There are two types of components: Class Components and Functional Components. Class Components are also called 'smart components', with functional components also being called 'dumb components'.

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 SmartComponent extends Component {
  // render method
  render() {
    return <h1>Hello, I'm a class component</h1>;
  }
}

export default SmartComponent;

Import React

Build class for component

Render Display

Export Component

Functional Components

Functional Components are built from JavaScript functions, and are commonly used to perform specific functionality or display:

import React from "react";

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

export default DumbComponent;

Import React

Build function

Display

Export Component

JSX

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

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

JSX

When working with JSX, you have access to all the same elements that you would with HTML, just bear in mind that events will be camelCase and the class attribute is now className, as class is a reserved keyword in JavaScript.

<div>
    <h1>This is JSX</h1>
    <p>It looks very similar to HTML.</p>
</div>

Working with State

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

import React, {Component} from 'react';

class MyComponent extends Component {
    constructor(){
        super();
        this.state = {
            name: 'Tayte'
        }
    }
    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 also be changed using the setState method, which is built into react.

this.setState({
  name: 'Matt'
})

Working with State

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

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

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

Unidirectional Data Flow

In React, data flows unidirectionally. This means the data will flow one way. In React, data flows from the top of the component tree down. The only way to change data from the bottom up is events.

Unidirectional Data Flow

When data is passed to another component, it is put on a 'props' object that the receiving component can access it from.

//passing props
<Component propName={propValue}/>

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

//functional component
props.propName

React One

By Matthew Bodily

Made with Slides.com

React One

  • 207

More from Matthew Bodily