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.

Comments

Post a comment