React Portfolio Website Tutorial From Scratch – PART 2

Welcome to the second part of our React Portfolio Website tutorial. In this tutorial, we will be building the homepage components of our React portfolio website.

Creating Components

First, let’s create the components that we will be using on our homepage. We will create a Header component, a About component, a Services component, a Portfolio component, and a Contact component.

        
            <Header />
            <About />
            <Services />
            <Portfolio />
            <Contact />
        
    

Styling Components

Next, let’s style our components using CSS. You can either create a separate CSS file for each component or use inline styles. Here’s an example of styling the Header component using inline styles:

        
            <style>
                .header {
                    background-color: #333;
                    color: #fff;
                    padding: 10px;
                    text-align: center;
                }
            </style>
        
    

Rendering Components

Finally, let’s render our components in the App.js file. Here’s an example of how you can render the Header component:

        
            import React from 'react';
            import Header from './Header';

            function App() {
                return (
                    <div>
                        <Header />
                        <About />
                        <Services />
                        <Portfolio />
                        <Contact />
                    </div>
                );
            }

            export default App;
        
    

Now you have successfully created the homepage components of your React portfolio website. Stay tuned for the next part where we will be adding more functionality to our website.