Learning React Essentials 5

Conditional rendering

Depending on control logic, what is rendered would vary.

// greeting message for a signed up user 
function UserGreeting(props) { // the first letter of component name should be in captial
    const userName = props.username;
    return <h1>Welcome back, {userName}</h1>
} 

// greeting message for a new guest 
function GuestGreeting(props) {
    const guest = props.guest;
    return <h1>Welcome, {guest}</h1>
} 

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;

    if (props.isLoggedIn) {
        return <UserGreeting userName="jake"/>
    } else {
        return <GuestGreeting guest="guest" />
    }
}

ReactDOM.render(
    <Greeting  isLoggedIn={true} />, 
    document.getElementById('root')
);

Element variable

Assign element to a variable like below.

    const isComputerOff = this.state.isComputerOff;
    let action;
    
    if (!isComputerOff) {
        action = <TurnOff onclick={this.handlerTurnOff} />
    } else {
        action = <TurnOn onclick={this.handlerTurnOn} />
    }
    

Array and key

Array is a variable that contains a bunch of object in Javascript. Using array and provided array methods, reproducing a component can be easily done.

Indices in array can distinguish each item in the array but recommend to use an unique and not-easily-changable value as key. Be aware of assigning key value to array items to avoid errors like below

One more thing about the Key(tap to unfold)Key is not deliverable as props. Meaning, this.props.key does not exist and developer should manage this key property separately.

Composition

Composition means that a lot of components are gathered together to make a new component. Types of composition techinques is as follows :

• containment : children props used in a component when sub-components are not decided yet. Props in a top component are delivered to a bottom component and children props in the bottom component are delivered to the top component.

For example,

// Bottom component
function FancyBorder(props) {
    // props.children => MyBox component
    return (
        <div className="myFancyBorder">
            {props.children} 
        </div>
        );
}

// Top component
function MyBox() { 
    // JSX(h1, p) => FancyBorder component 
    return (
        <FancyBorder>
            <h1>Hello Box</h1> 
            <p>Do you want to open this box?</p>
        </FancyBorder>
    );
}

• Specialization : a common concept in object-oriented programming, implemented with inheritance. For example, in Python :

class Animal :
    def __init__(self, habitat) : 
        self.habitat = habitat
    def walk(self) : 
        return f"it is walking in {self.habitat}" 

class Dog(Animal) : 
    def __init__(self, habitat) : 
        self.habitat = habitat
    def bark(self) :
        return "bark bark"

myDog = Dog("London")
print(myDog.walk())
print(myDog.bark())

In React, specialization is implemented with composition. Facebook engineers recommend to not use inheritance in React but should be done in a composition manner.