Writing Your First React App - Hello World

This document guides you through creating your first React application, starting with setting up your environment to writing and customizing a simple "Hello World" app.

Introduction to ReactJS

What is ReactJS?

ReactJS, often referred to as React, is a popular JavaScript library for building user interfaces, primarily for single-page applications. Developed by Facebook, React allows developers to create large web applications that can change data, without reloading the page. Imagine building a dynamic user interface where different parts of the app update independently and efficiently. This is what React enables. Think of React as the Lego of the web development world, where you have small, reusable pieces (components) that fit together to create a cohesive app.

Key Features of ReactJS

React is known for its simple and declarative views, making it easy to reason about the application's state and behavior at any time in the development process. Let’s break this down a bit more:

Components: React uses components to build encapsulated, reusable pieces of UI. Each component can be thought of as a small, self-contained piece of the application that manages its own state and renders a part of the UI.
Virtual DOM: React’s virtual DOM (Document Object Model) is a tree of React components in memory. React compares this virtual DOM with the real DOM and updates only the parts of the real DOM that have changed. This makes React very efficient.
JSX: JSX (JavaScript XML) allows you to write HTML-like syntax within JavaScript. This feature makes the code more readable and easier to understand.
Unidirectional Data Flow: In React, data typically flows in one direction: from parent components to child components. This predictable data flow makes it easier to debug and reason about your application.
State: State is a JavaScript object that holds data. The data can change over the lifecycle of the application, and when it does, React re-renders the component to reflect the new state.
Props (Properties): Props are read-only components. They are data passed down from a parent component to a child component. Props are used to make components reusable and to maintain the data flow in a predictable way.

Setting Up Your Environment

Prerequisites

Before you begin, you’ll need to ensure you have Node.js and npm (Node Package Manager) installed on your system. These tools are necessary for building and running React applications. You can download Node.js and npm from nodejs.org. During installation, npm will be installed automatically.

Creating a New React Project

To create a new React project, we will use create-react-app, a command-line interface (CLI) tool that sets up a new React project with all the necessary configurations.

Step-by-Step Guide

Open your terminal or command prompt. This is where you can enter commands to create a new React project.
Run the following command to create a new React app. Replace my-first-react-app with whatever you would like to name your app.
```
npx create-react-app my-first-react-app
```
This command will take some time to complete as it installs all the necessary dependencies.
Navigate into your project directory by running:
```
cd my-first-react-app
```
Start your development server by running:
```
npm start
```
This command will start the development server and open your new React app in a web browser, usually http://localhost:3000.

Understanding Project Structure

When you use create-react-app to generate a new project, it creates a directory with several files and folders that make up the structure of your React app. Here’s a breakdown of what each file and folder is for:

/src: This directory contains the source code of your React application. All your React components, images, and styles go here.
/public: This folder contains static assets like the index.html file and other static files that get served directly to the browser.
package.json: This file holds various metadata relevant to the project. It also includes a list of dependencies your project requires and scripts to run your project.
README.md: This markdown file provides an overview of the project, its dependencies, and how to set it up.

Writing the Hello World App

Now that you have your environment set up and your initial project structure in place, it’s time to write your first React application.

Creating Your First Component

Components are the building blocks of any React application. They allow you to split the UI into isolated, reusable pieces, and think about each part of it in isolation. Let’s create a simple component that displays a “Hello, World!” message.

Step 1: Create a New File

Navigate to the src folder in your project. Inside the src folder, create a new file named HelloWorld.js. This file will contain our HelloWorld component.

Step 2: Write the Component Code

Open the HelloWorld.js file you just created and add the following code:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

Explanation:

Importing React: The first line imports React from the ‘react’ package. React is the core library for building user interfaces with React.
Function Component: HelloWorld is a functional component, which is a simple JavaScript function that returns JSX. JSX is embedded HTML that lets you write HTML-like syntax within JavaScript.
JSX: The return statement returns JSX, which describes what the UI should look like. In this case, it returns an <h1> element that displays the text "Hello, World!".
Exporting the Component: The last line exports the HelloWorld component so that other parts of the application can use it.

Adding the Component to Your App

Now that we’ve created our HelloWorld component, let’s use it in our main application.

Step 1: Import the Component

Open src/App.js in your project. This file is the entry point of your React app. At the top of the file, import the HelloWorld component:

import React from 'react';
import HelloWorld from './HelloWorld';

Step 2: Use the Component in App.js

Inside the App function, use the HelloWorld component like you would use any other HTML tag:

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

Explanation:

Importing HelloWorld: The import statement at the top brings in the HelloWorld component so it can be used within the App component.
Using HelloWorld: Inside the return statement of the App function, we use the <HelloWorld /> component, similar to how you would use any other HTML tag. When React encounters the <HelloWorld /> tag, it calls the HelloWorld function and places the returned JSX into the DOM.

Running Your Application

Step 1: Start the Development Server

Ensure your development server is running. If you closed it after setting up the project, start it again by running the following command in your terminal:

npm start

Step 2: View Your Application in the Browser

Once the server starts, it should automatically open your app in the default web browser. If not, you can manually navigate to http://localhost:3000. You should see a default React welcome page.

Since we modified the App.js file, your browser should automatically refresh and you’ll see a “Hello, World!” message in place of the default React logo and welcome text. This happens because we replaced the default JSX with our HelloWorld component.

Customizing Your Hello World App

Now that we have a basic "Hello World" application up and running, let’s explore ways to customize it further.

Adding Styles

There are multiple ways to style your React application, ranging from inline styles to CSS stylesheets.

Inline Styles

Inline styles are a way to add styles directly to a component using JavaScript objects. Let’s add some inline styles to our HelloWorld component.

Open HelloWorld.js and modify the code as follows:

