1 · Get comfortable · 18 MIN

Set up and render your first component

A component is a function that describes a piece of the screen.

JavaScript normally calculates values. A React component calculates a description of an interface using JSX, a syntax that resembles HTML. The function name starts with a capital letter so React can distinguish it from an HTML element such as h1. Curly braces inside JSX evaluate a JavaScript expression. You return one enclosing element, here main, containing the heading and paragraph. Editing this file updates the browser through the development server.

Complete the setup above and locate src/App.jsx. Replace that file, save, and open the local Vite URL. Read the function from its name to its return; {learner} inserts the variable value. Change only the variable, then observe which part of the screen changes.

Before you start

Install Node.js 22.12+ (or a supported newer LTS). In a terminal run: npm create vite@latest codingneed-react -- --template react. Then cd codingneed-react, npm install, and npm run dev. Open the local URL printed by Vite. Replace src/App.jsx with ONE lesson example at a time. JSX renders a browser interface; it is not a plain console script.

File for this example: App.jsx

New words, explained

component: A reusable function describing UI.
JSX: JavaScript syntax for describing elements.
render: React calculates what the interface should show.

Follow the example step by step

Complete the setup above and locate src/App.jsx.
Replace that file, save, and open the local Vite URL.
Read the function from its name to its return; {learner} inserts the variable value.
Change only the variable, then observe which part of the screen changes.

You are ready to move on when: The heading contains your name. Both paragraphs are visible. The browser console has no JSX syntax errors.

Read the example

// Save as src/App.jsx in the React starter project.
export default function App() {
  const learner = 'Ada';
  return <main>
    <h1>Hello, {learner}</h1>
    <p>I am learning one concept at a time.</p>
  </main>;
}

Check the expected output

The browser shows a heading “Hello, Ada” and one paragraph. There is no console output.

Your challenge

Change the name to your own, then add a second paragraph describing your learning goal. Keep one main element around the content.

Solution cost: Discuss the operations in this small example; rendering and I/O costs depend on the host. time · Proportional to the example’s retained data. space

Common trap

JSX is not a string: do not put quotes around the entire returned markup.

Study the project implementation

// Save as src/App.jsx in the React starter project.
export default function App() {
  const learner = 'Ada';
  return <main>
    <h1>Hello, {learner}</h1>
    <p>I am learning one concept at a time.</p>
  </main>;
}

Open guided workshop →See the syllabus