Chapter 02: Check Detail with Official Document - JSX, Props, State, Life Cycle, Event, Rendering, List and Form

 

Why Do We Need To Read Official Document?

React is Library.

And we can understand deeply when we read the inventor's intention when we read official document.

 

 

Create React App

First of all, we need Node to use 'React Create App'

So check whethere we have Node on our computer or not. 

Node provides the environment for React app to work in local environment.

Node installed -> npm(node package manager) installed -> npx(node package runner) installed

 

 

JSX

React Shortcut

cf. React Class Component (RCC)

 

Props

 

Functional Component vs Class Component

Before Hook,

To manage state, we used class component.

 

 

Conditional Rendering

It was like this.

But there can be the situation that we don't put the name in the component, then how should we render this component?

In that case we can use 'conditional rendering'!

So if the props.name exists then it will show props.name + ','

But if there's nothing then it will not return anything!

Now we will do the same job for '~times' line!

We can do also here like this with using conditional rendering but it's a bit weird.

If it's just number then it works normally but if we have '0' then it seems a bit weird!

 

In this case we can fix it like this!

 

 

 

 

 

 

Sources

https://reactjs.org/docs/introducing-jsx.html

Introducing JSX – React

https://reactjs.org/docs/components-and-props.html

Components and Props – React

https://reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

https://reactjs.org/docs/conditional-rendering.html

Conditional Rendering – React

https://reactjs.org/docs/lists-and-keys.html

Lists and Keys – React