Nearby lessons
3 of 44⚛️ ReactJS – Hello World
📌 What is React Hello World?
Writing Your First React Program
Let's start with a simple Hello World example in React. This will help you understand the basic structure of a React application.
📌 Hello World Example
Here's a complete React project structure showing how all files work together. Each file has a specific role in the React application.
React Playground
export default function App() { return ( <div className="app-container"> <h1>Hello World from React!</h1> </div> ); }
🗂️ File Structure Explanation
Each file in a React project has a specific purpose:
- index.html: The main HTML file that contains the root div where React will render your app.
- src/main.jsx: The entry point that imports React, ReactDOM, and your App component, then renders it to the DOM.
- src/App.jsx: Your main React component that contains the UI logic and JSX.
- src/index.css: Global styles that apply to your entire React application.
🔄 How These Files Work Together
- 1. Browser loads:
index.htmlwhich contains a<div id="root"> - 2. Script runs:
main.jsxis loaded and executed - 3. React renders:
App.jsxcomponent is rendered into the root div - 4. Styles applied:
index.cssprovides the visual styling - 5. User sees: The complete React application in the browser
🧠 Test Your Knowledge
2 QuestionsProgress: 0 / 2
Keep Going!React - Components