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:
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 🙂
1 Response
[…] last two articles – React JS for beginners and React JS for beginners – Part 2 – Preparing environment for creating React app we discussed following points, in this article we will move bit ahead and create one more simple […]
You must log in to post a comment.