# How I learnt to think in React!
# Concepts you should understand before you start React components.
## 01- Building a static web page using CDNs development files and Babel at index.html
👉 [react-dom](https://reactjs.org/docs/react-dom.html) library gives us access to the global variable ReactDOM.
👉 [Babel](https://babeljs.io/docs/en/babel-standalone) enables us to write JSX directly in our index.js file.
> Don't forget to add type="text/babel" to your script to enable Babel.
***index.js file***
```
ReactDOM.render(My 1st React Code!
, document.getElementById('root'));
// ReactDOM.render(what, where) used to render something to the screen.
```
> What React element to be rendered on the screen.
> Where: index.html inside a real DOM element
```
// Acts as a container for the entire React app/website.
```
***index.html file:***
```
Document
```
## 02-Why React
### React is Composable
👉 React allows us to write composable code through custom components that hold a piece of our UI allowing us to write a code that is easy to maintain.
### React is Declarative
👉 Declarative means I can tell the computer WHAT to do and expect it to handle the details.
> Ex: writing JSX code instead of plain JavaScript.
👉 Imperative means I need to tell it HOW to do each step.
## 03-JSX: "JavaScript XML"
> The object-nature of React elements
👌 JSX provides a declarative approach over the regular vanilla JavaScript code.
## 04- 🔥Bonus🔥 The difference between JSX and regular DOM
```
// Vanilla JavaScript code:
const h1 = document.createElement('h1');
h1.textContent = 'My 1st React Code!';
h1.className = 'main-header';
console.log(h1); // Real DOM element:
// Declarative JSX code:
const h1 = My 1st React Code!
console.log(h1); // Plain JS object
{
type: 'h1',
key: null,
ref: null,
props: {
className: 'main-header',
children: 'My 1st React Code!',
},
_owner: null,
_store: {},
}
```
👌 JSX returns a plain old JS object.
> A string representation of the regular JS object returned by JSX.
👌 Only React takes these kind of objects and turns them into real DOM element that the browser can interpret.
```
// The plain JS object returned by JSX isn't recognized by the browser!
// html.append(element); //// [object Object]
// html.append(JSON.stringify(element)); //// Show it in details
ReactDOM.render(element, document.getElementById('root'));
```