216. Introduction To React.js

React

• React was created at Facebook.
• React can be used with mobile devices to build native apps.
• You can build desktop apps with react.
• Anywhere that has a view react can use it.

prior knowledge to understand react

1. idea of thinking and components.

source: Roberto Moreno Celta

• Atom: small indivisible elements(icons, images ect.)
• Molecules: this combines atoms that have similar functuality(navigation bar ect.)
• Organism: this combines to a bigger scale functuality
• Templates: this combines organisms to give you an idea of how your app or website should look.
• Pages: (webpages)

Using atoms things, I don't need to rewrite the code I write at once and I can reuse it. I even share it with the world like the below website.
https://mdbootstrap.com/docs/react/
I can download the react component at the website and attach it to my Website.

2. Data flow

You can see that parent, children, grand children

Data flows top to bottom and never the other way around.

Look at the red component. When the component change, only their children know about the change. The direction of the data flow is just always downstream.

Red component changes and then only the ones below it know the changes.

3. Virtual DOM

• react bot: creates the virtual DOM(JS object)
• JS object: describes the current state of our website
  We give JS object to react, bot will automatically make changes to the DOM and paint the picture in the most optimum way possible.

react takes care of DOM manipulation for you.

The virtual DOM is just a copy of the DOM that is in a javascript object.
React underneath the hood just changes the view

4. Eco-system

It is probably one of the biggest ecosystems in JavaScript right now, and there's so many tools that work with react.

NPM, Babel, npm, webpack, react/router...

It's just a really good eco system that uses the latest JavaScript technology to build Web sites in a really nice, elegant way.

5. the code like this

It's like the same way when you looked at JavaScript, the first time.
You have classes that extends the react component.
We have constructor again that we've seen an advanced object.

And then each class has a mandatory render function that you just tell it what this clock should render.

And as you can see, it looks like a HTML, isn't it?
It's not exactly HTML, but the syntax is very similar.

So even by looking at this, you see that this clock component. Again, this Logo block just returns a hello world.