React JS Tutorial— "Hello World" in React App

Write First Code in React App


📄 First File That Executes: index.html

Inside index.html, you have:

html
CopyEdit
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
  1. The <script> tag loads main.jsx.
  2. The root element is the starting point of the React app.


📄 In main.jsx File

jsx
CopyEdit
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
  1. createRoot() finds the element with id root in index.html.
  2. It renders the <App /> component inside that root.
  3. This is the main job of the main.jsx file.


📄 Replace All Code in App.jsx With:

jsx
CopyEdit
function App() {
return (
<>
<h1>Hello World</h1>
</>
);
}

export default App;


How React Works:

  1. You can write HTML code inside JavaScript using JSX.
  2. React renders everything properly in the browser.


Why Should Component Names Start With a Capital Letter?

Because React treats lowercase tags like HTML elements (e.g., <div>, <h1>), and uppercase tags as custom React components.


Return Must Have a Single Parent Tag

All JSX returned by a component must be wrapped inside a single parent element like a <div> or a fragment <> </>.


📄 Create a New File in src: Header.jsx

jsx
CopyEdit
function Header() {
return (
<div>
<h4>Header file</h4>
</div>
);
}

export default Header;


📄 Import and Use Header in App.jsx

jsx
CopyEdit
import { useState } from 'react';
import Header from './Header';

function App() {

return (
<div>
<Header />
<h1>Hello World</h1>
</div>
);
}

export default App;


Library vs Framework

  1. Library: You control the flow (e.g., React).
  2. Framework: The framework controls the flow; you just follow its structure (e.g., Angular).