Portfolio is one of the best things a developer can make for himself as it showcases all the knowledge he has about that language in which he made the portfolio and all of his past works with some additional info.
Making a portfolio in HTML and CSS is fine, but making it in React will give it a boost which it requires to leave an impact and showcase the level of skills that we have as React developers.
It will also decrease the amount of time and effort required to make with HTML and CSS as we will be –
- Dividing the whole app into components makes it easier to handle and debug
- Using data dynamically and not hard-coding it.
In this blog, we will make a Portfolio in React with all the points covered in the above statements.
Index
- Getting Started
- Creating the React App
- Explaining the Structure of App
- Working on Components
- Data Component
- Hero Component
- About Component
- Services Component
- Projects Component
- Contact Component
Getting Started
To make a portfolio in React, we will most definitely be needing the latest versions of npm and node.js installed with create-react-app to reduce the time.
For styling our App, we will use Bootstrap5 with vanilla CSS, and for icons that will be used, font-awesome will be used.
A portfolio should contain all our skills and previous work which according to us is the best and can be showcased with little information about us and a place to contact us for further details.
We will all make this in our app with React with dynamic data. Before getting started, this is what our portfolio will look like.
The CSS part will not be discussed here as we want you to do that part yourselves.
Let's begin….
What we will learn?
- How to write cleaner code in React
- How to make reusable components to increase the efficiency of our app
- How to print different types of data dynamically - data includes strings, font-awesome icons, styles, links, and bootstrap classes
Creating the React App - Portfolio in React
It's very easy to create a React App - just go to your working directory in any of your preferred IDE's and enter the following command in the terminal.
npx create-react-app portfolio-in React
If you are unsure how to properly set up a create-react-app project you can refer to the official guide here at create-react-app-dev.
After the setup, run npm start in the same terminal to start the localhost:3000 where our React app will be hosted. We can also see all our changes there.
Read the whole post from its official link
Top comments (0)