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

Installing Node.js :

React - Preparing environment for React - downloading Node.js
Fig – React – Preparing environment for React – downloading Node.js
  • 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
React - Preparing environment for React - Installing Node.js
Fig – React – Preparing environment for React – Installing Node.js
  • 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
React - Preparing environment for React - Installing Node.js - Node.js setup wizard
Fig – React – Preparing environment for React – Installing Node.js – Node.js setup wizard – step 1
React - Preparing environment for React - Installing Node.js - Node.js setup wizard - step 2 - selecting features to install
Fig – React – Preparing environment for React – Installing Node.js – Node.js setup wizard – step 2 – selecting features to install
  • 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
React - Preparing environment for React - Installing Node.js - Node.js setup wizard - step 2 - selecting feature - "Add to PATH" - which set environment variables those can be then used from any location
Fig – React – Preparing environment for React – Installing Node.js – Node.js setup wizard – step 2 – selecting feature – “Add to PATH” – which set environment variables those can be then used from any location
React - Preparing environment for React - Installing Node.js - Node.js setup wizard - step to opt installing necessary tools like Python and Visual Studio Build Tools
Fig – React – Preparing environment for React – Installing Node.js – Node.js setup wizard – step to opt installing necessary tools like Python and Visual Studio Build Tools. Once Node.js installed successfully, this will install those respective required tools
  • Please click on “Next” buttons – Setup will be finished – make sure Node.js installed successfully as shown in below fig.
React - Preparing environment for React - Installing Node.js - Node.js installed successfully
Fig – React – Preparing environment for React – Installing Node.js – Node.js installed successfully
  • We can also check successfully installation of npm by executing command as
React - Preparing environment for React - NPM installed successfully
Fig – React – Preparing environment for React – NPM installed successfully
  • 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
React - Preparing environment for React - Installing Node.js - Node.js installed successfully and installation of Python and the Visual Studio Build Tools started
Fig – React – Preparing environment for React -Node.js installed successfully and installation of Python and the Visual Studio Build Tools started
Fig - React - Preparing environment for React - Installing Node.js - Node.js installed successfully and installation of Python and the Visual Studio Build Tools started
Fig – React – Preparing environment for React – Node.js installed successfully and installation of Python and the Visual Studio Build Tools started
React - Preparing environment for React - installing Python
Fig – React – Preparing environment for React – installing Python
React - Preparing environment for React - Python installed successfully. Installing Visual Studio tools
Fig : React – Preparing environment for React – Python installed successfully. Installing Visual Studio tools
  • 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:

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 🙂

One thought on “React JS for beginners – Part 2 – Preparing environment for creating React app

This site uses Akismet to reduce spam. Learn how your comment data is processed.