Installation and Setup

React 19 is the latest version of the popular JavaScript library for building user interfaces. To get started with React, you need to set up a new project and install the required dependencies. In this section, we will guide you through the process of installing and setting up React 19.

Basic Example

To create a new React project, you can use a tool like Create React App. Here’s a simple example of how to get started:

// Import React and ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';
 
// Define a simple component
function Hello() {
  return <h1>Hello, World!</h1>;
}
 
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Hello />
  </React.StrictMode>
);

This code creates a simple “Hello, World!” component and renders it to the DOM using ReactDOM.createRoot. Make sure to replace 'root' with the actual ID of the element where you want to render your component.

Advanced Usage

For more complex projects, you may want to use a custom setup with Webpack and Babel. Here’s an example of how to set up a React 19 project from scratch:

// Import React and use the useState hook
import React, { useState } from 'react';
 
// Define a counter component
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>
);

This code sets up a simple counter component using the useState hook. The useState hook is a modern React feature that allows you to add state to functional components.

Best Practices

Here are some key best practices to keep in mind when setting up a new React project:

• Use a consistent naming convention for your components and variables.
• Keep your components small and focused on a single task.
• Use the React.StrictMode wrapper to enable strict mode and catch common errors.
• Use a linter like ESLint to enforce coding standards and catch errors.

Key Takeaways

Here are the key takeaways from this section:

• Use Create React App to create a new React project with a single command.
• Use the ReactDOM.createRoot method to render your component to the DOM.
• Use modern React features like the useState hook to add state to your components.
• Follow best practices like keeping your components small and using a consistent naming convention to keep your code maintainable and efficient.