Post
Ask Question

Making Web Applications Using Reactjs

Introduction

 
In this article, I will guide you to make a small project using Reactjs. You will get hands-on experience with React.
 
So let us get started with it.
 
Prerequisites for React
  • You should know HTML, CSS, JavaScript, and JSX fundamentals. 
  • You should also be aware of ES6.

Technical requirement

 
You should have nodes.js installed on your PC. If not, then visit the below link to install node.js [https://nodejs.org/en/].
 
For writing the codes, we prefer to use Visual Studio Code( VS code). [To download VS code go to https://code.visualstudio.com/].
 
It is up to you, you can use any text editor you prefer.
 
Let us start setting up the environment for React.
 

Setting up a React Environment

 
Before starting this session, make sure that you have installed node.js and a text editor.
 
If you have NPM and node.js installed, you can create a React application by first installing the create-react-app.
 
Install create-react-app by running this command in your terminal.
  1. C:\User\Your Name>npm install -g create-react-app  
After this, we can create a React application, let’s create one called reactdemo.
 
Run this command to create a react application name reactdemo.
  1. C:\User\Your Name>npx create-react-app reactdemo  
The create-react-app will set up everything you need to run a React application.
 
After successfully creating a React application, you can use the “cd reactdemo” command to navigate to the React application. To start running the React application, use the following command.
  1. C:\User\Your Name>cd reactdemo  
  2. C:\User\Your Name\reactdemo  
  3. >npm start  
After creating a React application, we will notice that the terminal, provides quick tips or commands that will help in executing the React.
 
 
 
After the “npm start” command, it will open the application in a browser on port number:3000 [port number can vary depending upon your PC].
 
 
 
For more details about React and how to get started with React go to this link.
 
Let us move on to the next part.
 
File Structure
 
 
After opening the file you will see a simple file structure as shown in the above-given image.
 
 
 
Change the file structure according to this file structure and add the required file and folders to your devices.
 
As you have seen in the file structure there are no CSS files in it. That is because we are using React style-component feature for the styling of our web application.
 
And for simplicity, we are dividing our whole code into components. This will help us in finding errors and if we want to do some significant change in the code we don’t have to mess up the path and disturb other parts of the code.
 
Let us go through the file structure once to clear it.
 
 
 
Every “Data.js” file in the “pages” folder contains the main information which is shown in the web application.
 
“Home.js”, “Skills.js”, “Work.js” contains the link of the data objects and components which are created in “Data.js” on every page.
 
In the Components folder, we have components of the “Navbar”, “footer” “information section”, “Internship” and “index.js” which are used to export with a smaller name that will be used by other pages or components.
 
Every“Componentname.elements.js” file contains the style-component for each component separately.
 
Every “Componentname.js” file contains the main information for the component and the data that is going to be presented in the web application.
 
“App.js” is one of the main files in React file structure this is the file that imports all the pages and components and executes them.
 
“Index.js” file also one of the main file in React file structure this is the main file which is called by the browser of the execution which contains the link of another main file that is “App.js” that contains all components and pages.
 
Let us start coding.
 
Before you start coding check whether your React app is running.
 
Code
 
We will start coding from the components and then all the pages and at the end, we will code “App.js” and “index.js”. 
 
./src/Components/Footer/Footer.js 
  1. import React from "react";  
  2. import { FaFacebook, FaInstagram, FaTwitter, FaLinkedin } from "react-icons/fa";  
  3. import {  
  4.   FooterContainer,  
  5.   FooterSubscription,  
  6.   FooterSubText,  
  7.   FooterSubHeading,  
  8.   SocialMedia,  
  9.   SocialMediaWrap,  
  10.   SocialLogo,  
  11.   SocialIcon,  
  12.   WebsiteRights,  
  13.   SocialIcons,  
  14.   SocialIconLink,  
  15. } from "./Footer.elements";  
  16. function Footer() {  
  17.   return (  
  18.     <FooterContainer>  
  19.       <FooterSubscription>  
  20.         <FooterSubHeading>Contact me via mail at</FooterSubHeading>  
  21.         <FooterSubText>[email protected]</FooterSubText>  
  22.       </FooterSubscription>  
  23.       <SocialMedia>  
  24.         <SocialMediaWrap>  
  25.           <SocialLogo to="/">  
  26.             <SocialIcon />  
  27.             VKD  
  28.           </SocialLogo>  
  29.           <WebsiteRights>Made with Love in India</WebsiteRights>  
  30.           <SocialIcons>  
  31.             <SocialIconLink href="/" target="_blank" aria-label="Facebook">  
  32.               <FaFacebook />  
  33.             </SocialIconLink>  
  34.             <SocialIconLink  
  35.               href="https://www.instagram.com/"  
  36.               target="_blank"  
  37.               aria-label="Instagram"  
  38.             >  
  39.               <FaInstagram />  
  40.             </SocialIconLink>  
  41.             <SocialIconLink  
  42.               href="https://twitter.com/?lang=en"  
  43.               target="_blank"  
  44.               aria-label="Twitter"  
  45.             >  
  46.               <FaTwitter />  
  47.             </SocialIconLink>  
  48.             <SocialIconLink  
  49.               href="https://www.linkedin.com/in/vipul-kumar-dubey/"  
  50.               target="_blank"  
  51.               aria-label="LinkedIn"  
  52.             >  
  53.               <FaLinkedin />  
  54.             </SocialIconLink>  
  55.           </SocialIcons>  
  56.         </SocialMediaWrap>  
  57.       </SocialMedia>  
  58.     </FooterContainer>  
  59.   );  
  60. }  
  61. export default Footer;  
This file contains the footer part of the web application and all the required links and information which should be presented in the footer.
 
In this Web application for Icons, we use react-icons for installing react-icons.
 
Open your terminal and type the given command.
  1. cd reactdemo  
  2. npm install react-icons --save  
Then go to this link and select the icon you need and import it.
./src/Components/Footer/Footer.elements.js 
  1. import styled from "styled-components";  
  2. import { Fa500Px } from "react-icons/fa";  
  3. import { Link } from "react-router-dom";  
  4. export const FooterContainer = styled.div`  
  5.   background-color: #101522;  
  6.   padding: 0.01rem 0 2rem 0;  
  7.   display: flex;  
  8.   flex-direction: column;  
  9.   justify-content: center;  
  10.   align-items: center;  
  11. `;  
  12. export const FooterSubscription = styled.section`  
  13.   display: flex;  
  14.   flex-direction: column;  
  15.   justify-content: center;  
  16.   align-items: center;  
  17.   text-align: center;  
  18.   margin-bottom: 24px;  
  19.   padding: 24px;  
  20.   color: #fff;  
  21. `;  
  22. export const FooterSubHeading = styled.p`  
  23.   font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",  
  24.     "Lucida Sans", Arial, sans-serif;  
  25.   margin-bottom: 24px;  
  26.   font-size: 24px;  
  27. `;  
  28. export const FooterSubText = styled.p`  
  29.   margin-bottom: 24px;  
  30.   font-size: 20px;  
  31. `;  
  32. export const Form = styled.form`  
  33.   display: flex;  
  34.   justify-content: center;  
  35.   align-items: center;  
  36.   @media screen and (max-width: 820px) {  
  37.     flex-direction: column;  
  38.     width: 80%;  
  39.   }  
  40. `;  
  41. export const FormInput = styled.input`  
  42.   padding: 10px 20px;  
  43.   border-radius: 2px;  
  44.   margin-right: 10px;  
  45.   outline: none;  
  46.   border: none;  
  47.   font-size: 16px;  
  48.   border: 1px solid #fff;  
  49.   &::placeholder {  
  50.     color: #242424;  
  51.   }  
  52.   @media screen and (max-width: 820px) {  
  53.     width: 100%;  
  54.     margin: 0 0 16px 0;  
  55.   }  
  56. `;  
  57. export const FooterLinksContainer = styled.div`  
  58.   width: 100%;  
  59.   max-width: 1000px;  
  60.   display: flex;  
  61.   justify-content: center;  
  62.   @media screen and (max-width: 820px) {  
  63.     padding-top: 32px;  
  64.   }  
  65. `;  
  66. export const FooterLinksWrapper = styled.div`  
  67.   display: flex;  
  68.   @media screen and (max-width: 820px) {  
  69.     flex-direction: column;  
  70.   }  
  71. `;  
  72. export const FooterLinkItems = styled.div`  
  73.   display: flex;  
  74.   flex-direction: column;  
  75.   align-items: flex-start;  
  76.   margin: 16px;  
  77.   text-align: left;  
  78.   width: 160px;  
  79.   box-sizing: border-box;  
  80.   color: #fff;  
  81.   @media screen and (max-width: 420px) {  
  82.     margin: 0;  
  83.     padding: 10px;  
  84.     width: 100%;  
  85.   }  
  86. `;  
  87. export const FooterLinkTitle = styled.h2`  
  88.   margin-bottom: 16px;  
  89. `;  
  90. export const FooterLink = styled(Link)`  
  91.   color: #fff;  
  92.   text-decoration: none;  
  93.   margin-bottom: 0.5rem;  
  94.   &:hover {  
  95.     color: #0467fb;  
  96.     transition: 0.3s ease-out;  
  97.   }  
  98. `;  
  99. export const SocialMedia = styled.section`  
  100.   max-width: 1000px;  
  101.   width: 100%;  
  102. `;  
  103. export const SocialMediaWrap = styled.div`  
  104.   display: flex;  
  105.   justify-content: space-between;  
  106.   align-items: center;  
  107.   width: 90%;  
  108.   max-width: 1000px;  
  109.   margin: 40px auto 0 auto;  
  110.   @media screen and (max-width: 820px) {  
  111.     flex-direction: column;  
  112.   }  
  113. `;  
  114. export const SocialLogo = styled(Link)`  
  115.   color: #fff;  
  116.   justify-self: start;  
  117.   cursor: pointer;  
  118.   text-decoration: none;  
  119.   font-size: 2rem;  
  120.   display: flex;  
  121.   align-items: center;  
  122.   margin-bottom: 16px;  
  123. `;  
  124. export const SocialIcon = styled(Fa500Px)`  
  125.   margin-right: 10px;  
  126. `;  
  127. export const WebsiteRights = styled.small`  
  128.   color: #fff;  
  129.   margin-bottom: 16px;  
  130. `;  
  131. export const SocialIcons = styled.div`  
  132.   display: flex;  
  133.   justify-content: space-between;  
  134.   align-items: center;  
  135.   width: 240px;  
  136. `;  
  137. export const SocialIconLink = styled.a`  
  138.   color: #fff;  
  139.   font-size: 24px;  
  140. `;  
This file contains the style-components and everything that will make our web application look good.
 
“InfoSection.js” 
  1. import React from "react";  
  2. import { Container } from "../../globalStyles";  
  3. import {  
  4.   InfoSec,  
  5.   InfoRow,  
  6.   InfoColumn,  
  7.   TextWrapper,  
  8.   TopLine,  
  9.   Heading,  
  10.   Subtitle,  
  11.   ImgWrapper,  
  12.   Img,  
  13. } from "./InfoSection.elements";  
  14. function InfoSection({  
  15.   primary,  
  16.   lightBg,  
  17.   topLine,  
  18.   lightTopLine,  
  19.   lightText,  
  20.   lightTextDesc,  
  21.   headline,  
  22.   description,  
  23.   img,  
  24.   alt,  
  25.   imgStart,  
  26.   start,  
  27. }) {  
  28.   return (  
  29.     <>  
  30.       <InfoSec lightBg={lightBg}>  
  31.         <Container>  
  32.           <InfoRow imgStart={imgStart}>  
  33.             <InfoColumn>  
  34.               <TextWrapper>  
  35.                 <TopLine lightTopLine={lightTopLine}>{topLine}</TopLine>  
  36.                 <Heading lightText={lightText}>{headline}</Heading>  
  37.                 <Subtitle lightTextDesc={lightTextDesc}>{description}</Subtitle>  
  38.               </TextWrapper>  
  39.             </InfoColumn>  
  40.             <InfoColumn>  
  41.               <ImgWrapper start={start}>  
  42.                 <Img src={img} alt={alt} />  
  43.               </ImgWrapper>  
  44.             </InfoColumn>  
  45.           </InfoRow>  
  46.         </Container>  
  47.       </InfoSec>  
  48.     </>  
  49.   );  
  50. }  
  51. export default InfoSection;  
This component is for organizing the information section so that it is easy to change the content of the user data when every user wanted.
 
“InfoSection.elements.js” 
  1. import styled from "styled-components";  
  2. export const InfoSec = styled.div`  
  3.   color: #fff;  
  4.   padding: 160px 0;  
  5.   background: ${({ lightBg }) => (lightBg ? "#fff" : "#101522")};  
  6. `;  
  7. export const InfoRow = styled.div`  
  8.   display: flex;  
  9.   margin: 0 -15px -15px -15px;  
  10.   flex-wrap: wrap;  
  11.   align-items: center;  
  12.   flex-direction: ${({ imgStart }) => (imgStart ? "row-reverse" : "row")};  
  13. `;  
  14. export const InfoColumn = styled.div`  
  15.   margin-bottom: 15px;  
  16.   padding-right: 15px;  
  17.   padding-left: 15px;  
  18.   flex: 1;  
  19.   max-width: 50%;  
  20.   flex-basis: 50%;  
  21.   @media screen and (max-width: 768px) {  
  22.     max-width: 100%;  
  23.     flex-basis: 100%;  
  24.     display: flex;  
  25.     justify-content: center;  
  26.   }  
  27. `;  
  28. export const TextWrapper = styled.div`  
  29.   max-width: 540px;  
  30.   padding-top: 0;  
  31.   padding-bottom: 60px;  
  32.   @media screen and (max-width: 768px) {  
  33.     padding-bottom: 65px;  
  34.   }  
  35. `;  
  36. export const ImgWrapper = styled.div`  
  37.   max-width: 555px;  
  38.   display: flex;  
  39.   justify-content: ${({ start }) => (start ? "flex-start" : "flex-end")};  
  40. `;  
  41. export const TopLine = styled.div`  
  42.   color: ${({ lightTopLine }) => (lightTopLine ? "#a9b3c1" : "#4B59F7")};  
  43.   font-size: 18px;  
  44.   line-height: 16px;  
  45.   font-weight: 700;  
  46.   letter-spacing: 1.4px;  
  47.   margin-bottom: 16px;  
  48. `;  
  49. export const Img = styled.img`  
  50.   padding-right: 0;  
  51.   border: 0;  
  52.   max-width: 100%;  
  53.   vertical-align: middle;  
  54.   display: inline-block;  
  55.   max-height: 500px;  
  56. `;  
  57. export const Heading = styled.h1`  
  58.   margin-bottom: 24px;  
  59.   font-size: 48px;  
  60.   line-height: 1.1;  
  61.   font-weight: 600;  
  62.   color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#1c2237")};  
  63. `;  
  64. export const Subtitle = styled.p`  
  65.   max-width: 440px;  
  66.   margin-bottom: 35px;  
  67.   font-size: 18px;  
  68.   line-height: 24px;  
  69.   color: ${({ lightTextDesc }) => (lightTextDesc ? "#a9b3c1" : "#1c2237")};  
  70. `;  
This file contains style components for InfoSection.
 
“Internship.js” 
  1. import React from "react";  
  2. import { VscBookmark } from "react-icons/vsc";  
  3. import { IconContext } from "react-icons/lib";  
  4. import {  
  5.   InternshipSection,  
  6.   InternshipWrapper,  
  7.   InternshipHeading,  
  8.   InternshipContainer,  
  9.   InternshipCard,  
  10.   InternshipCardInfo,  
  11.   InternshipCardIcon,  
  12.   InternshipCardPlan,  
  13.   InternshipCardLength,  
  14.   InternshipCardFeatures,  
  15.   InternshipCardFeature,  
  16. } from "./Internship.elements";  
  17. function Internship() {  
  18.   return (  
  19.     <IconContext.Provider value={{ color: "#a9b3c1", size: 45 }}>  
  20.       <InternshipSection>  
  21.         <InternshipWrapper>  
  22.           <InternshipHeading>Internship</InternshipHeading>  
  23.           <InternshipContainer>  
  24.             <InternshipCard>  
  25.               <InternshipCardInfo>  
  26.                 <InternshipCardIcon>  
  27.                   <VscBookmark />  
  28.                 </InternshipCardIcon>  
  29.                 <InternshipCardPlan>In-Plant Trainee</InternshipCardPlan>  
  30.                 <InternshipCardLength>  
  31.                   ISRO-ISTRAC,Bangalore,Karnataka  
  32.                 </InternshipCardLength>  
  33.                 <InternshipCardFeatures>  
  34.                   <InternshipCardFeature>  
  35.                     Prepared reports and technical documentation of day-to-day  
  36.                     activities.  
  37.                   </InternshipCardFeature>  
  38.                   <InternshipCardFeature>  
  39.                     Oversaw telecommunication network,including  
  40.                     telephones,office,equipment,internet.  
  41.                   </InternshipCardFeature>  
  42.                   <InternshipCardFeature>  
  43.                     Reviewed and interpreted facility orders,network design  
  44.                     orders,and circuit layout orders.  
  45.                   </InternshipCardFeature>  
  46.                   <InternshipCardFeature>  
  47.                     Accurately read,understood,and carried out written  
  48.                     instructions.  
  49.                   </InternshipCardFeature>  
  50.                   <InternshipCardFeature>  
  51.                     Used confidential software to process data compiled from  
  52.                     field for performance.  
  53.                   </InternshipCardFeature>  
  54.                 </InternshipCardFeatures>  
  55.               </InternshipCardInfo>  
  56.             </InternshipCard>  
  57.             <InternshipCard>  
  58.               <InternshipCardInfo>  
  59.                 <InternshipCardIcon>  
  60.                   <VscBookmark />  
  61.                 </InternshipCardIcon>  
  62.                 <InternshipCardPlan>Intern</InternshipCardPlan>  
  63.                 <InternshipCardLength>  
  64.                   Inkers.ai,Bangalore,Karnataka  
  65.                 </InternshipCardLength>  
  66.                 <InternshipCardFeatures>  
  67.                   <InternshipCardFeature>  
  68.                     Gained knowledge in the field of machine learning and  
  69.                     artificial intelligence.  
  70.                   </InternshipCardFeature>  
  71.                   <InternshipCardFeature>  
  72.                     Trained a model for facial recognition with an accuracy of  
  73.                     99.8%.  
  74.                   </InternshipCardFeature>  
  75.                   <InternshipCardFeature>  
  76.                     Worked with APIs like Keras with backend TensorFlow.  
  77.                   </InternshipCardFeature>  
  78.                   <InternshipCardFeature>  
  79.                     Worked with dataset such as Image-net,cifar 10,tiny  
  80.                     image-net  
  81.                   </InternshipCardFeature>  
  82.                   <InternshipCardFeature>  
  83.                     Collected raw data by conducting a survey, created a new  
  84.                     dataset by filtering the raw data.  
  85.                   </InternshipCardFeature>  
  86.                 </InternshipCardFeatures>  
  87.               </InternshipCardInfo>  
  88.             </InternshipCard>  
  89.             <InternshipCard>  
  90.               <InternshipCardInfo>  
  91.                 <InternshipCardIcon>  
  92.                   <VscBookmark />  
  93.                 </InternshipCardIcon>  
  94.                 <InternshipCardPlan>Intern</InternshipCardPlan>  
  95.                 <InternshipCardLength>  
  96.                   BSNL,Port Blair,Andaman & Nicobar islands  
  97.                 </InternshipCardLength>  
  98.                 <InternshipCardFeatures>  
  99.                   <InternshipCardFeature>  
  100.                     Gained knowledge in the field of networking and how  
  101.                     connections are provided to users.  
  102.                   </InternshipCardFeature>  
  103.                   <InternshipCardFeature>  
  104.                     Got to know the working of mobile networking and landline  
  105.                     networking.  
  106.                   </InternshipCardFeature>  
  107.                   <InternshipCardFeature>  
  108.                     Worked with OFCs and how they are used in data transferring  
  109.                     from servers to users.  
  110.                   </InternshipCardFeature>  
  111.                   <InternshipCardFeature>  
  112.                     Got to know how data centers work and control of severs with  
  113.                     traffic.  
  114.                   </InternshipCardFeature>  
  115.                   <InternshipCardFeature>  
  116.                     Prepared report for the day-to-day activities.  
  117.                   </InternshipCardFeature>  
  118.                 </InternshipCardFeatures>  
  119.               </InternshipCardInfo>  
  120.             </InternshipCard>  
  121.           </InternshipContainer>  
  122.         </InternshipWrapper>  
  123.       </InternshipSection>  
  124.     </IconContext.Provider>  
  125.   );  
  126. }  
  127. export default Internship;  
This file contains the details for the internship done by the user.
 
“Internship.elements.js” 
  1. import { Link } from "react-router-dom";  
  2. import styled from "styled-components";  
  3. export const InternshipSection = styled.div`  
  4.   padding: 100px 0 160px;  
  5.   display: flex;  
  6.   flex-direction: column;  
  7.   justify-content: center;  
  8.   background: #4b59f7;  
  9. `;  
  10. export const InternshipWrapper = styled.div`  
  11.   display: flex;  
  12.   flex-direction: column;  
  13.   align-items: center;  
  14.   margin: 0 auto;  
  15.   @media screen and (max-width: 960px) {  
  16.     margin: 0 30px;  
  17.     display: flex;  
  18.     flex-direction: column;  
  19.     align-items: center;  
  20.   }  
  21. `;  
  22. export const InternshipHeading = styled.h1`  
  23.   color: #fff;  
  24.   font-size: 48px;  
  25.   margin-bottom: 24px;  
  26. `;  
  27. export const InternshipContainer = styled.div`  
  28.   display: flex;  
  29.   justify-content: center;  
  30.   align-items: center;  
  31.   @media screen and (max-width: 960px) {  
  32.     display: flex;  
  33.     flex-direction: column;  
  34.     justify-content: center;  
  35.     align-items: center;  
  36.     width: 100%;  
  37.   }  
  38. `;  
  39. export const InternshipCard = styled(Link)`  
  40.   background: #242424;  
  41.   box-shadow: 0 6px 20px rgba(56, 125, 255, 0.2);  
  42.   width: 280px;  
  43.   height: 570px;  
  44.   text-decoration: none;  
  45.   border-radius: 4px;  
  46.   &:nth-child(2) {  
  47.     margin: 24px;  
  48.   }  
  49.   &:hover {  
  50.     transform: scale(1.06);  
  51.     transition: all 0.3s ease-out;  
  52.     color: #1c2237;  
  53.   }  
  54.   @media screen and (max-width: 960px) {  
  55.     width: 90%;  
  56.     &:hover {  
  57.       transform: none;  
  58.     }  
  59.   }  
  60. `;  
  61. export const InternshipCardInfo = styled.div`  
  62.   display: flex;  
  63.   flex-direction: column;  
  64.   height: 500px;  
  65.   padding: 24px;  
  66.   align-items: center;  
  67.   color: #fff;  
  68. `;  
  69. export const InternshipCardIcon = styled.div`  
  70.   margin: 24px 0;  
  71. `;  
  72. export const InternshipCardPlan = styled.h3`  
  73.   margin-bottom: 5px;  
  74.   font-size: 24px;  
  75. `;  
  76. export const InternshipCardCost = styled.h4`  
  77.   font-size: 40px;  
  78. `;  
  79. export const InternshipCardLength = styled.p`  
  80.   font-size: 14px;  
  81.   margin-bottom: 24px;  
  82. `;  
  83. export const InternshipCardFeatures = styled.ul`  
  84.   margin: 16px 0 32px;  
  85.   list-style: none;  
  86.   display: flex;  
  87.   flex-direction: column;  
  88.   align-items: center;  
  89.   color: #a9b3c1;  
  90. `;  
  91. export const InternshipCardFeature = styled.li`  
  92.   margin-bottom: 10px;  
  93. `;  
This file contains the style-components for the Internship component.
 
“Navbar.js” 
  1. import React, { useState, useEffect } from "react";  
  2. import { FaBars, FaTimes } from "react-icons/fa";  
  3. import { IconContext } from "react-icons/lib";  
  4. import {  
  5.   Nav,  
  6.   NavbarContainer,  
  7.   NavLogo,  
  8.   NavIcon,  
  9.   MobileIcon,  
  10.   NavMenu,  
  11.   NavItem,  
  12.   NavLinks,  
  13. } from "./Navbar.elements";  
  14. function Navbar() {  
  15.   const [click, setClick] = useState(false);  
  16.   const [button, setButton] = useState(true);  
  17.   const handleClick = () => setClick(!click);  
  18.   const closeMobileMenu = () => setClick(false);  
  19.   return (  
  20.     <>  
  21.       <IconContext.Provider value={{ color: "#fff" }}>  
  22.         <Nav>  
  23.           <NavbarContainer>  
  24.             <NavLogo to="/" onClick={closeMobileMenu}>  
  25.               <NavIcon />  
  26.               Vipul Kumar Dubey  
  27.             </NavLogo>  
  28.             <MobileIcon onClick={handleClick}>  
  29.               {click ? <FaTimes /> : <FaBars />}  
  30.             </MobileIcon>  
  31.             <NavMenu onClick={handleClick} click={click}>  
  32.               <NavItem>  
  33.                 <NavLinks to="/" onClick={closeMobileMenu}>  
  34.                   Home  
  35.                 </NavLinks>  
  36.               </NavItem>  
  37.               <NavItem>  
  38.                 <NavLinks to="/WorkHistory" onClick={closeMobileMenu}>  
  39.                   Work History  
  40.                 </NavLinks>  
  41.               </NavItem>  
  42.               <NavItem>  
  43.                 <NavLinks to="/Skills" onClick={closeMobileMenu}>  
  44.                   Skills  
  45.                 </NavLinks>  
  46.               </NavItem>  
  47.             </NavMenu>  
  48.           </NavbarContainer>  
  49.         </Nav>  
  50.       </IconContext.Provider>  
  51.     </>  
  52.   );  
  53. }  
  54. export default Navbar;  
This file contains the represented part of the data that should be shown in the navigation bar.
 
“Navbar.elements.js” 
  1. import styled from "styled-components";  
  2. import { Fa500Px } from "react-icons/fa";  
  3. import { Link } from "react-router-dom";  
  4. import { Container } from "../../globalStyles";  
  5. export const Nav = styled.nav`  
  6.   background: #101522;  
  7.   height: 80px;  
  8.   display: flex;  
  9.   justify-content: center;  
  10.   align-items: center;  
  11.   font-size: 1.2rem;  
  12.   position: sticky;  
  13.   top: 0;  
  14.   z-index: 999;  
  15. `;  
  16. export const NavbarContainer = styled(Container)`  
  17.   display: flex;  
  18.   justify-content: space-between;  
  19.   height: 80px;  
  20.   ${Container}  
  21. `;  
  22. export const NavLogo = styled(Link)`  
  23.   color: #fff;  
  24.   justify-self: flex-start;  
  25.   cursor: pointer;  
  26.   text-decoration: none;  
  27.   font-size: 2rem;  
  28.   display: flex;  
  29.   align-items: center;  
  30. `;  
  31. export const NavIcon = styled(Fa500Px)`  
  32.   margin-right: 0.5rem;  
  33. `;  
  34. export const MobileIcon = styled.div`  
  35.   display: none;  
  36.   @media screen and (max-width: 960px) {  
  37.     display: block;  
  38.     position: absolute;  
  39.     top: 0;  
  40.     right: 0;  
  41.     transform: translate(-100%, 60%);  
  42.     font-size: 1.8rem;  
  43.     cursor: pointer;  
  44.   }  
  45. `;  
  46. export const NavMenu = styled.ul`  
  47.   display: flex;  
  48.   align-items: center;  
  49.   list-style: none;  
  50.   text-align: center;  
  51.   @media screen and (max-width: 960px) {  
  52.     display: flex;  
  53.     flex-direction: column;  
  54.     width: 100%;  
  55.     height: 90vh;  
  56.     position: absolute;  
  57.     top: 80px;  
  58.     left: ${({ click }) => (click ? 0 : "-100%")};  
  59.     opacity: 1;  
  60.     transition: all 0.5s ease;  
  61.     background: #101522;  
  62.   }  
  63. `;  
  64. export const NavItem = styled.li`  
  65.   height: 80px;  
  66.   border-bottom: 2px solid transparent;  
  67.   &:hover {  
  68.     border-bottom: 2px solid #4b59f7;  
  69.   }  
  70.   @media screen and (max-width: 960px) {  
  71.     width: 100%;  
  72.     &:hover {  
  73.       border: none;  
  74.     }  
  75.   }  
  76. `;  
  77. export const NavItemBtn = styled.li`  
  78.   @media screen and (max-width: 960px) {  
  79.     display: flex;  
  80.     justify-content: center;  
  81.     align-items: center;  
  82.     width: 100%;  
  83.     height: 120px;  
  84.   }  
  85. `;  
  86. export const NavLinks = styled(Link)`  
  87.   color: #fff;  
  88.   display: flex;  
  89.   align-items: center;  
  90.   text-decoration: none;  
  91.   padding: 0.5rem 1rem;  
  92.   height: 100%;  
  93.   @media screen and (max-width: 960px) {  
  94.     text-align: center;  
  95.     padding: 2rem;  
  96.     width: 100%;  
  97.     display: table;  
  98.     &:hover {  
  99.       color: #4b59f7;  
  100.       transition: all 0.3s ease;  
  101.     }  
  102.   }  
  103. `;  
  104. export const NavBtnLink = styled(Link)`  
  105.   display: flex;  
  106.   justify-content: center;  
  107.   align-items: center;  
  108.   text-decoration: none;  
  109.   padding: 8px 16px;  
  110.   height: 100%;  
  111.   width: 100%;  
  112.   border: none;  
  113.   outline: none;  
  114. `;  
This file contains styled-components for Navbar components.
 
“./components/index.js” 
  1. export { default as Navbar } from './Navbar/Navbar';    
  2. export { default as Footer } from './Footer/Footer';    
  3. export { default as InfoSection } from './InfoSection/InfoSection';    
  4. export { default as Internship } from './Internship/Internship';    
This file exports the component by giving them an alias that is easy to use on multiple pages.
 
Now let us move to the next part, that is pages.
 
Every page contains 2 files that are “data.js” and “pagename.js”
 
Let us begin.
 
“Home.js” 
  1. import React from "react";  
  2. import { homeObjOne, homeObjTwo, homeObjThree, homeObjFour } from "./Data";  
  3. import { InfoSection, Internship } from "../../components";  
  4. function Home() {  
  5.   return (  
  6.     <>  
  7.       <InfoSection {...homeObjOne} />  
  8.       <InfoSection {...homeObjThree} />  
  9.       <InfoSection {...homeObjTwo} />  
  10.       <Internship />  
  11.       <InfoSection {...homeObjFour} />  
  12.     </>  
  13.   );  
  14. }  
  15. export default Home;  
This file imports the data object from the data.js and presents that on the Homepage.
 
”Data.js” 
  1. export const homeObjOne = {  
  2.   primary: true,  
  3.   lightBg: false,  
  4.   lightTopLine: true,  
  5.   lightText: true,  
  6.   lightTextDesc: true,  
  7.   topLine: "Brief Introduction",  
  8.   headline: "Vipul Kumar Dubey",  
  9.   description:  
  10.     "I am a recent graduate in Computer Science Engineering.Beginner in the field of Data Science|Web developer.Let us work together.",  
  11. };  
  12. export const homeObjTwo = {  
  13.   primary: true,  
  14.   lightBg: false,  
  15.   lightTopLine: true,  
  16.   lightText: true,  
  17.   lightTextDesc: true,  
  18.   topLine: "StartUp",  
  19.   headline: "CO-Founder of JASOP tech",  
  20.   description:  
  21.     "In my final year of undergraduation I and my friend had an idea to teach students at a very affordable price and provide them a good framework to work on and other than that the mentor who is guiding the student is also able to monitor the growth of there individual students and provide special care to the required one. We started as 2 members and made 3 teams of 5-7 people in each team and led them in the various technical and non-technical fields and till February 15 we have taken more than 20 demo sessions for more than 250 students and till January we have taught more than 100 students. ",  
  22. };  
  23. export const homeObjThree = {  
  24.   primary: false,  
  25.   lightBg: true,  
  26.   lightTopLine: false,  
  27.   lightText: false,  
  28.   lightTextDesc: false,  
  29.   topLine: "This is ME",  
  30.   headline: "Working Professional",  
  31.   description:  
  32.     "A self-motivated, hard-working, Computer Science Engineering. I seek a working position that will allow me to use my knowledge and potential to it's full ability. I am a Technology Enthusiast with a firm belief in the power of technology to make a significant positive impact in the world. I love to keep myself updated with all the latest technologies and trends in the software industry. I enjoy motivating and being part of a productive team and I am equally comfortable with working on my own initiative. I have hands-on experience with ReactJs and some other frontend frameworks. I have been using Python data science libraries like pandas, scikit-learn, NumPy from time to time in my projects. I have completed projects and courses to prove my enthusiasm.",  
  33. };  
  34. export const homeObjFour = {  
  35.   primary: true,  
  36.   lightBg: false,  
  37.   lightTopLine: true,  
  38.   lightText: true,  
  39.   lightTextDesc: true,  
  40.   topLine: "Open to work",  
  41.   headline: "Right now I am looking for a frontend developer post",  
  42.   description:  
  43.     "As I have gained some Skill in the field of frontend and i am willing to proceed my career as frontend developer.",  
  44. };  
This file creates a data object and passes that to the Home.js file for execution.
 
“Skills.js” 
  1. import React from "react";  
  2. import { InfoSection } from "../../components";  
  3. import { homeObjOne, homeObjTwo } from "./Data";  
  4. function Skills() {  
  5.   return (  
  6.     <>  
  7.       <InfoSection {...homeObjOne} />  
  8.       <InfoSection {...homeObjTwo} />  
  9.     </>  
  10.   );  
  11. }  
  12. export default Skills;  
Every file in the page folder that has filename.js is used for exporting the data object and execute them and present them.
 
“Data.js” 
  1. export const homeObjOne = {  
  2.   lightBg: true,  
  3.   lightText: false,  
  4.   lightTopLine: false,  
  5.   lightTextDesc: false,  
  6.   topLine: "My Profile",  
  7.   headline: "Details",  
  8.   description:  
  9.     "Name:Vipul Kumar Dubey DOB: April 30,1999 Phone:+91 8861460749(Whatsapp)|+91 9474222308 Email:[email protected]",  
  10. };  
  11. export const homeObjTwo = {  
  12.   lightBg: false,  
  13.   lightText: true,  
  14.   lightTopLine: true,  
  15.   lightTextDesc: true,  
  16.   topLine: "Skills",  
  17.   headline:  
  18.     "Some skills I have gained during my under graduate and my Internship.",  
  19.   description:  
  20.     "C/C++ this are the primary or the basic language. Python was the language I used for my AI projects. Keras API and TensorFlow as the backend was the most useful tool for me in my machine learning projects. I also have some basic knowledge of MYSQL and have a good command of HTML, CSS, and JavaScript.Other than this I also have some command over React Framework.",  
  21. };  
  22. export const homeObjThree = {  
  23.   lightBg: true,  
  24.   lightText: false,  
  25.   lightTextDesc: false,  
  26.   topLine: "Skills",  
  27.   headline:  
  28.     "Some skills I have gained during my under graduate and my Internship.", // more skills to add  
  29.   description: "",  
  30. };  
  31. export const homeObjFour = {  
  32.   lightBg: false,  
  33.   lightText: true,  
  34.   lightTextDesc: true,  
  35.   topLine: "DATA ANALYTICS",  
  36.   headline: "Every transaction is stored on our secure cloud database",  
  37.   description:  
  38.     "Never ever have to worry again about saved reciepts. We store your data, so you can access it anytime.",  
  39. };  
Every data.js file in the pages has the same function. They are used to create data objects and pass that to the pagename.js file for execution.
 
“Work.js” 
  1. import React from "react";  
  2. import { InfoSection, Internship } from "../../components";  
  3. import { homeObjOne, homeObjThree, homeObjTwo, homeObjFour } from "./Data";  
  4. function Work() {  
  5.   return (  
  6.     <>  
  7.       <Internship />  
  8.       <InfoSection {...homeObjOne} />  
  9.       <InfoSection {...homeObjThree} />  
  10.       <InfoSection {...homeObjTwo} />  
  11.       <InfoSection {...homeObjFour} />  
  12.     </>  
  13.   );  
  14. }  
  15. export default Work;  
“Data.js” 
  1. export const homeObjOne = {  
  2.   lightBg: false,  
  3.   lightText: true,  
  4.   lightTextDesc: true,  
  5.   topLine: "Project",  
  6.   headline: "Real-time Face Recognition Using Deep Learning",  
  7.   description:  
  8.     "Developed a repository consisting of various Deep learning methods for Real-time multiple face recognition.",  
  9. };  
  10. export const homeObjTwo = {  
  11.   lightBg: false,  
  12.   lightText: true,  
  13.   lightTextDesc: true,  
  14.   topLine: "Project",  
  15.   headline: "Bank Account Management System",  
  16.   description:  
  17.     "A Banking application that manages customer account and provide interest according to the terms of bank.",  
  18. };  
  19. export const homeObjThree = {  
  20.   lightBg: true,  
  21.   lightText: false,  
  22.   lightTextDesc: false,  
  23.   topLine: "Project",  
  24.   headline: "Super fast and simple onboarding process",  
  25.   description:  
  26.     "Get everything set up and ready in under 10 minutes. All you need to do is add your information and you're ready to go.",  
  27. };  
  28. export const homeObjFour = {  
  29.   lightBg: true,  
  30.   lightText: false,  
  31.   lightTextDesc: false,  
  32.   topLine: "Project",  
  33.   headline: "Automating Atari Games Using Reinforcement Learning.",  
  34.   description:  
  35.     "Developed Cartpole,Frozen-lake and openAITaxi game using Deep Q-Learning algorithm with OpenAIgym environments.",  
  36. };  
We have created all the components and pages that are required for our web application.
 
Now let's export all the file to once file and execute it.
 
“App.js” 
  1. import React from "react";  
  2. import GlobalStyle from "./globalStyles";  
  3. import Home from "./pages/HomePage/Home";  
  4. import Work from "./pages/WorkHistory/Work";  
  5. import Skills from "./pages/Skills/Skills";  
  6. import { BrowserRouter as Router, Switch, Route } from "react-router-dom";  
  7. import ScrollToTop from "./components/ScrollToTop";  
  8. import { Navbar, Footer } from "./components";  
  9. function App() {  
  10.   return (  
  11.     <Router>  
  12.       <GlobalStyle />  
  13.       <ScrollToTop />  
  14.       <Navbar />  
  15.       <Switch>  
  16.         <Route path="/" exact component={Home} />  
  17.         <Route path="/WorkHistory" component={Work} />  
  18.         <Route path="/Skills" component={Skills} />  
  19.       </Switch>  
  20.       <Footer />  
  21.     </Router>  
  22.   );  
  23. }  
  24. export default App;  
Now that we have exported all the files and pages to one single file(root file) lets us send this file to the file that is recognized by the browser.
 
“./src/index.js” 
  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3. import App from './App';  
  4. ReactDOM.render(<App />, document.getElementById('root'));  
Let us see how our web application looks.
 
 
 
 
 
 
 
Now let us see how our web application looks on a small screen or phone.
 
 
This change we get when the screen size is reduced or the phone is due to media quires we added in the style components for every component.
 
 
 
 
 
 

Conclusion

 
In this article, we created a web application using React. In this article, you got your hand dirty by doing some hand on.
 
This article will help you to build your portfolio using this and do some changes according to your preference.


Similar Articles