[React] Creating a Component using JSX & ReactDOM
Published: 2023-06-26 07:54:10

## JSX
[React Offical Document](https://react.dev/learn/writing-markup-with-jsx)
> JavaScript XML

- Syntax used when configuring UI in react
- Syntax that extends JS, but it's not a JS code that can be executed directly by the browser
- Using Babel to convert to browser understandable JS code
( Babel:  JS compiler )
- After compiling, the JS is read by the browser and rendered on the screen

<br/>

### Why we should use JSX?
- We can write code more explicitly than when using DOM code
- Using JS + HTML grammar at the same time, 
you can check the function and structure of the component at a glance
- We can use react without JSX, 
but complexity increases, readability decreases
<br/>

### Rules of JSX
#### 1) can't render two adjacent JSX elements
-  They have to be wrapped in something so that it counts as just one element with two elements inside
- When using multiple elements in JSX, 
all elements must be wrapped with opening and closing tags.
- can be wrapped in an empty tag <>, </>
```jsx
<div>
	<div>
		<h1>Hello</h1>
	</div>
	<div>
		<h2>World</h2>
	</div>
</div>
```

#### 2) When using an element class, mark it as className
- If you write it as a class, React accepts it as a JavaScript class instead of the html class attribute.
```jsx
<div className="greeting"> Hello! </div>
```

#### 3) When using JS expressions, use curlybraces { }
- If you want to write JavaScript in JSX, be sure to use { }
- If you don't use curly braces, it is recognized as plain text

#### 4) Custom components, start with an uppercase letter (PascalCase)
- When React elements are written in JSX, they start with "uppercase".
- If it starts with a lowercase letter, it is recognized as a normal HTML element.
- JSX components written in uppercase: custom components
```jsx
function Hello( ) {
	return <div>Hello!</div>
}

function HelloWorld( ){
	return <Hello/>;
}
```

#### 5) Use ternary operator for conditional rendering
- Conditional rendering uses a ternary operator rather than an if statement
```jsx
<div>
{(1+1 === 2) ? (<p>Correct</p>) : (<p>Failed</p>)
}
</div>
```
#### 6) When using the map function, there must be a "key" JSX attribute
- We should use the "map()" function to display multiple HTML elements in React
- When using the map function, be sure to include the "key" JSX attribute
- If you don't put the "key" JSX attribute, you'll get a warning that you must put a key in each item in the list.
' Warning: Each child in a list should have a unique "key" prop.'

- The position of the key attribute must be put in the first element inside the map method.
- If possible, the key attribute value should be assigned an id provided by the data.
This is because the value of the key attribute, like id, must be immutable, predictable, and unique.
- if there is no unique id, use array index (only as a last resort)
```jsx
const posts=[
    {id:1, title:'Hello World',content:'Welcome to learning React!'}
    {id:2, title:'Installation', cintent:'You can install React from npm.'}
];

function Blog(){
    const content=posts.map((post)=>
    <div key={post.id}>
        <h3>{post.title></h3>
        <p>{post.content}</p>
    </div>
    );

    return (
        <div>
            {content}
        </div>
    );
}
```
## ReactDOM
**DOM : HTML + CSS + JS
React DOM: CSS + JSX**
### What is ReactDOM?
- ReactDOM is a specific package that serves as the bridge between React and the actual browser DOM (Document Object Model). 
- While React is responsible for creating and managing the virtual representation of the UI,
**ReactDOM is responsible for rendering that virtual DOM into the browser DOM.**
- ReactDOM provides methods for manipulating the browser DOM, such as rendering React components, updating them when the state or props change, and handling events. 
- It ensures that the changes made to the virtual DOM are efficiently reflected in the actual browser DOM.




## [Code] Import React & ReactDOM
```jsx
[1]
import React from 'react';
import ReactDOM from 'react-dom';
...
ReactDOM.render(<Component/>, document.getElementById('root'));

[2]
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);
```

### import / export

```import A from B``` 
: Import the exported module
- A: variable, class, function to use
- B: path of module to load

```export A```
: Add the export keyword in front of variables, classes, and functions to make the module's functions available externally.
```export A as C```
: Using the as keyword: export with an alias

### Digging into the Code
```jsx
import React from "react"
import ReactDOM from "react-dom"
```
:  we should import React / ReactDOM first to use them

```jsx
ReactDOM.render(<Component/>, document.getElementById('root'));
```
- `ReactDOM.render()` is used to render  a React component or element into a specified container within the HTML document
-  It takes two arguments:
(component / element to render, target container element in HTML)

<br/>

## Component
### 1. Class Components
[React Class Components](https://www.w3schools.com/react/react_class.asp)

### 2. Functional Components
- **receive props as parameters **
and **return the JSX structure of the component**
- use the constructor convention of having capital CamelCase for the component name
Start your first letter as a capital letter
- < component />
[e.g.]
```jsx
import React from "react";
import ReactDOM from "react-dom";

function MyInfo() {
  return (
    <>
      <h1> Dohee</h1>
      <p> These are the places that I'd like to visit for my vacation</p>
      <ul>
        <li> London </li>
        <li> Dublin </li>
        <li> Rome </li>
      </ul>
    </>
  );
}

ReactDOM.render(<MyInfo />, document.getElementById("root"));
```