Build a Portfolio Single Page Application Using React JS

 If you are a newbie and struggling to get commenced with React JS, Read my preceding article on How I found out React JS as a noob — Ultimate React JS Starter Guide.

Please ensure you're carried out with the conditions of React JS which I’ve mentioned in my preceding article.

Ok, so in this big article, you’ll analyze React JS using Building a complete Portfolio Website as a Single Page Application (SPA).
This is a “Do It Along” kind of article. You’ll virtually have an amazing result if you construct along.

Here is the mission GitHub repository, you could clone or download the complete undertaking.
Things you’ll soak in:

• Creating and implementing custom Components.
• Working with external additives.
• Working with Props.
• Working with States.
• Dynamic Rendering.
• React Routing.
• And Using CSS in React JS.

Let’s understand some concepts…

What is a “ Component “ in React JS?
React follows Component architecture, which means that every part of an internet app or website is part, all are made one by one and finally equipped into a parent component that's then rendered.

Follow for more React js Online Training India

As within the photograph sidebar, header, chart all are separate additives fixed into one single parent issue.
A Component is a Javascript File, for example, you want to create a sidebar component then you need to create a “Sidebar.Js” file.

A factor may be of two types:-

Sub-Component

A sub-factor is a part that is living inside of another component.

Parent Component
A Parent aspect is a component in which sub-additives is living in.
How does a “Component” appear like in code?
The below code snippet is the boilerplate code for any issue. To create an element just replica this code and replace “YourComponentName” to something call you to need for the component.

“ YourComponentName.Js ”

Now let’s get started with Building the portfolio website the usage of React JS
If “Node JS” isn't always installed, Download Node JS and set up it.
I use Visual Studio Code for most of my React JS project and I highly advocate you to use.

import React, { Component } from 'react'class YourComponentName extends Component {render() {return (<div>{/* Your Html/JSX code goes here */}<h1>This is my component</h1></div>)}}export default YourComponentName

All the components have a parent component, it might be either “App.js” or some other component.

import React, { Component } from 'react';

That’s a common line of code you’ll see in almost all the components everywhere. In that, we are importing React and Component class from the ‘react’ module. Which enables us to create custom components.

class YourComponentName extends Component {

This is a class component, replace “YourComponentName” to whatever name you want.

render() {return (<div><h1>This is my component</h1></div>)

The render() method along with the return() method renders the content into the DOM.

and for now “YourComponentName.js” component will return “This is my component”.

Note: A component must return only one Node meaning a single <div> and everything inside it </div> , or a single tag (element).

export default YourComponentName

the above line of code is very important, make sure you add it compulsory, “export” keyword defines what are all the methods(functions) should be accessible to the component importing this component.

Now let’s get started with Building the portfolio website using React JS

If “Node JS” is not installed, Download Node JS and install it.

I use Visual Studio Code for most of my React JS project and I highly recommend you to use.

Now, create a new folder, name it whatever you want.

• Open vs code.
• Press ctrl-shift-n (cmd-shift-n) to open a new vscode window.
• within the new window, click on the “Open Folder” blue button on the Explorer pane,
• Browse and pick out the folder you created.
• Go to View → Terminal to open a terminal internal vscode.

After that, create a React JS undertaking the usage of “create-react-app” CLI, now name the project whatever you need for now I’ll call it as “Portfolio_Website_ReactJS”.

$ npx create-react-app Portfolio_Website_ReactJS

after you get the message “Happy Hacking”, move inside the project directory

$ cd Portolio_Website_ReactJS

Folder structure for this project!

Initial folder structure

Inside the “src” folder, create three new folders and name them “components”, “contents”, and “img” respectively.

Inside the “Components” folder

Create the below components as javascript files in the “ components ” folder.

• Navbar.jsThis component is the sidebar and will hold a set of “NavItems” components(Home, About, Education, Skills, Contact). It’s just a pink and blue gradient box.

• NavItem.jsThis component will be the navigation items (e.g. Home, About, Education,…).

• Social.js
  This component holds the Social media icon with links.

Social component preview

• Widecard.jsThis component will hold the Education Details (as shown in the final result GIF above).

If you want to learn more about Reactjs, then The Complete React js Online Training Hyderabad is a great course, to begin with.