My go to tool for scaffolding a React app is Vite. To create a React app, you can use the following command.
npm create vite@latest my-app-name --template reactTo run the created app:
cd my-app-name
npm install
npm run devOnce 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.
// App.jsx
function App() {
return <div>Hello, React!</div>;
}
export default App;// main.jsx
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.
React is a library for building user interfaces. It is not a framework. There are frameworks built on top of React, such as Next.js, Gatsby, and RedwoodJS. These frameworks provide additional features and tools to build full-stack applications. Feel free to explore them!