ReactJS Tutorial for Beginners - 2 - Hello World

Author:
In the previous chapter, we have seen what is react and how to create a simple React app with an HTML file.

In this chapter, let's create a simple React hello world application using create-react-app CLI.

Setup and Installation

Let's begin by setting up our development environment to react. We need two things installed node js and a text editor of your choice.

Create React App using Create React App CLI Tool

This is a popular way of creating a single-page React application and we will use this method in all the react tutorials.
Create React App CLI tool is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

Step 1 - Create React App

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app
npm init is available in npm 6+

Yarn

yarn create react-app my-app
yarn create is available in Yarn 0.25+

Output - Project Structure

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Step 2 - Move to the Newly Created Directory

Once that finishes installing, move to the newly created directory:
cd my-app

Step 3 - Change App.js File

Let's change the App.js file with the following content:
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;
Note that inside the return, we're going to put what looks like a simple HTML element.

Step 4 - Start React App

Use below command to start the project:
npm start
Use yarn to start the project:
yarn start
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

Demo

What's Next?

In this chapter, we understand how to generate a simple react app.  In the next chapter, let's understand the application folder structure.

Continue Learning with Java Guides

Want to take your programming skills to the next level? Explore my practical Udemy courses on Java, Spring Boot, Microservices, Full-Stack Development, Docker, and Generative AI. You can also follow my structured learning roadmaps to become a professional developer.

By Ramesh Fadatare - Udemy Instructor Partner

Comments

Post a Comment

Leave Comment