Creating first React app - Try It Yourself

Creating first React app

📖 Scenario: You want to build a simple React app that shows a friendly greeting on the web page. This app will help you understand how React components work and how to display content.

🎯 Goal: Build a React functional component called Greeting that renders a <div> with the text Hello, welcome to React!

📋 What You'll Learn

Create a React functional component named Greeting

Return a <div> element containing the exact text Hello, welcome to React!

Export the Greeting component as default

Use only functional components and React hooks if needed

💡 Why This Matters

🌍 Real World

React is widely used to build interactive web apps with reusable components.

💼 Career

Knowing how to create and render React components is essential for frontend developer roles.

1

Set up the React component function

Create a React functional component named Greeting using the syntax function Greeting() {}.

React

# Your code here
// Create a React functional component named Greeting

Hint

Start by writing function Greeting() {} to define your component.

2

Add JSX to render a div with greeting text

Inside the Greeting function, return a <div> element containing the text Hello, welcome to React! using JSX syntax.

React

function Greeting() {
  // Return a div with the text 'Hello, welcome to React!'
  return null;
}

Hint

Use return <div>Hello, welcome to React!</div>; inside the function.

3

Export the Greeting component as default

Add a line to export the Greeting component as the default export using export default Greeting;.

React

function Greeting() {
  return Hello, welcome to React!;
}
// Export Greeting as default

Hint

Write export default Greeting; after the component function.

4

Use the Greeting component in your app entry point

In your main app file, import ReactDOM and render the Greeting component inside the root element using ReactDOM. Write import ReactDOM from 'react-dom/client'; and then use ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);.

React

// Import ReactDOM
// Render Greeting inside the root element

Hint

Use import ReactDOM from 'react-dom/client'; and ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />); to show the component.

Practice

1. What is the main purpose of the ReactDOM.createRoot method in a React app?

easy

A. It creates a new React component.

B. It tells React where to put the app in the HTML page.

C. It styles the React app automatically.

D. It fetches data from the server.

Solution

1. Step 1: Understand ReactDOM.createRoot usage

   This method is used to select the HTML element where the React app will appear, usually a div with id 'root'.

2. Step 2: Identify its role in rendering

   It creates a root for React to manage the app's UI inside that HTML element.

3. Final Answer:

   It tells React where to put the app in the HTML page. -> Option B

4. Quick Check:

   ReactDOM.createRoot sets the app's HTML container [OK]

Hint: ReactDOM.createRoot links React to HTML element [OK]

Common Mistakes:

• Thinking it creates components
• Confusing it with styling or data fetching
• Assuming it runs app logic

2. Which of the following is the correct way to define a simple React functional component named App?

easy

A. class App extends React.Component { render() { return 'Hello'; } }

B. const App = Hello;

C. function App() { return Hello; }

D. function App { return Hello; }

Solution

1. Step 1: Check function syntax for React component

   A React functional component is a function that returns JSX, so it needs parentheses after the name.

2. Step 2: Validate JSX return and syntax

   function App() { return
   Hello; } correctly defines a function named App that returns JSX inside a div.

3. Final Answer:

   function App() { return
   Hello
   ; } -> Option C

4. Quick Check:

   Functional component = function with () and JSX return [OK]

Hint: React components are functions returning JSX with () [OK]

Common Mistakes:

• Missing parentheses after function name
• Assigning JSX directly to a variable without function
• Using class syntax incorrectly for functional components

3. What will be displayed on the webpage after running this React code?

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return 
Welcome to React!
;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

medium

A. undefined

B. App

C. Nothing, there is an error

D. Welcome to React!

Solution

1. Step 1: Understand what the App component returns

   The App function returns an <h1> element with the text 'Welcome to React!'.

2. Step 2: Check rendering process

   The root renders the App component inside the HTML element with id 'root', so the heading will appear on the page.

3. Final Answer:

   Welcome to React! -> Option D

4. Quick Check:

   App returns <h1>Welcome to React!</h1> [OK]

Hint: Component returns JSX shown on page [OK]

Common Mistakes:

• Thinking component name shows instead of its return
• Assuming error without checking code carefully
• Confusing JSX tags with plain text

4. Identify the error in this React app code:

import React from 'react';
import ReactDOM from 'react-dom/client';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

medium

A. App should be called as in render, not just App.

B. Missing import of ReactDOM.

C. Function App must return a string, not JSX.

D. document.getElementById('root') is incorrect.

Solution

1. Step 1: Check how render is called

   React expects a JSX element or component instance in render, so is correct, not just App.

2. Step 2: Understand difference between component and element

   App is a function, is JSX that creates an element from that function.

3. Final Answer:

   App should be called as <App /> in render, not just App. -> Option A

4. Quick Check:

   render needs JSX element like <App /> [OK]

Hint: Use to render component, not App alone [OK]

Common Mistakes:

• Passing function name instead of JSX element to render
• Confusing component function with element instance
• Ignoring JSX syntax rules

5. You want to create a React app that shows a greeting message inside a div with a class container. Which code correctly creates and renders this app?

hard

A. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

B. function App() { return Hello!; }
ReactDOM.render(, document.getElementById('root'));

C. const App = () => Hello!;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

D. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

Solution

1. Step 1: Use correct JSX attribute for class

   In React, use className instead of class for CSS classes.

2. Step 2: Render the component as JSX element

   Use root.render(<App />) to render the component, not just the function name.

3. Final Answer:

   function App() { return <div className="container">Hello!</div>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   Use className and render JSX element [OK]

Hint: Use className and render with [OK]

Common Mistakes:

• Using class instead of className in JSX
• Passing function name instead of JSX element to render
• Using old ReactDOM.render instead of createRoot