Getting started with react JS step by step from scratch

-

 In this article we will be discussing how to create react app from scratch. We will also discuss about the project structure of react app. React JS is an library but most people says its an framework. Its actually an library by using it we can develop robust applications.

 


 

For react app we need to have install Node Js on development machine. To download Node JS you can visit below link and install it on your machine.

https://nodejs.org/en/download/ 


Node JS download  
I recommend you to always download LTS (Long term support) executable versions only.
 
Now we have downloaded and installed the node JS, its time to download and install the code editor to manage your code efficiently. I would recommend you that you can go with the Visual studio code. following is the link to download the visual studio code.
 
https://code.visualstudio.com/ 

vs code download link

Now we have downloaded and installed visual studio code as well as Node JS. Lets launch the visual studio code, go to menu bar and click on Terminal option >>  New Terminal as shown in below figure, this will open the power-shell terminal at bottom of vs code ui. 
 
This power shell terminal helps you run the node/react commands while you are coding in single window, this is the beauty of the Visual studio code editor.

New Terminal 1
New Terminal 2

Now we will check the version of node installed in the machine by entering the following command in power shell terminal.  

 node -v

 you will get the following output, in your case version of node might be different.

node version


Then we will also check the npm version installed in the machine by entering the following command in power shell terminal.  

 npm -v

you will get the following output, in your case version of npm might be different.

npm version

Now we need to go to the directory where you want to create your react application by using cd command as shown in below figure.

directory

Now its time to create our new react application. Now enter below command to create react application in my case the app name is "react-example". The command will take some time to create the app hence sit back and relax, app will create in minute or two.

 npx create-react-app react-example
react app command

React app Installed

Now as per above image the react app is created and ready for use. Now we need to open the react app files in visual studio code for that navigate to menu bar of vs code Click on File >>Open Folder option and select your react application folder as shown in below figure.

open folder

 once click on open folder button you can see the folders and files in left pane of the vs code as shown below figure.

 

app details

project structure

Public: The public folder holds your static files of your projects such as images, icon, html, fonts, svg files etc

Src: The scr folder holds all your source code file such as js, css etc

Package.JSON file: This file holds all the information about npm packages installed in your application 

  

Now lets run the application, for that you need to run following command in power shell terminal.  


 npm start

the above command will create the listener and open the browser with running application as shown in below figures.

react output

react output 1


that's it you have successfully created your first react app successfully.

What next: https://www.dotnetgyaan.in/2023/06/create-react-element-with-jsx-and.html

Comments

Post a Comment

Popular posts from this blog

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

-
Image
In previous article " Implement Nlog in .Net core MVC application part 1 "  I have demonstrated how we can implement basic setup of NLog in .core mvc application. In previous article we have logged the exceptions in flat file system. In this article I will show you how you can write the exception and custom logs in csv file. Writing logs in csv file can enable us better readability of logs in tabular form.       Lets start the implementation of it, I going to use the same example project used in previous demonstration. Modify the Nlog.config file as follows, added new target and rule for logging logs in csv file. <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd" autoReload="true" throwExceptions="fal
Read more

Implement Nlog in .Net core MVC application part 1

-
Image
Logging is a very important part of the enterprise application/web application. Setting up the logging correctly not only beneficial for long term maintenance of the application but also it is useful tool to find out the RCA in case of mission critical bug arises. Therefor we will going to discuss the various logging technique implementation using Nlog library package. In this article we will going to use .net core application for demonstration but you can implement it in .net framework application also. So lets start the implementation of Nlog in .net core MVC application. Open visual studio 2019/17 and create the new project as shown below.     Select Asp.net core Web App (Model-View-Controller) and provide the project name in project name text box.   Now on next screen click on create button this will create MVC app with .net core Now go to solution explorer and right click on project and click on Manage Nuget Package. Now in Nuget package manager install below listed Nlog packages.
Read more

Angular User Session Timeout example step by step

-
Image
This functionality let the user know that their session is about to expire and that they would be logged out if they didn’t take action. I have written this functionality in Angular for my latest application.  If you are new to Angular 6 then read my article about Setting up Angular 6 step by step before jump to this article to get handy in Angular 6. Dealing with timers in Angular can be significantly different when using React components and subscriptions. The basic premises remains the same, though. We’ll have a service with a timer that will provide a Subject to which consumers of the service can subscribe. A React Subject provides an easy mechanism to trigger a “next” subscription to alert consumers that the timer has expired.   import { Injectable } from '@angular/core'; import { Observable, Subject, Subscription, BehaviorSubject} from 'rxjs/Rx'; @Injectable() export class IdleTimeoutService { private _count: number = 0;
Read more

Restore the lost focus of Auto post back controls in asp.net update Panel control

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more

Disable backspace key using Jquery

-
Disable backspace key in HTML form using Jquery in simple steps. While user enters data into application if user accidentally  press backspace button then it will redirect to previous page and all entered data would be lost. to eliminate this event we can disable the backspace key using Jquery. Following is the JQuery script tag you can add to the web page $(document).keydown(function (e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 8) { if ((nodeName === 'input' && e.target.type === 'text') || nodeName === 'textarea') { // do nothing } else { e.preventDefault(); } } }); The above code can be used seamlessly with any web technology you are using. Hope this will help you in your web application. Happy coding:)
Read more