[React] Why we should use React (with code)

Code using only DOM

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

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);

Code using React

React without jsx

[before...]

• Creating an element and rendering it to the DOM

 React.createElement(type,{props},children); 

• type: type of HTML element ( h1, p, button)
• Object properties, event handlers...
• will be displayed on the screen

ReactDOM.render(element,containerElement);

• element: the element to be rendered to the DOM
• containerElement: where in the DOM it will be rendered

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;

React using JSX

• Tags can be written directly, when using JS, write

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;

Practice

1) If there are two data

• hard coding

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

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]

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.