React JS for beginners – Part 2 – Preparing environment for creating React app

Hi All,

LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂 STAY SAFE, STAY HEALTHY, STAY HOME 🙂

In last article – React JS for beginners we discussed following points, in this article we will move bit ahead and prepare environment for creating react app using “create-react-app” – preferable way to create react app

• What is React
• How React works 
• What are React Components
• Starting with React – creating first simple React App

Note : You will find lots of articles on React but still I’ll be writing from my side and by my way as I am learning as well (don’t want to reinvent the wheel :)) and in upcoming articles I need to explain react with SharePoint for SPFX component.

Take away from this article :

• Bit of Node.js
  • What is Node.js
  • Usage of Node.js
• Bit of NPM
  • What is NPM
• Installing Node.js – preparing environment for creating react app using “create-react-app”

What is Node.js :

• Node.js is open source environment
• Node.js allows us to run JavaScript on the server (though JavaScript is client side scripting language 🙂 )
• Node.js is free
• Node.js runs almost on all platforms – Windows, Linux, Mac OS X and so on – cross-platform
• Node.js uses asynchronous programming
  • This means all Node.js libraries APIs are asynchronous.
  • This also means, no need to wait for API to return the data. Server calls next API as call to previous API done. Basically Node.js functions are non-blocking
  • There is callback for every API to notify / signal that execution of respective API is finished or is there any failure
• Node.js libraries are very fast
• Node.js was designed by Ryan Dahl in 2009
• Node.js is mostly used for
  • Basically it is designed for building network applications like web servers
  • Creating dynamic content on the page
  • CRUD operations on database
  • CRUD operations on Files on the server
  • Creating SPA – Single Page Applications
• Node.js Module –
  • Node.js modules are like Java Script libraries – Basically a set of functions which we can use in our applications
  • Node.js has huge set of built in modules, we can write our custom modules as well

What is NPM :

• NPM is the default package manager for Node.js – Node Package Manager
• NPM is completely written in JavaScript
• NPM designed by Isaac Z. Schlueter
• When we install Node.js, NPM program is get automatically installed
• Package contains all the required files for Node.js module
• NPM consist of
  • npm – command line client
  • npm registry –  online database of public and paid-for private packages. We can browse this library from npm site – https://www.npmjs.com/
• We could install any available package by “npm install “

npm install <package name>
npm install "http" 

Installing Node.js :

• Download the Node.js from the site – https://nodejs.org/en/ as

• Here we have downloading – 12.18.3 LTS version since which is recommended for most of the users
• Once we have downloaded successfully, start the setup as

• Once we have started the setup, we have couple of dialogs, please look at each step and select appropriate options as per our requirements and move to next step

• From the above dialog, please make sure that we have enabled / opted feature – “Add to PATH” – this will set environment variable for Node.js and NPM as

• Please click on “Next” buttons – Setup will be finished – make sure Node.js installed successfully as shown in below fig.

• We can also check successfully installation of npm by executing command as

• Since we have opted the option to install tools for Visual Studio and Python after Node.js successful installation of Node.js, those respective required tools installation will start

• Once installation happened successfully we are ready to start again our first react app using “create-react-app” 🙂

We will stop here, we have environment ready for Node.js.

Next Article : In next article we will create our first react app using “create-react-app”.

References:

• https://nodejs.org/en/
• React tutorial
• Node.js Tutorial
• https://www.npmjs.com/

Thanks for reading 🙂 Feel free to discuss / comment / questions. SHARING IS CARING 🙂

Share In Teams:

Enjoy the beautiful life 🙂 Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