Quick Start | React

This tutorial continues from the webpack tutorial. Here, we'll walk you through setting up React with the latest tools. We’ll use Vite, a modern toolchain, instead of the older Webpack and Babel setup to transpile React's JSX syntax. By the end, you'll have your first React.js project up and running quickly.

Key Takeaways

• Start a React project using Vite for faster setup and development speeds.
• Utilize modern ES6 syntax with React's latest APIs.
• Quickly render dynamic React components using updated React patterns.

Getting Started

To get started with React, you'll need to install vite, react, and react-dom. We recommend using Vite over Webpack due to its simplicity and rapid development speed. Go ahead and create a new Vite app with:

npm create vite@latest my-react-app -- --template react

This command will scaffold a new React project for you. Next, navigate into your project directory and install the dependencies:

cd my-react-app
npm install

Configure Vite

Vite handles much of the configuration automatically. Check your vite.config.js file to confirm it's set up for React, but you shouldn't have to change anything at this stage unless you have special customization needs.

Rendering HTML with React

With your environment configured, let's dive into React. Navigate to the src folder and open main.jsx or index.jsx (the main entry point for React apps managed by Vite). Replace the existing contents with the following:

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

const element = (
  <h1>Hello World!</h1>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Notice the use of ReactDOM.createRoot, a more modern API that replaces the deprecated ReactDOM.render function.

Set Up Your HTML

Open your index.html file inside the public directory (or equivalent, depending on the template structure), and ensure it includes a root div:

<div id="root"></div>

Now, you can start your development server to see the changes.

npm run dev

Wrapping Up

After executing the development command, open your browser and navigate to http://localhost:3000. You should see the header 'Hello World!' rendered on the page.

Conclusion

This example demonstrates the ease of starting a React project with Vite. Vite simplifies the setup and hot-reloading experience, allowing you to use modern JavaScript syntax and libraries like React smoothly. This setup not only enhances development speed but also leverages the latest improvements in React.

FAQ

Why use Vite over Webpack?

Vite offers faster builds and a more seamless development experience with hot module replacement, making it ideal for modern frontend development.

What's new with ReactDOM.createRoot?

The ReactDOM.createRoot method sets up concurrent rendering, offering better performance and flexibility compared to the old ReactDOM.render method.

Can I still use Babel with Vite?

Yes, but Vite handles most of the transpilation under the hood, typically removing the need for custom Babel configurations in simple setups.

How do I deploy a Vite project?

After you're done developing, run npm run build to create a production-ready bundle, which you can then deploy using your preferred hosting service.