React Basics - Essential Things to Know

Concept Highlights:

1. ReactDOM.render()
2. React.createElement()
3. Props in React
4. Accessing Lists in React
5. <React.StrictMode>
6. Destructuring in React

1. ReactDOM.render()

In React, the ReactDOM.render() function is used to render a React element (or a component) into the DOM. This function takes two arguments: the React element to render and the DOM element where you want to render it.

e.g.) In this example, ReactDOM.render() renders a simple "Hello, React!" message into a DOM element with the ID root. This is the basic structure you'll see in most React applications for mounting the app to the DOM.

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React!</h1>;

ReactDOM.render(element, document.getElementById('root'));

2. React.createElement()

The React.createElement() function is another way to create React elements. While JSX (like in the example above) is the most common way to create elements, understanding React.createElement() is important as it's the underlying mechanism behind JSX.

e.g.) In this example, React.createElement() creates an h1 element with the content "Hello, React!". The first argument is the type of element (in this case, h1), the second argument is the props (here, null because we have no props), and the third argument is the children, which is the content of the element.

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

3. Props in React

Props (short for "properties") are how data is passed from one component to another in React. They are read-only and help you customize your components by passing different values.

e.g.) In this example, the Greeting component receives a name prop and uses it to display a personalized message. Props are a key concept in React, allowing components to be dynamic and reusable.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. Accessing Lists in React

When rendering lists in React, you typically map over an array and return an element for each item in the list. It's important to include a key prop to help React efficiently update and manage the list.

e.g.) In this example, ItemList takes an array of items as a prop, and for each item in the array, it creates a li element with a unique key.

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5. <React.StrictMode>

<React.StrictMode> is a wrapper component that you can use in development mode to help identify potential problems in your React application. It doesn’t render any visible UI, but it activates additional checks and warnings.

e.g.) When you wrap your application (or part of it) in <React.StrictMode>, React will run some checks to ensure that your code follows best practices, helping you catch issues early in the development process.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

6. Destructuring in React

Destructuring is a JavaScript feature that allows you to unpack values from arrays or properties from objects into distinct variables. In React, it’s commonly used in functional components to extract props more cleanly.

e.g.) In this example, instead of accessing props.name, we use destructuring to extract the name directly from the props object, making the code cleaner and easier to read.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));