Sunday , November 28 2021

Complete React Js environment setup in under 15 minutes – Android Coding by DMTechnolab

Hello friends and welcome back. In this tutorial, I teach React JS Environment Setup In less than 15 minutes on Windows, Mac or Linux.

Now it is recommended to do it before starting Node js Is installed on your system.

Why node js?

Node is an open-source runtime environment for JavaScript. TO Reacts work with JS, we need to install node JS on our system. This will help us to create and build our node application.

If it is not yet installed on your system, no worries, keep reading and I’ll run you through the node installation and later we’ll start with it Feedback Installation.

Now, before moving to React JS environment setup, I would like to provide you some information about React JS.

React JS is an open-source JavaScript library used to build user interfaces. It was developed and maintained by Facebook, but is now open.

Example response code

NodeJS Installation

Now, let’s start with NodeJS installation. If it is already installed on your system, you can skip this section and read from it here.

We need to follow these steps to install a node in our machine.

  • Download and install NodeJS
  • (For Ubuntu / Linux) Setup NPM
  • Get your favorite code editor

Node on windows / mac

Head to Download node’s official website and node’s LTS version On your Mac or PC.

Node on ubuntu

For Linux users (Debian based), you can install the node using the below command.

sudo apt install nodejs

Once the installation is complete, you can view it using the command node -v.

You are also going to need NPM for installing other packages. 

To install NPM, run the following command 

sudo apt install npm

Once the installation is completed, you can check it using the command npm -v. Node and NPM will be successfully installed on your machine.

Configuring Node on Mac and PC

Now, coming to Mac and PC users. You guys can install Node using the native installer which can be downloaded from the official website of Node.

Visit Node’s official website and download the LTS version of Node. Once downloaded, you can easily install the Node with the help of the installer.

Once downloaded, you can see a screen something similar to this.

Note: These screenshots are from my Mac but don’t worry if you are on PC. The windows installer will also have screen something similar to this.

React JS Environment Setupप्रतिक्रिया js पर्यावरण सेटअप

इसके बाद, संकेत मिलने पर अपना व्यवस्थापक पासवर्ड दर्ज करें।

response js environment setupReact JS Environment Setup

This will install Node JS and NPM on your Mac (or PC) and you are now ready for the React JS environment setup.

Js environment setup setupReact JS Environment Setup

But before setting a react, it is necessary to set your text editor to write your reaction code.

Setting up text editor for React JS

The next step is to install a text editor to write your React JS code. A text editor i use Visual studio code or VS Code.

It is very powerful and currently one of the most popular text editor and it is free and one more thing, this text editor is available for all OS.

Downloading and installing VS code

To download VS code, go to code.visualstudio.com And download the installer for your OS from there.

Js environment setup setupReact JS Environment Setup

Install the text editor in the same way you install any other software.

Once done, you can start writing code on this text editor. This text editor works directly out of the box and you do not need to configure anything.

For additional functionality, you can Install Various extensions are available for free and enhance the features.

React is one of the best expansions for J.S. ES7 React / Redux / GraphQL / React-Native Snippets By dsznajder.

Vs code response extensionVs code response extension

Install this extension and it will help you a lot while writing React Js code.

Reactivate the Js environment setup on your system

Now it's time to install and setup our React app. To setup React on your system, you can open your terminal and write the following command.

npx make-response-app your app-name

Set responseSet response

cd your app name

Create Reaction AppCreate Reaction App

Starting at sea level

Start response serverStart response server

Then open http: // localhost: 3000 / To view your app.

Note: These commands can be executed on any OS.

Now, you might be thinking "what is this npxThe ". You can learn more about it npx here.

Once you are inside your project folder, you can now start working on your response project.

Cloud-based solution

This was the way to install and use React in your system. If you want to work locally, that's fine.

But if you want to work online without the stress of installing anything, you can always work on some cloud-based IDEs.

CodeSandbox .io

codeandbox.iocodeandbox.io

One of the best options that is also free codeandbox.io

Just open this link in a new tab, log in your usage GitHub Account And there you can make your new Reaction App And you can easily work online.

React JS Environment SetupReact JS Environment Setup

The best part of this online service is that you can also share your output URL to your colleagues' friends and you can also download your files or you can also collaborate in real time with your other colleague. .

Since you are done with the installation and install part, we can now create a new React app and see it in action.

Hello world! Applications in React JS

Let's try to edit this file and make hello, world! App. Open your project directory in VS code and go to src Directory and select index.js And paste the code below.

There is no need to change any file. Just edit index.js Restart your server by pressing file and then r In your terminal.

Go for http://localhost:3000

You will see your hello, world! The app is running.

Feedback generationFeedback generation

The conclusion

Well, it was all React JS Environment Setup. I hope you guys liked this post. If you are stuck in any kind of error, don't forget to google it and try to debug it by yourself.

This will teach you how to debug yourself because someone must have faced a similar problem before.

If you still have not found a solution to your problem, you can ask your doubt in the comment section below and we will get back to you.

This was all for this post. Thank you for your time and keep learning. Take care and enjoy coding.

I am Pratyush Sah, a proud full stack developer who coding and Chelsea. A die-hard fan of FC loves. Nice to meet you. - thePratikSah S


Source link

About dmtechnolab

Check Also

Simplified Coding

Android Espresso Tutorial – Testing Fragment in Isolation – Android Coding by DMTechnolab

Welcome to another tutorial in the Android test series. And this post is called Android …

Leave a Reply

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