Create React App

To create a React app, we will use Vite.

yarn create vite my-app-name --template react

To run the created app:

cd my-app-name
yarn install
yarn dev

Once the app is running, open your browser and visit http://localhost:5173.

When I want to create a simple React app, I like to strip down the boilerplate code generated by Vite to the bare minimum! Therefore, I delete everything inside the src folder except for App.jsx and main.jsx. Moreover, I update the content of these files as follows.

function App() {
  return <div>Hello, React!</div>;
}

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Generally speaking, you build your application in the App.jsx. The main.jsx contains the instruction to render the application. The app will be rendered (mounted to) the 'root' div element inside the index.html.

The render method can mount any React component to any DOM element.

ReactDOM.createRoot(/* DOM element */).render(/* React Component */);

The separation between the App.jsx and index.jsx is symbolic! The philosophy of React is to decouple the process of creating an app and rendering it.