Explore

Lecture: Introduction to React - Creating a Simple "Hello World" App

Today, we'll be diving into the world of React, a popular JavaScript library for building user interfaces. Our objective is simple: to create a "Hello World" React app. Let's get started!

What is React?

React is a JavaScript library developed by Facebook for building user interfaces. It focuses on the concept of components, which allow developers to break down complex UIs into reusable and manageable pieces.

Setting up the Environment:

Before we start coding, we need to set up our environment.

Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed. If not, you can download and install them from

here⁠

Create React App: We'll use create-react-app, a tool that sets up a new React project with a good default configuration. To install it, run:

bashCopy code

npm install -g create-react-app

Creating the "Hello World" App:

Setting up a New Project:

In your terminal or command prompt, run:

bashCopy code

create-react-app hello-world

⁠

Navigate to Your Project:

bashCopy code

cd hello-world

Understanding the Project Structure:

After you've created your project, you'll notice several directories and files. The most important for us are:

public/index.html: The main HTML file.

src/index.js: The main JavaScript entry point.

src/App.js: The main React component.

⁠

Coding "Hello World":

Open the src/App.js file in your preferred code editor.

You'll see a function called App. This function is a React component. Replace its content with the following:

javascriptCopy code

import React from 'react'; function App() { return ( <div> Hello World! </div> ); } export default App;

Running the App:

Back in your terminal or command prompt, run:

bashCopy code

npm start

This will start a development server, and your default web browser should open displaying "Hello World!".

Understanding the Code:

Importing React: We always need to import the React library to create React components.

App Component: This is a functional component that returns a JSX (JavaScript XML) representation of our UI. In this case, it's a simple div with "Hello World!".

Exporting the App Component: This allows other files, like src/index.js, to import and use our App component.

Conclusion:

Congratulations! You've just created your first React app. While this is a simple example, React's component-based approach allows for scalability and reusability, making it a powerful tool for developing more complex applications.

Lab Exercise:

Now that you have created a "Hello World" app, try the following:

Change the Text: Modify the text inside the div in App.js to say "Hello React!".

Add Styling: Add a CSS class to style the text. For example, make the text color blue.

Remember, the journey of mastering React starts with small steps. Keep experimenting, and happy coding!

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.