[React] Why we should use React (with code)
Published: 2023-06-26 08:28:03

## Code using only DOM

- Need to connect JS and HTML to use JS
1) inline
2) Connect with `<script>`

```javascript
const user = {
  firstName: "Hee",
  lastName: "Kim"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);
```
<br/>

## Code using React

### React without jsx

#### [before...]

- Creating an element and rendering it to the DOM
 ```javascript
 React.createElement(type,{props},children); 
 ```
- type: type of HTML element ( h1, p, button)
- Object properties, event handlers...
- will be displayed on the screen
 ```javascript
ReactDOM.render(element,containerElement);
 ```
- element: the element to be rendered to the DOM
- containerElement: where in the DOM it will be rendered

```javascript
import React from "react";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

  
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

export default App;
```
<br/>

### React using JSX
- Tags can be written directly, when using JS, write 
```jsx
import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;
```

<br/>

### Practice

#### 1) If there are two data
- hard coding
```jsx
const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}
```

#### 2) If there is 100 data
```jsx
const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}
```

- Use the array map method to make the part that needs to be written repeatedly into a function.

#### 3) Using the array method [map]
```jsx
function Blog() {
  const postToElement = (post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

//Pass each post to a function
  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}
```
- You can use JSX to process the result of the map method inside the return statement by using any expression inside curly braces.(inline)
- It is up to the developer to decide whether to extract it as a variable or put it inline for code readability.