src\/pages<\/strong><\/td>Stores the page components you’ll create for React Router<\/td><\/tr><\/tbody><\/table><\/figure>Match filename capitalization exactly, such as App.jsx<\/strong> and TaskItem.jsx<\/strong>, because some operating systems treat uppercase and lowercase filenames differently.<\/p>How does React render a user interface?<\/h2> React renders a user interface by running your components, using the JSX they return to determine what should appear, and updating the page in your browser with the result.<\/p>
This process has three main steps:<\/p>
\nTrigger<\/strong>. The initial render starts when React runs createRoot(…).render()<\/strong> in src\/main.jsx<\/strong>. Later, changes to state can trigger another render.<\/li>\n\n\n\nRender<\/strong>. React runs your components and reads their JSX to determine what the interface should look like.<\/li>\n\n\n\nCommit<\/strong>. React applies the necessary changes to the page so you see the latest interface.<\/li>\n<\/ol>For example, changing a task’s status triggers another render. React calculates the latest interface, then commits the necessary changes to the page.<\/p>
What is JSX in React?<\/h3> JSX is a JavaScript syntax extension that lets you write HTML-like markup inside React components. You use it to describe what should appear on the page while keeping that markup close to the JavaScript that controls it.<\/p>
JSX looks similar to HTML, but it follows a few different rules:<\/p>
\nWrap multiple elements in one parent element or a fragment such as <>…<\/><\/strong>.<\/li>\n\n\n\nClose every tag, including self-closing tags such as <img \/><\/strong>.<\/li>\n\n\n\nUse className<\/strong> instead of the HTML class<\/strong> attribute.<\/li>\n\n\n\nWrite most attributes in camelCase, such as onClick<\/strong>.<\/li>\n\n\n\nPut JavaScript values or expressions inside curly braces, such as {taskName}<\/strong>.<\/li>\n<\/ul>For example, replace the contents of src\/App.jsx<\/strong> with:<\/p>const taskName = 'Learn JSX';\n\nfunction App() {\n return (\n <main className=\"task-list\">\n <h1>Task tracker<\/h1>\n <p>{taskName}<\/p>\n <\/main>\n );\n}\n\nexport default App;<\/pre>Here, the JSX defines the heading and paragraph that appear in your browser. The {taskName}<\/strong> expression inserts the value assigned to the taskName<\/strong> variable into the paragraph.<\/p>For a quick exercise, change ‘Learn JSX’<\/strong> to another task. Then, inside the <main><\/strong> element, add another paragraph below <p>{taskName}<\/p><\/strong>, such as <p>Not started<\/p><\/strong>.<\/p>Save App.jsx<\/strong>, then check that the updated task and the new status appear in your browser.<\/p>\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>How do you render your first React component?<\/h3> You render your first React component by importing App.jsx<\/strong> into src\/main.jsx<\/strong> and passing <App \/><\/strong> to render()<\/strong>. The Vite project you created earlier already includes this setup.<\/p>Open src\/main.jsx<\/strong> to see how it works:<\/p>import { StrictMode } from 'react';\nimport { createRoot } from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App.jsx';\n\ncreateRoot(document.getElementById('root')).render(\n <StrictMode>\n <App \/>\n <\/StrictMode>,\n);<\/pre>The document.getElementById(‘root’)<\/strong> part finds the element with the root<\/strong> ID in index.html<\/strong>. React then displays the app inside that element, which is why the JSX you added to App.jsx<\/strong> appears in your browser.<\/p>You’ll add more components inside App<\/strong> as you build the task tracker. StrictMode<\/strong> also helps you catch common problems while developing, and its extra checks don’t run in production.<\/p>How does React update the DOM?<\/h3> React updates the Document Object Model (DOM) during the commit step by applying the changes needed to make the page match the latest render.<\/p>
The DOM represents the elements currently displayed in your browser. React can update a changed element without recreating unrelated parts of the page.<\/p>
For example, when a task changes from Open<\/strong> to Done<\/strong>, React can update the task’s displayed status while leaving unchanged elements, such as the page heading, alone.<\/p>How do React components work?<\/h2> React components work as reusable JavaScript functions that return JSX for part of the interface. Each one handles one part, such as a header, task list, or individual task, then combines with other components to build the full page.<\/p>
Keeping these parts separate makes your React project easier to update.<\/p>
Create your first React component<\/h3> Create your first React component by defining a JavaScript function with a capitalized name and returning JSX from it. You’ll start with the task tracker header.<\/p>
First, create the src\/components<\/strong> folder. Inside it, create Header.jsx<\/strong>:<\/p>function Header() {\n return (\n <header className=\"header\">\n <h1>Task tracker<\/h1>\n <\/header>\n );\n}\n\nexport default Header;<\/pre>The export default Header<\/strong> line lets you import the component into another file.<\/p>Next, replace the contents of src\/App.jsx<\/strong> with:<\/p>import Header from '.\/components\/Header.jsx';\n\nfunction App() {\n return (\n <main className=\"app\">\n <Header \/>\n <\/main>\n );\n}\n\nexport default App;<\/pre>Add <Header \/><\/strong> inside App<\/strong> to display the header in the page. Save both files, and you should see Task tracker<\/strong> in your browser.<\/p>Pass data with props<\/h3> To pass data with props, add values to a child component when you render it, then read those values inside the child.<\/p>
Create src\/components\/TaskItem.jsx<\/strong>:<\/p>function TaskItem({ title, done }) {\n return (\n <li className=\"task-item\">\n {done ? '✓ ' : '○ '}\n {title}\n <\/li>\n );\n}\n\nexport default TaskItem;<\/pre>The { title, done }<\/strong> syntax reads the title<\/strong> and done<\/strong> props passed to the component.<\/p>Now import TaskItem<\/strong> into src\/App.jsx<\/strong> and render it twice:<\/p>import Header from '.\/components\/Header.jsx';\nimport TaskItem from '.\/components\/TaskItem.jsx';\n\nfunction App() {\n return (\n <main className=\"app\">\n <Header \/>\n <ul>\n <TaskItem title=\"Learn JSX\" done={true} \/>\n <TaskItem title=\"Build a component\" done={false} \/>\n <\/ul>\n <\/main>\n );\n}\n\nexport default App;<\/pre>The first TaskItem<\/strong> appears complete, while the second appears incomplete because they receive different done<\/strong> values.<\/p>\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Note that props are read-only. A child component can use the values it receives, but it should never change them. Only the parent passing the prop can change it.<\/p>
Compose components into a page<\/h3> Compose components into a page by creating a TaskList <\/strong>component, nesting it inside App<\/strong>, and rendering a TaskItem<\/strong> for each task in the list.<\/p>Create src\/components\/TaskList.jsx<\/strong>:<\/p>import TaskItem from '.\/TaskItem.jsx';\n\nfunction TaskList({ tasks }) {\n if (tasks.length === 0) {\n return <p>No tasks yet.<\/p>;\n }\n\n return (\n <ul className=\"task-list\">\n {tasks.map((task) => (\n <TaskItem\n key={task.id}\n title={task.title}\n done={task.done}\n \/>\n ))}\n <\/ul>\n );\n}\n\nexport default TaskList;<\/pre>The map()<\/strong> method creates one TaskItem<\/strong> for each task in the array. The key<\/strong> gives React a stable way to identify each task when the list changes.<\/p>Next, update src\/App.jsx<\/strong>:<\/p>import Header from '.\/components\/Header.jsx';\nimport TaskList from '.\/components\/TaskList.jsx';\n\nconst tasks = [\n { id: 1, title: 'Learn JSX', done: true },\n { id: 2, title: 'Build a component', done: false },\n];\n\nfunction App() {\n return (\n <>\n <Header \/>\n <main className=\"app\">\n <TaskList tasks={tasks} \/>\n <\/main>\n <\/>\n );\n}\n\nexport default App;<\/pre>This structure keeps the task-list markup out of App.jsx<\/strong> and gives each part of the interface a clear responsibility.<\/p>How do state and events make a React app interactive?<\/h2> State and events make a React app interactive by storing data that can change (state) and responding to actions such as clicks (events). For the task tracker app, you’ll use state to store the tasks and click events to mark them complete or delete them.<\/p>
React updates the page to show the new data when you interact with a task and its state changes.<\/p>
Add state with useState<\/h3> Add state with useState<\/strong> by calling it inside your component and passing the starting value. useState<\/strong> gives you the current value and a function for updating it. Use it when your component needs to remember data that can change.<\/p>In src\/App.jsx<\/strong>, import useState<\/strong> and move the task data into state:<\/p>import { useState } from 'react';\nimport Header from '.\/components\/Header.jsx';\nimport TaskList from '.\/components\/TaskList.jsx';\n\nconst initialTasks = [\n { id: 1, title: 'Learn JSX', done: true },\n { id: 2, title: 'Build a component', done: false },\n];\n\nfunction App() {\n const [tasks, setTasks] = useState(initialTasks);\n\n return (\n <>\n <Header \/>\n <main className=\"app\">\n <TaskList tasks={tasks} \/>\n <\/main>\n <\/>\n );\n}\n\nexport default App;<\/pre>In const [tasks, setTasks] = useState(initialTasks)<\/strong>, tasks<\/strong> contains the current task list, while setTasks<\/strong> updates it. initialTasks<\/strong> provides the starting value when the component first renders.<\/p>For practice, temporarily change useState(initialTasks)<\/strong> to useState([])<\/strong>. The task list should show No tasks yet.<\/strong> Change it back to useState(initialTasks)<\/strong> before continuing.<\/p>Handle click events<\/h3> To handle click events, pass functions to the onClick<\/strong> props in TaskItem<\/strong> and connect them to the task state in App<\/strong>.<\/p>First, add these functions below the useState<\/strong> line in App.jsx<\/strong>:<\/p>function toggleTask(id) {\n setTasks((currentTasks) =>\n currentTasks.map((task) =>\n task.id === id\n ? { ...task, done: !task.done }\n : task\n )\n );\n}\n\nfunction deleteTask(id) {\n setTasks((currentTasks) =>\n currentTasks.filter((task) => task.id !== id)\n );\n}<\/pre>Then, pass both functions to TaskList<\/strong>:<\/p><TaskList\n tasks={tasks}\n onToggle={toggleTask}\n onDelete={deleteTask}\n\/><\/pre>Next, update src\/components\/TaskList.jsx,<\/strong> so it passes the functions and each task ID to TaskItem<\/strong>:<\/p>import TaskItem from '.\/TaskItem.jsx';\n\nfunction TaskList({ tasks, onToggle, onDelete }) {\n if (tasks.length === 0) {\n return <p>No tasks yet.<\/p>;\n }\n\n return (\n <ul className=\"task-list\">\n {tasks.map((task) => (\n <TaskItem\n key={task.id}\n id={task.id}\n title={task.title}\n done={task.done}\n onToggle={onToggle}\n onDelete={onDelete}\n \/>\n ))}\n <\/ul>\n );\n}\n\nexport default TaskList;<\/pre>Finally, update src\/components\/TaskItem.jsx<\/strong>:<\/p>function TaskItem({\n id,\n title,\n done,\n onToggle,\n onDelete,\n}) {\n return (\n <li className=\"task-item\">\n <span>\n {done ? '✓ ' : '○ '}\n {title}\n <\/span>\n\n <button\n type=\"button\"\n onClick={() => onToggle(id)}\n >\n {done ? 'Mark open' : 'Mark done'}\n <\/button>\n\n <button\n type=\"button\"\n onClick={() => onDelete(id)}\n >\n Delete\n <\/button>\n <\/li>\n );\n}\n\nexport default TaskItem;<\/pre>Click Mark done<\/strong> or Mark open<\/strong> to change a task’s status. Click Delete<\/strong> to remove it from the list.<\/p>\n\t\t\t\n\t\t\t\t
![\"Terminal](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/09\/terminal-node-js-npm-versions.png\/w=1024,h=1024,fit=scale-down\" "\\"terminal-node-js-npm-versions\\"")