[React] Creating a Component using JSX & ReactDOM

JSX

React Offical Document

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

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

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 <>, </>

<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.

<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

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

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

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

[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

import React from "react"
import ReactDOM from "react-dom"

: we should import React / ReactDOM first to use them

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)

Component

1. Class Components

React Class Components

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.]

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