import React from 'react';

function HelloWorld() {
  const styles = {
    color: 'blue',
    fontSize: '24px',
    textAlign: 'center',
    marginTop: '50px'
  };

  return <h1 style={styles}>Hello, World!</h1>;
}

export default HelloWorld;

Explanation:

Styles Object: We define a styles object with properties for color, fontSize, textAlign, and marginTop. The property names use camelCase rather than hyphenated names (e.g., fontSize instead of font-size).
Applying Styles: The style attribute in the <h1> tag is set to our styles object, which applies the specified styles to the <h1> element.

CSS Styles

Using CSS stylesheets is another common way to style your React application. Let’s create a CSS file and import it into our HelloWorld component.

Create a CSS File:

In the src folder, create a new file named HelloWorld.css.

Add CSS Code:

Open HelloWorld.css and add the following CSS:

.hello-world {
  color: green;
  font-size: 24px;
  text-align: center;
  margin-top: 50px;
}

Import the CSS File into HelloWorld.js:

Open HelloWorld.js and import the CSS file:

import React from 'react';
import './HelloWorld.css';

function HelloWorld() {
  return <h1 className="hello-world">Hello, World!</h1>;
}

export default HelloWorld;

Explanation:

Importing CSS: The import './HelloWorld.css'; statement imports the CSS file into the component.
Using Class Names: The className attribute is used in JSX to assign a CSS class to an element. Here, we are assigning the hello-world class to our <h1> element, which applies the styles defined in HelloWorld.css.

Adding Interactivity

React makes it easy to add interactivity to your application. One common way to add interactivity is through event handlers. Let’s add a button to our HelloWorld component that changes the text when clicked.

Modify HelloWorld.js:

Open HelloWorld.js and modify the code as follows:

import React, { useState } from 'react';
import './HelloWorld.css';

function HelloWorld() {
  const [message, setMessage] = useState('Hello, World!');

  const handleClick = () => {
    setMessage('Welcome to React');
  };

  return (
    <div className="hello-world">
      <h1>{message}</h1>
      <button onClick={handleClick}>Change Message</button>
    </div>
  );
}

export default HelloWorld;

Explanation:

Importing useState: We import useState from React, which is a Hook that lets you add React state to function components.
State Declaration: const [message, setMessage] = useState('Hello, World!'); initializes a new state variable message and a function setMessage to update it. The initial state of message is set to 'Hello, World!'.
Event Handler: The handleClick function is called when the button is clicked. It updates the message state to 'Welcome to React' using the setMessage function.
Rendering the Message: The {message} syntax is used to include JavaScript expressions inside JSX, allowing us to display the current value of the message state.
Button with onClick: The <button onClick={handleClick}>Change Message</button> tag renders a button that, when clicked, calls the handleClick function.

Styling on Interaction

We can further enhance our application by changing the styles of our HelloWorld component when the button is clicked.

Modify HelloWorld.js:

Open HelloWorld.js and update the code as follows:

import React, { useState } from 'react';
import './HelloWorld.css';

function HelloWorld() {
  const [message, setMessage] = useState('Hello, World!');
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setMessage('Welcome to React');
    setIsClicked(true);
  };

  const styles = {
    color: isClicked ? 'red' : 'green',
    fontSize: '24px',
    textAlign: 'center',
    marginTop: '50px'
  };

  return (
    <div className="hello-world">
      <h1 style={styles}>{message}</h1>
      <button onClick={handleClick}>Change Message</button>
    </div>
  );
}

export default HelloWorld;

Explanation:

State for Interaction: We introduce a new state variable isClicked that tracks whether the button has been clicked or not.
Updating State: When the handleClick button is clicked, it not only updates the message state but also sets isClicked to true.
Conditional Styling: We define a styles object that changes the color of the <h1> element based on the isClicked state. If isClicked is true, the text color changes to red; otherwise, it remains green.

Conclusion and Next Steps

Recap of Key Points

In this document, you learned how to create a new React project using create-react-app, how to create and use a functional component, and how to add some basic styling and interactivity to your application.

Next Steps for Learning

Explore More React Features

Props: Learn how to pass data between components using props.
State Management: Dive deeper into state management with useState, useContext, and other advanced state management techniques.
Routing: Learn how to set up routing in your React app to navigate between different pages.
Forms & User Input: Understand how to handle form inputs and manage user data in React.

By following these steps and exploring further, you’ll be well on your way to building more complex and interactive React applications. Happy coding!

PreviousRunning And Debugging React Application

NextWhat Is Jsx

Introduction To Reactjs

Getting Started With Reactjs

Jsx Javascript Xml

React Components

Props Properties In React

State Management In React

React Lifecycle Methods

Event Handling In React

React Forms And User Input

Conditional Rendering Lists

React Router Navigation

Styling In React

State Management with Hooks

Hooks Performance Optimization

Working With Apis In React

React Advanced Concepts

Additional Concepts

Writing Your First React App - Hello World

Introduction to ReactJS

What is ReactJS?

Key Features of ReactJS

Setting Up Your Environment

Prerequisites

Creating a New React Project

Step-by-Step Guide

Understanding Project Structure

Writing the Hello World App

Creating Your First Component

Step 1: Create a New File

Step 2: Write the Component Code

Explanation:

Adding the Component to Your App

Step 1: Import the Component

Step 2: Use the Component in App.js

Explanation:

Running Your Application

Step 1: Start the Development Server

Step 2: View Your Application in the Browser

Customizing Your Hello World App

Adding Styles

Inline Styles

Explanation:

CSS Styles

Explanation:

Adding Interactivity

Explanation:

Styling on Interaction

Explanation:

Conclusion and Next Steps

Recap of Key Points

Next Steps for Learning

Further Reading

Explore More React Features

On this page