How to create your portfolio website using React.js

Dhruv Barochiya
Mar 29, 2019 · 8 min read
Image for post
Image for post

After my friends canceled our weekend plans 😒, I was looking for something to kill time and finally ended up with a plan to create a portfolio website after going through my long pending list of Wish-To-Dothings.

Many hours of searching for technologies and templates later, I ended up creating this website using React.js and deploying it using Github pages. You can find the code for the website here (It’s called a ‘web-app’ technically, but for this article, I will be referring to it as a ‘website’ … I hope that’s ok 😜).

What you will learn

  • Some basic concepts of React.js

Some concepts you need to know before we start ..

Note — feel free to skip this part if you are already familiar with basic concepts of React.js and React Components.

Note — these points will provide a very basic idea of the React world. I highly recommend you to study more about React from the documentation and get hands-on with the help of freeCodeCamp.

What is React.js >

For now, it is enough to know that React.js is the JavaScript library used for building UI components. It was created by the engineers of Facebook and nowadays, it is rocking the JavaScript world..

What is a React Component >

React lets you define components as a class or a function. You can provide optional inputs to the components called ‘props’.

Components let you split up the UI into independent sections like header, footer, and body. Each component will work independently so any individual component can be rendered independently into the ReactDOMwithout affecting the whole page.

It also comes with ‘lifecycle methods’ which let you define pieces of code you want to execute according to the state of the component like mounting, rendering, updating and un-mounting.

React components come with their own trade-offs. For example, we can reuse a component by exporting it to other components, but sometimes it gets confusing to handle multiple components talking and triggering renders for each other.

this is how a component would look like!

react component structure

What is GitHub Pages >

With GitHub Pages, you can easily deploy your site using GitHub for free and without the need to set up any infrastructure. They have provided modules so that you don’t have to worry about many things. If you stick around till the end you’ll see that it works like MAGIC!

Before you go ahead make sure to:

Decide what content you want to put up on your website

Go through your latest resume once (if you don’t have one then create one now and postpone this project until next weekend 😛). It will help you to have a clear idea about what kind of information you want to put on your portfolio website.

Find inspiration

Browse through the hundreds of free portfolio website templates on the web, see how and what you can use from them — take out a pen and paper and sketch out a rough diagram to get an idea of what your website will look like. I will be using this template to demonstrate.

Gather some amazing pictures of yourself

It’s obvious that you don’t want to look bad on your own portfolio website. So dig into your archives of photos to find the perfect photos for your website.

Tune into your favourite playlist

Legend has it that good things come only with good music… and you surely don’t want to miss out any great things.

Image for post
Image for post

Let’s jump into the building part

In the following sections, I will describe steps to building the portfolio app but you don’t have to follow the same code I use. Focus on learning the concept and show some creativity! Further reading has been divided into three sections.

  1. Setting up the React-app

Setting up React-app

We will be using create-react-app — a module provided by Facebook — which helps us to create React.js apps with ease and without worrying about build tools.

  • Go to the console and run npm install create-react-app to install this module via npm (make sure that you have installed npm before using it — follow this link for more info).
file structure generated by ‘create-react-app’

Create a components folder under the src directory. This is where we will store our components in the future.

  • Copy all the images, fonts, HTML and CSS files from the HTML template you decided to work with into the public folder.

Now your project directory should look like this.

Image for post
Image for post
file-structure
  • Run the npm install command which will install dependent modules under node_module directory.

Breaking-down the HTML page into React components..

Remember the component folder which we created under src directory in the previous step, now we will break down the HTML template page into components and combine these components to make our React-app.

  • First, you need to identify which components you can create from the monolithic HTML file — like header, footer and contact me. You need to be a little creative here!!
‘home’ section of the HTML file
React component created from the ‘home’ HTML section

Hint: If things are getting confusing on the react side — try focusing on the concept of ‘how to identify wanna be components from the HTML codebase’. After getting comfortable with React, implementation will be a piece of cake.

Did you notice that there are some changes in the HTML code? class became className. These changes are required because React doesn’t support HTML 😅 — they have come up with their own HTML-like JS syntax which is called JSX . So, we need to change some parts of the HTML code to make it JSX.

I bumped into this HTML to JSX converter during this project, which converts HTML code into JSX for you 😯. I highly recommend using this rather than changing your code manually.

After some time, you should come up with some different components. Now the EndGame is near!! Combine these different components under one App.js component (YES!! You can render one component from another component!) and your portfolio app will be ready.

combined all components under app.js

Notice in the above code that we need to first import the components in order to use them in the render() section. And we can use the components just by adding <component-name></component-name> or just <component-name/> tag in the render method.

  • Run npm start from your terminal and you should be able to see the changes reflected in the website. You don’t need to run this command again if you have made more changes in the code, it will be reflected automatically when you save those changes. You can do some lightning fast development thanks to the hot reload feature.

Deploy React-app to Github pages

Okay, so you survived until this point… take a moment to appreciate your hard work. But you still need to complete your deployment so that you can share your cool work with your friends who ditched those weekend plans.

  • First, you need to install the npm library of Github pages. To install, run this command npm install gh-pages on your terminal.

Now, you need to make the following changes in your manifest.json file:

Now your manifest.json should look like this:

manifest.json after adding gh-pages link

Now go to the terminal, run npm run deploy and wait for the magic!! Your app will be deployed after the deployment scripts execute successfully. Verify whether your app has deployed or not by visiting the link you provided in the homepage field.

Caution: Please be careful when deploying anything onto the web. Perform safety checks like removing internal links, passwords, or anything that you don’t want to be there in the hands of smart people out there.

Homework for you

Congratulations! You have finally created and deployed your portfolio app. If you are interested, then you can add these features to your website

  • Blog feature: create your own blog using Node.js and a NoSQL database like MongoDB and merge it into this portfolio website.

If you implement any of these features, share your work with me. I would be more than happy to help 😃 ( if I can 🐵)

Have your project? — Share it

I am trying to build a community of developers where people can share their ideas, knowledge, work with others and find other people with similar ideology to build things together.

Wrapping up

I would like to take a moment to acknowledge the work of the people who gave me the inspiration and knowledge to complete this article.

  • Quincy Larson, Sahat Yalkabov & community: For creating freeCodeCamp — the platform where you can learn and gain knowledge about almost everything related to web technologies; using hands-on tutorials and all without paying fees. 😍

freeCodeCamp.org

This is no longer updated.

 by the author.

Dhruv Barochiya

Written by

Just another curious random guy who happens to enjoy a writing a bit, you can find more stuff here: https://dhruvbarochiya.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Dhruv Barochiya

Written by

Just another curious random guy who happens to enjoy a writing a bit, you can find more stuff here: https://dhruvbarochiya.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store