Hello world in React JS day#1

Hello, guys welcome back today. In the previous article, we see the introduction to react js. In this, we going to write hello world in react js and we going to see how to use create react app tool. So let’s get started.

  1. Introduction to react js
  2. Hello world in React JS day#1
  3. Components in React JS day#2
  4. Add style to components in React JS day#3
  5. State in React JS day#4  
  6. Props in React day#5
  7. Handling events in React JS day#6
  8. Accessing DOM elements in React JS day#7
  9. Conditional rendering in React JS day#8
  10. Adding logic to the game part-1 day#9
  11. Adding logic to the game part-2 day#10

Making the first Hello World App in React JS

Prerequisites

To run the react app you need to have node and npm package manager in your system. I assume that you already installed the node and npm in your system.

what is Create React App?

Create react app is a tool that makes our life easier by setting up the react app because react needs a lot of setups to run. That setup is taken care of by the create react app so we developer don’t  need to worry about setting up the react app.

First, install create react app by executing the following command

npm install -g create-react-app

(-g) -> For installing the package in global space so we can access it from anywhere.

After installing the create react app. let’s create our react project by executing the following command

create-react-app rpsbattle

(rpsbattle) -> Is our project name you can name it any name.

It will install all the dependencies such as React, React-dom …. and other dependencies that need to run our react app.

After successfully installed. Our project created at the same directory where we execute the command so move to our project directory by executing the following command

cd rpsbattle

Now let’s see the directory structure created by the create react app and see what is the function of each file in our project directory.

Directory Structure Of React App

rpsbattle
├── README.md
├── .gitignore
├── package.json
├── node_modules
├── 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
    └── setupTests.js

README.md and .gitignore

These files are related to git.

Package.json

It is a standard file found in every project. It contains information like the name of the project, versions, dependencies, etc. Whenever we install a third-party library, it automatically gets registered into this file.

{
  "name": "rpsbattle",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
...........
....

If you see under the dependencies. It lists all the dependencies need to run our react app.

node_modules

The node_modules folder has all the dependencies of our project.
When we install the package using npm. It all stored in this folder.

Public folder

1.favicon.ico,logo192.png and logo512.png

These are just an asset for our project.

index.html

This is the main file where react js inject ours react component as plain Html. After running the program you can see the code in the browser by inspecting it.

manifest.json

The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s desktop or mobile device.

robots.txt

This is a text file webmasters create to instruct web robots. How to crawl pages on our website.

src folder

This folder contains the actual source code for our app. We can create our own subdirectory inside this directory.

App.css

This file contains the style for the app.js.

App.js

App.js is a sample React component called “App”.
This the component that wraps our other components.

App.test.js

This is the test file that basically allows us to create the unit tests.

index.css

This stores the base styling for our application.

index.js

This stores our main Render call from ReactDOM.It imports the App.js component that we start with and tells React where to render it.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

If you see the above code ReactDOM render the app component in the root element that present in the public/index.html. 

....................
............
<div id="root"></div>
.........
.............

logo.svg

This is a Scalable Vector Graphics file that contains the logo of Reactjs. With this file, we are able to see the ReactJS logo on the browser.

ServiceWorker.js

As its name applies, it is important for registering a service that is generated automatically and creates Progressive Web Apps which are necessary for mobile React Native apps.

setupTests.js

This file used to set up the Jtest.

How To Run Our React App?

Execute the following commands to run our app

npm run

After running this command our create react app start the development server at localhost:3000 and convert our react js app to plain javascript by using babel and bundled into a single javascript file using webpack.

These are happening behind the scenes. I am not covering about babel and webpack. If you like to know more check their official website.

You will get the output in chrome similar to the below image.

Now open the project directory in any editor you wish and open the app.js file and edit the content like below and save the changes.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World!
         </p>
      </header>
    </div>
  );
}

export default App;

Once you saved the development server automatically detected and reload the browser and you will get the output similar to the image below.

Congrats! You write your first react app.

What is JSX?

If you noticed in the App.js file it looks like Html but actually, it is a JSX(JavaScript XML).

.....
...
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World!
         </p>
      </header>
    </div>
.........
....

JSX is a synthetic sugar used to write Html in react. It converted to react element once we run the program.

The thing you need to know about JSX

1.The HTML code must be wrapped in one top-level Html element.

If you  write three paragraphs, you must put them inside a parent element, like a  div element.

const myelement = ( <div> 
                        <p>Reacct</p> 
                        <p>Angular</p> 
                        <p>Vue</p>
                    </div> 
);

 

2.To insert a large block of Html wrap it with parentheses like this

const myelement = (
  <ol>
    <li>Reacct</li>
    <li>Angular</li>
    <li>Vue</li>
  </ol>
);

3.To use an expression in JSX wrap it with a curly brace like this

const myelement = <h1>CodeSpeedy is {95+5}% is awsome </h1>;

4.Every JSX element must be closed even though it is an empty element.

const myelement=<input type="text"/>

Conclusion

Ok guys that’s enough for today. We learn about create react app, the directory structure of react, and  JSX in this article. In the next article, we learn components in react.

All the best guys for upcoming days keep learning.

Leave a Reply

Your email address will not be published. Required fields are marked *