Introduction

On the previous blog, I have added a prettier configuration to help with the code format, and added the global styles (css & scss) for the portfolio. I had a few issues with importing the fonts due to the font names but this was fixed by removing spaces for me. I will be resuming with the Youtube tutorial.

Steps

For this day I decided to add a ‘Layout’ component, and create a route to ‘Layout’ component using ‘react-router-dom’ for this.

Creating a ‘Layout’ component

Create the following directory ’tiukenywil11_portfolio/src/components/Layout’.
Create the following files inside ’tiukenywil11_portfolio/src/components/Layout’.
- index.js
- index.scss
Append ’tiukenywil11_portfolio/src/components/Layout/index.js’.

Import ’tiukenywil11_portfolio/src/components/Layout/index.scss’

import './index.scss';

Create functional component ‘Layout’.

const Layout = () => {
	return <> Layout component </>
}

Export component so it could be used by other components.

export default Layout;

Adding routes

Append ’tiukenywil11_portfolio/src/index.js’.

Import components from ‘react-router-dom’

import { BrowserRouter } from 'react-router-dom';

Remove the following snippets inside ‘root.render’.

<React.StrictMode>
	<App />
</React.StrictMode>

Replace it with the following snippet to add routing function to components inside the ‘BrowserRouter’ tags.

<React.StrictMode>
	<BrowserRouter>
		<App />
	</BrowserRouter>
</React.StrictMode>

Append ’tiukenywil11_portfolio/src/App.js’.

Import components from ‘react-router-dom’

import { Routes, Route } from 'react-router-dom';

Import ‘Layout’ component.

import Layout from './components/Layout/index';

Remove the following snippet inside the return statement on App function.

<div>
  Hello World!
</div>

Replace it with the following snippet to enable Routes.

<>
	<Routes>
		<Route path="/" element= {<Layout/>} />
	</Routes>
</>

Test if ReactJS app is working, and if the page is routed to the ‘Layout’ component

npm start

The screen should look similar to this.

Outro

The progress I made today adds more functionality to the portfolio, the changes can be found in my GitHub repository here.

Next:
Decentralized Portfolio: Part 4
Decentralized Portfolio: Part 5
Decentralized Portfolio: Part 6

Introduction#

Steps#

Creating a ‘Layout’ component#

Adding routes#

Outro#

Introduction

Steps

Creating a ‘Layout’ component

Adding routes

Outro