React

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

Understand the roles of model, view, and controller.
Build a React component function.
Create a React component class.
Implement composition & reuse in a React app.
Install & use common React developer tools.

Agenda

Model View Controller (MVC).
React overview.
Creating React components.
Create React App.

Classroom Resources

Pull changes from the wilson-espina/jsd-9-resources repo to your computer
In your editor, open the following folder: Documents/JSD/jsd-9-resources/18-react
Lesson Handout: https://pages.git.generalassemb.ly/wilson-espina/jsd-portal/resources/JSD-18-react-handout.pdf

Introduction to React

What is React?

React is JavaScript library from Facebook, that is designed to create interactive UIs.

Declarative: We describe the program/UI and React implements it (like ordering a pizza rather than making one).
Component-based: Build components, that manage their own state and structure them together into more complex UIs.
Virtual DOM: Maintains a representation of the rendered UI, that renders only the changed elements.

Virtual DOM

The Virtual DOM is a "virtual" representation of a UI in memory.
Any changes in state are detected in the Virtual DOM and a diffing algorithm finds the minimum number of operations required to update the real DOM.

https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/

Model-View-Controller (MVC)

Model: data
View: user interface
Controller: coordinate between model and view

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Components

Components

React Developer Tools

Creating React Components

Functional Components


function Welcome(props) {
  return Hello, {props.name};
}

Functional Components

Functional Components

Functional Components

Functional Components

Functional Components

Open up: 00-functional-component-codealong

JSX

Looping in React Components


const listItems = numbers.map((number) => {
  return {number}
});

// return statement in component
return (
  {listItems}
);

Looping in React Components


[
  'cheese',
  'lettuce',
  'cucumber'
]

maps to


[
  '<li>cheese</li>',
  '<li>lettuce</li>',
  '<li>cucumber</li>',
]

Looping in React Components


[
  '<li>cheese</li>',
  '<li>lettuce</li>',
  '<li>cucumber</li>',
]

rendered as


<li>cheese</li>
<li>lettuce</li>
<li>cucumber</li>

Spread Operator


props = {
  firstName: 'Mary',
  lastName: 'Richardson'
}

return <Greeting {...props} />;

is parsed as


return <Greeting firstName="Mary" lastName="Richardson" />;

Open up: 00-functional-component-codealong (PART 2)

Build a React functional component

starter-code > 01-functional-component-exercise

Create variables storing references to the two new elements in the DOM.
Create components to render the contents of the new state properties.
Call the render method for each of your two new components.
BONUS: Create and call a component function to render an image.

Class Components


class Welcome extends React.Component {
  render() {
    return (
      Hello, {this.props.name}
    );
  }
}

Class Components

Class Components

Class Components

Class Components

Class Components

Class Components

Open up: 02-class-component-codealong

Build a React class component

starter-code > 03-class-component-exercise

The start file contains the components we’ve already been working with, along with additional data in the state variable.
Create variables storing references to the two new elements in the DOM.
Create components to render the contents of the new data properties.
Call the render method for each of your two new components.

Composition

In programming, composition allows you to build more complex functionality by combining small and focused functions.

In the parent class, call each child with JSX using element syntax.
Pass necessary props as attributes, referencing this.props.
For child classes, move data manipulation outside of render() method, and reference the result instead.
Call ReactDOM.render() only on parent class.

Composition


class Menu extends React.Component {
  render() {
    return (
      
        
          {this.props.menu.map(function(item, index) {
            return <li key={index}>{item}</li>
          })}
        
      
    );
  }
}

Composition


class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.items = this.props.menu.map(function(item, index) {
      return <li key={index}>{item}</li>
    });
  }
  render() {
    return (
      
        
          {this.items}
        
      
    );
  }
}

OLD SYNTAX

Composition


class Menu extends React.Component {
  items = this.props.menu.map(function(item, index) {
    return <li key={index}>{item}</li>
  });
  render() {
    return (
      
        
          {this.items}
        
      
    );
  }
}

UPDATED SYNTAX

Composition


class App extends React.Component {
  render() {
    return (

      <div className="container">
        <Menu menu={this.props.menu} />
        <Heading title={this.props.title} />
        <Articles articles={this.props.articles} />
        <Footer footer={this.props.footer} />
      </div>


    );
  }
}

Open up: 04-composition-codealong

Implement composition in a React app

starter-code > 05-composition-exercise

Open CawCaw comp.png and examine the view you’ll be creating.
Follow the instructions in script.js to build the User, Content, Date, and App components.

Create React App

npm package
generates files & folder structure.


npx create-react-app my-app-name

https://create-react-app.dev/docs/getting-started/

Learning Objectives

Understand the roles of model, view, and controller.
Recognise the primary uses of React.
Build a React component function.
Create a React component class.
Implement composition & reuse in a React app.
Install & use common React developer tools.

React

Wilson Espina

What did we do last lesson?

Learning Objectives

Agenda

Classroom Resources

Introduction to React

What is React?

Virtual DOM

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Model-View-Controller (MVC)

Components

Components

React Developer Tools

Creating React Components

Functional Components

Functional Components

Hello, {props.name}

Functional Components

Functional Components

Functional Components

Functional Components

Functional Components

JSX

Looping in React Components

Looping in React Components

Looping in React Components

Spread Operator

Spread Operator

10 mins

Class Components

Class Components

Class Components

Class Components

Class Components

Class Components

Class Components

Class Components

10 mins

Composition

Composition

Composition

Composition

Composition

Composition

Composition

20 mins

Create React App

Create React App

Learning Objectives

Look Ahead to Next Lesson

Q&A

Exit Ticket