Episode 1 :Creating your first React App

INTRODUCTION

A javascript Front-end library for building User Interface. Everything in React is a component,i.e every part of a web app or website is a component, all are made separately and finally fitted into a parent component which is then rendered. Popular websites that are based on React include Facebook, Instagram, Netflix, Uber, Airbnb, Reddit, and many more. 

Starting with React from scratch might sound difficult at first. All we need is a basic knowledge of HTML, CSS, and JS. In this tutorial, we will cover the latest concepts like functional components, React Hooks, REDUX, and many more.

So, let’s get started by building our first React Project!

SYSTEM SETUP

Before jumping into React we first need to check whether the basic system setup is available. Firstly we need to install Node.js and NPM i.e Node.js package manager. So, make sure you have Node.js installed on our system.

You can check the Node.js website at https://nodejs.organd download the installer. Basically, the LTS version is used in this tutorial as it is the stable version.

Once you have Node.js installed on your system you can check the node version by executing the following command.

Now, you all need is a source-code editor. I personally recommend you to use Visual Studio Code a lighting fast code editor that can be downloaded free at https://code.visualstudio.com/. It supports the development operation like debugging, version control, and task running.

CREATING FIRST REACT PROJECT :

After the installation process. Now, you can create your first React App. Open your terminal and run the command 

npx create-react-app <name_of_your_app>

You will see something similar to this

This creates a React App with all the necessary functionality you need. Now, cd to your app folder and run 

 $ code . 

This command opens the VS Code or you can simply drag the folder to VS Code to open the folder.

EXPLORING THE PROJECT STRUCTURE

Since we have opened the folder in VS Code. Now, we are all set for exploring the initial project structure.

• node_modules/: This folder contains all the project dependencies, it includes packages that have been downloaded and installed by using Node.js Package Manager(NPM)

• public/: The public folder contains the HTML files so you can modify it. 

• public/index.html : It is the page template.

• src/: This is the folder where you can find the JavaScript implementation of your React application. E.g. by default you can find the App component implementation in App.js. You may create subdirectories inside src.

• src/index.js: It is the Javascript entry point.

RUNNING THE WEB SERVER
 
For running the development web server all you can do is run the command
 $ npm run start 
or
 $ npm start 
You will get the following output.

And, here you can see the webserver has been started on the port 3000. The browser is opened automatically URL as https://localhost:3000 and you can see the following output.

BUILD APP READY FOR PRODUCTION

You can also build the application for production. The React application is build and the result is made available in the build folder. You can run the following command for running the production build:

 $ npm run build

Once build has been finished successfully you'll see the following output:

You can then deploy the content of the build folder to any web server.

WHAT'S NEXT

In the next session, we will continue our React journey and discuss detail about the React Component and JSX code. See you at the next session 😃.