Node.js is a cross-platform JavaScript environment that can be used for server-side scripting. Due to its non-blocking workflow, Node.js is popular among the web developers for building a dynamic web application. Node Package Manager also known as npm is the package manager for Node.js.
You may get a doubt why we are installing Node.js for running a react application.
So here is the answer to your doubts.
Reasons To Use Node.js and React.js Together:
Some of the reasons why you should use Node JS together with React JS to make your code scalable and highly efficient include:
- Real-time Data: Using Node JS is highly recommended for a constant server connection if the core of your application is based on real time data management or streaming.
- High Server Load: Using Node JS with React can help in handling requests and maintaining server load balance.
- JSON APIs: You can easily build JSON APIs for your application using Node JS. The reusability of the code enables sharing within React JS.
<❤1❤>Installation and Setting Up:
Install node.js framework from https://nodejs.org/en/download/ . Install the application version that is compatible with your OS(Windows, MacOS, Linux)and system requirements.
For windows installation(64-bit):
open the msi installer and follow these steps.
Use the prompted directory for hassle free usage of the application.
Click on finish and hence the app is installed.
<❤2❤>Checking if Node.js is installed or not on your pc ?:
Step 1: Open the visual studio code or any other code editor you prefer to use. Alternatively you can also use the windows command prompt(CMD).
Step 2:Open the New Terminal
Step 3:Check for the node and npm versions in terminal.
Use the commands node -v and npm -v
Step 4:After checking for versions, if you want to upgrade for new versions of node.js then use the following steps.
- Go to this site: https://github.com/coreybutler/nvm-windows/releases
- Install and unzip the nvm-setup.zip file
- From cmd type nvm -v to ensure nvm is installed.
After installing nvm, the following can be done to update Node.js to the latest version:
nvm install <version>
Check the list of available Node.js version in the system using the following command:
nvm list
To use the desired version, use the following command:
nvm use <version>Update npm: To update NPM, use the following command:
npm install -g npm<❤3❤>Now coming to interesting part i.e is creating the react application
The React.js framework is an open-source JavaScript framework and library developed by Facebook. It’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.
There are four simple steps for creating a react app
first clear the terminal by using “cls” command.
Step 1:Enter the following command.
npx create-react-app my-app
Here my react app name is apple.
This may take 5–10 mins for setting up its environment depending on your bandwidth speed .
You’ll recieve a message “Happy hacking!” at the end .
Step 2:Add the react app directory to the command line
cd appleStep 3:Enter the command npm install ,this will install all the required node modules for running the react app
npm install
Step 4: Now comes the intersting command for starting the react appliction on the host port.
npm start
Step 5: Now you can visit the development server on these links hosted on port 3000
Local: http://localhost:3000
On Your Network: http://172.30.128.1:3000
For security concern it is suggested to use local link.
This is a basic react page ,you need to edit the src/App.js file to create your own user interface.
I have modified App.js by adding my favourite photo and reloaded the development server. Hence, you can add your required features to it.
<❤4❤> Creating a new repository in github
Step 1:Go to your github account and add new repository
Step 2:Add name to the repository, here i am using apple as my repository name.
click on ‘Create repository’
It would look like this after creating the repository . Now you can push files into your new repository.
But wait ,there some prerequisites you need do before you deploy your react-app.
<❤5❤>Install gh-pages and modify the package.json file
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.
Run the following commands simultaneously one by one
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Revan-droid/apple.git
git push -u origin mainRun the following command in terminal for installing github pages
npm install gh-pages --save-devYou can refer the following image
Now edit the package.json after running the above command in the terminal.
Go to the react-app>>apple>>package.json
Now, let’s configure the package.json file so that we can point our GitHub repository to the location where our React app will be deployed.
We’ll also need to add predeploy and deploy scripts to the package.json file. The script is used to bundle the React application; the deploy script deploys the bundled file.
In the package.json file, add a homepage property that follows this structure: http://{github-usename}.github.io//{repo-name}.
Now run the following commands to commit the changes and push the changes in to the repository.
git add .
git commit -m "setup gh-pages"
git push
<❤6❤>This is the final step to deploy your react-app
npm run deploy
Hence the react-app is published and you can view it on
https://revan-droid.github.io/apple/
Hoping Ironman will return…….
❤Thank You, Keep Loving, Keep Learning❤
