Learning ReactJS: Hello world

If you are from an IT background then you may have heard about this amazing front-end library ReactJS developed by Facebook. To learn ReactJS you must have the understanding of concepts and languages described inside the prerequisites section.

Prerequisites:

  1. Understanding of syntax in HTML, CSS, and Javascript( ES6 ).
  2. Basic Understanding of front-end components and client-server architecture.
  3. An IDE or text editor installed on the machine. I use Vscode you can use any other text editor if you want.

If you have done web development previously, you may have suffered from a lot of issues related to the DOM updating but ReactJS fixes this issue using virtual DOM. ReactJS uses a component model to build the UI. Remember that ReactJS is a UI library, not a framework. Many people consider ReactJS as a framework.

With so many websites developed daily and so many users using the website for their daily needs, it was needed to develop a UI library that will solve problems that are often faced with traditional web applications. Facebook solved those problems using ReactJS.

Installing ReactJS:

You need to have configured npm to install the react application. If you don’t have it installed then google it and you will find the solution. Once the installation is completed, to install react use the following command:

foo@bar:~$ npm install -g create-react-app
................................

Wait for the installation to complete. Once the installation is completed then you will have create-react-app available globally.

let’s create our first react application using the create-react-app command:

foo@bar:~$ create-react-app hello-world

Creating a new React app in /hello-world.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
................................

Understanding ReactJS preconfigured components:

You will then find the following directory structure installed in your application:

+-- README.md 
+-- package-lock.json
+-- package.json
+-- node_modules
+-- .gitignore
+-- public
|   +-- favicon.ico
|   +-- index.html
|   +-- logo192.png
|   +-- logo512.png
|   +-- manifest.json
|   +-- robots.txt
+-- src
|   +-- App.css
|   +-- App.test.js
|   +-- index.js
|   +-- serviceWorker.js
|   +-- App.js
|   +-- index.css
|   +-- logo.svg
|   +-- setupTests.js
  1. package.json: If you will open this file you will see all the packages installed and configuration required for the application.

  2. node_modules: All the packages that are installed in the application scope are available here.

  3. public: This directory contains index.html which is the entry point that is rendered by the browser. If you see the code inside this file you will see the following line that gives control to our react application:

     ```html
     <div id="root"></div>
     ```
    
  4. src: This is the main directory where we will write our react code.

Understanding files inside src directory:

Inside the src directory you will find the following files:

  1. Index.js: This is the main entry point for the react code. You will find the following code inside this file which renders our react code inside the index.html under <div id ="root">

     document.getElementById('root')
    

    You will understand this once we run our application and check the dev tools. We also call our App.js file inside this ReactDOM render using the following syntax:

     import App from './App';
    
     ReactDOM.render(
         <React.StrictMode>
             <App />
         </React.StrictMode>,
         document.getElementById('root')
     );
    

    Here the App.js is imported and called using the <App /> tag. This is the syntax to call our components in the React.

  2. App.js: Inside this file, you will see a lot of code and remove everything from that file. It just a starting template of React and not used anywhere. You need only the following code in your App.js.

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

Here we have declared a simple Javascript function which is returning only a <div> component from App.js to Index.js and in turn is used by the Index.html inside the public directory. This may seem confusing but it will get easy as you start to get more familiar with React.

For the time being, we will avoid serviceWorker.js, setupTests.js and App.test.js files. We will learn about them in upcoming tutorials. We will also delete App.css, logo.svg from our src directory as they are no longer required.

Running our Application:

Now we will run our application using the following command:

foo@bar:~$ npm start

If you want to make your application available in the local network use the following command:

foo@bar:~$ HOST=0.0.0.0 npm start

Open http://localhost:3000/ in your browser and you should see a blank window.

React Running server example

Hello world with ReactJS:

Let’s write out hello world code. Go inside src/App.js and copy-paste the following code in this file:

import React from 'react';

function App() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    );
}

export default App;

React Hello world

Now go to the development tools using command/ctrl + options/alt + i. Go to the Elements tab and you will find the following code:

<div id="root">
    <div>
        <h1>Hello World</h1>
    </div>
</div>

As you can see whatever we write inside our App.js wraps inside the div id root which is defined inside the index.html in our public directory.

Understanding Class components:

A simple class component in react looks as follows:

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export default App;

Here we are importing React and Component from the react library. The Component is Base component that is extended whenever we want to instantiate our class component.

A class component must have a render method compulsory and inside the render method you must always return. You can play around by removing render or return and you will see the error message on your browser.

You may be wondering What’s the difference between the class and the functional component. Well, a functional component can be used efficiently used for the part where you don’t need state and you want to show only the UI. Class components are efficient where you want to manage state and depending on the state you want to show your UI.

I know you may be wondering what is a state and how it affects. For time being just remember for stateless components using the functional method is the right choice while for stateful components using class methods is more efficient.

At this note, we will end our part 1 of ReactJS. We will learn more about React in the upcoming parts. Till then you can try various things with react. If you have any questions or any concept is not clear or I have missed covering it then feel free to comment down in the comments section.

My Twitter and Github Handle.