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

Need a 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;
}

Need a 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

Need a 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

Need a hint?

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