lesson3.md

author	Jared Siirila
title	React Components

React Components

--

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Does that sound similar to any JavaScript concepts/tools you are familiar with already?

Sounds similar to

functions to me

Maybe

objects as well

--

All 3 of these are tools for abstraction.

The essence of abstractions is preserving information that is relevant in a given context, and forgetting information that is irrelevant in that context.

John V. Guttag

---

In my opinion, abstraction is the key to programming; and learning to think in abstractions is critical to effective programming

Abstraction from

• binary to machine code

• Machine code to higher level languages

• Series of statements to functions

• Related to function to objects

• Related objects to modules/packages

• Packages to applications

---

Function components

The simplest way to define a component is with a function component

A function component is just a function that returns a React element

--

function Welcome() {
    return (<h1>Greetings, my excellent friends!</h1>);
}

ReactDOM.render(
    <Welcome />,
    document.getElementById("root")
);

This component is invoked using the same JSX syntax we were using before to invoke HTML elements

Always start component names with a capital letter

--

Exercise

Convert the list of heroes to render using components List of Heroes

--

Any JSX attributes defined on an element get passed in to the component as a single props object

function Welcome(props) {
    return <h1>Welcome ${props.name}! I have been expecting you.</h1>;
}

ReactDOM.render(
    <Welcome name="Cisco" />,
    document.getElementById("root")
);

--

Walking through that example

1. We call ReactDOM.render() with the <Welcome name="Cisco" /> element
2. React calls the Welcome component function with {name: "Cisco"} as the props
3. The Welcome component returns a <h1>Welcome Cisco! I have been expecting you.</h1> element
4. React DOM updates the DOM to match the returned element

--

The JSX contained within a set of JSX tags is also passed to the component as part of the props object.

It is the children property of the props object.

function Welcome(props) {
    return <h1>Hello, {props.children}</h1>;
}

ReactDOM.render(
    <Welcome>Romina</Welcome>,
    document.getElementById("root")
);

---

Composing Components

Components can refer to other components

This allows for creating multiple levels of abstraction through composition of components

--

let Movie = (props) => (<li>{props.children}</li>);

function MovieList() {
    return (
        <ul>
            <Movie>Lord of the Rings</Movie>
            <Movie>Casablanca</Movie>
            <Movie>Bill and Ted's Excellent Adventure</Movie>
        </ul>
    );
}

ReactDOM.render(<MovieList />, document.getElementById("root"));

--

Exercise

Convert the list of heroes to use a single Hero component to create each hero and a HeroList component to render the whole list.

---

React's one rule

Props are Read-only

Never modify the value of the props passed in to a component

---

javascript classes

--

Classes are another way to create objects.

In many programming languages, classes are the only way to create objects.

Think of a class like a blueprint for creating objects of a specific type.

--

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

let rect = new Rectangle(3,4);
console.log(rect.getArea());        // 12

--

The constructor method gets called when creating an object using the new keyword.

Any arguments passed in to the object get passed to the constructor.

--

Objects can extend behavior from other objects. This is known as inheritance.

Object inheritance is a complex concept, so don't expect to fully understand it the first time you learn it.

--

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }
}

let sq = new Square(5);
console.log(sq.getArea());      // 25