React

Table of contents

• Inline html is JSX. Root component

ReactDOM.render(<App />, document.getElementById('root'));

Functional vs Class-Components

• Functions do not have state, classes do.

Create element

Iteration 1:

return (
<div className="App">
    <h1>React Application</h1>
</div>
);

Iteration 2:

Input:

return React.createElement('div', null, 'h1', 'React Application'); 

Output: h1 and React Application are interpreted as text.

<div>
h1React Application
</div>

Iteration 3:

Input:

return React.createElement('div', null, React.createElement('h1', null,  'React Application'));

Output: The css is not considered.

<div>
    <h1>React Application</h1>
</div>

Iteration 4 This code is the exact same code as iteration 1.

return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'React Application'));

Children

Refers to any element between the opening and closing tags of a component.

<div>
    <Application>These are the children.</Application>
</div>

State

Class

• setState merges the changes being made with the existing state. For instance:

state = {
    object1 = {name = "object1"},
    object2 = {name= "object2"}
}

If setState is called with:

state = {
    object2 = {name= "object3"}
}

The output will be:

state = {
    object1 = {name = "object1"},
    object2 = {name= "object3"}
}

Hook - useState

• The "setState" callback will not merge the new state with the old one, so to update part of the state, the whole object needs to be updated.

state = {
    object1 = {name = "object1"},
    object2 = {name= "object2"}
}

If setState is called with:

state = {
    object2 = {name= "object3"}
}

The output will be:

state = {
    object2 = {name= "object3"}
}

To update the state correctly the following has to be done:

 setState({
    object1 = {name = "object1"},
    object2 = {name= "object3"}
});

• To avoid passing the full information every time it is possible to have multiple useState calls:

const [state1, setState1] = useState({
    "state1"
});

const [state2, setState2] = useState({
    "state2"
});