React Info Website Project

View the project:
Replit: https://react-info-site-project.omeatai.repl.co/
Netlify: https://react-info-site-project.netlify.app/

Hi, we are going to create a react information website in a few steps. I have already created the figma file of what our final outcome should look like as seen below:

First of all, we need to setup our index.html file with links to our style.css and index.js files which we would also need to create. Ensure that the "index.html" file is in the public folder and the other files are in the "src" folder.

#1. Index.html:

<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="../src/style.css" />
    </head>
    <body>
        <div id="root"></div>
        <script src="../src/index.js"></script>
    </body>
</html>

#2. Style.css:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
}

#3. Index.js:

import React from "react";
import ReactDOM from "react-dom";

function App() {
    return (
        <div>
            <h1>Welcome to awesome React!</h1>
            <p>Let's get started!</p>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

#4. So, our output should already look like this:

#5. We should also confirm that our package.json file is configured correctly:

{
  "name": "react-info-site-project",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "./public/index.html",
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

#6. Next, we need to create our App component and import it into the index.js file so that the child components can be rendered. So, we will create the App.js component file:

import React from 'react';

export default function App() {
    return (
        <div>
            <h1>Welcome to React!</h1>
            <p>Let's go!</p>
        </div>
    );
}

#7. Then, import it into the index.js file as a JSX component:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

#8. Then our output will now be:

#9. Next, we need to consider that our app is only 550px in width because we are using a Mobile-First approach for our design, so we need to create a container to help us with designing based on the mobile view, then we would take off the container when we are done to revert back to the standard view. Here is the Figma file that displays the App dimensions:

#10. Let's create the container in the index.js file:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./style.css";

ReactDOM.render(
  <div className="container">
    <App />
  </div>, 
  document.getElementById("root"));

#11. Then, we will style the container:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
  background: #000;
}

.container {
  width: 550px;
  margin: 0 auto;
  background: #fff;
}

#12. Our output will look like this:

#13. Next, let's consider the header section of the site and create a component for it along with it's content. The Figma file dimensions for the header section:

/* header bar */

position: absolute;
width: 550px;
height: 91px;
left: 0px;
top: 0px;

background: #21222A;

#14. Hence, let's create our header component as Nav.js and include it within our parent App.js component. This is the App.js component:

import React from "react";
import Nav from "./Nav.js";

export default function App() {
    return (
        <div>
      <Nav />
        </div>
    );
}

#15. The Nav.js component:

import React from "react";

export default function Nav() {
  return(
    <div className="nav">
      <img src="https://i.ibb.co/VMcRn5C/reactjs-icon-1.png" alt="React Logo" className="logo" />
      <h1 className="title">ReactInfo</h1>
      <p className="extra-title">Learn about React: Module 1</p>
    </div>
  );
}

#16. The style.css file:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
  background: #000;
}

.container {
  width: 550px;
  margin: 0 auto;
  background: #fff;
}

.nav {
  background: #21222A;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; 
}

#17. Now, our output will look like this:

#18. Next, let's set some padding to the Nav header component as seen in the figma file. Also, we would style the elements in the Nav component. Here as seen in the figma file:

#19. So let's add the styling to the nav class:

.nav {
  background: #21222A;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; 
  padding: 31px 26px;
}

#20. Our output will look like this:

#21. Next, let's style the logo element. Here are the figma dimensions:

/* reactjs-icon 1 */

position: absolute;
width: 28.93px;
height: 28.93px;
left: 26px;
top: 31px;

#22. So, let's add the class to our stylesheet:

.logo {
  max-width: 28.93px;
}

#23. Next, let's consider figma styling of the title:

/* ReactInfo */

position: absolute;
width: 122.39px;
height: 22.25px;
left: 61.61px;
top: 31px;

font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 22.2535px;
line-height: 27px;
letter-spacing: -0.05em;

color: #61DAFB;

#24. So, we will implement the figma styling on the stylesheet:

.title {
  margin: 0; /*To remove inherent margin on the h1 element*/
  width: 122.39px;
  height: 22.25px;
  margin-left: 6.66px;
  margin-right: auto;
  font-size: 22.2535px;
  line-height: 27px;
  letter-spacing: -0.05em;
  font-weight: normal;
  color: #61DAFB;
};

#25. Our output should now look like this:

#26. Finally, let's consider styling the extra-title with the figma styling:

/* extra title */

position: absolute;
width: 259px;
height: 21px;
left: 269px;
top: 35px;

font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
text-align: right;

color: #DEEBF8;

#27. So, our stylesheet will look like this:

.extra-title {
  font-size: 16px;
  line-height: 19px;
  text-align: right;
  color: #DEEBF8;
}

#28. Hence, the output will now look like this:

#29. Next, let's start work on the main body component. Let's see what it looks like in the figma file:

/* Rectangle 11 */

position: absolute;
width: 550px;
height: 459px;
left: 0px;
top: 91px;

background: #282D35;

#30. So let's create the Main.js component and set the background for the main body. Here is the Main.js file:

import React from "react";

export default function Main() {
  return(
    <div className="main">
      <h2 className="intro">Introduction</h2>
      <ul className="ul">
        <li>React was first released in 2013</li>
        <li>It was originally created by Jordan Walke</li>
        <li>It has well over 100K stars on GitHub</li>
        <li>It is maintained by Facebook</li>
        <li>It powers thousands of enterprise apps, including mobile apps</li>
      </ul>
      <img src="https://i.ibb.co/zSqKSGH/reactjs-icon-2.png" alt="React half-logo" className="logo-half"/>
    </div>
  )
}

#31. App.js:

import React from "react";
import Nav from "./Nav";
import Main from "./Main";

export default function App() {
    return (
        <div>
      <Nav />
      <Main />
        </div>
    );
}

#32. style.css:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
  background: #282D35;
}

.container {
  width: 550px;
  margin: 0 auto;
  border: 2px solid #000;
}

.nav {
  background: #21222A;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; 
  padding: 31px 26px;
}

.logo {
  max-width: 28.93px;
}

.title {
  margin: 0; /*To remove inherent margin on the h1 element*/
  width: 122.39px;
  height: 22.25px;
  margin-left: 6.66px;
  margin-right: auto;
  font-size: 22.2535px;
  line-height: 27px;
  letter-spacing: -0.05em;
  font-weight: normal;
  color: #61DAFB;
};

.extra-title {
  font-size: 16px;
  line-height: 19px;
  text-align: right;
  color: #DEEBF8;
}

.main {
  background: #282D35;
  color: #fff;
  height: auto;
}

#33. The border was added just to see the outline of the Mobile view. It will be taken off after the app is completed.

#34. So, the output should look like this:

#35. Next, let's style the Introduction H2 element. Here are the figma dimensions:

/* h1 title */

position: absolute;
width: 216px;
height: 43px;
left: 27px;
top: 154px;

font-family: Inter;
font-style: normal;
font-weight: bold;
font-size: 39.06px;
line-height: 47px;
letter-spacing: -0.05em;
text-decoration-line: underline;

color: #FFFFFF;

#36. So, let's style our intro header:

.main {
  background: #282D35;
  color: #fff;
  height: auto;
  margin: 63px 27px;
}

.intro {
  margin: 0; /*To remove inherent header margins*/
  font-weight: 700;
  font-size: 39px;
  line-height: 47px;
  letter-spacing: -0.05em;
  text-decoration-line: underline;
}

#37. So, our output will look like this:

#38. Next, let's consider styling our unordered list and it's elements. Here is the figma file and properties:

For the ul element:

/* body text */

position: absolute;
width: 393.03px;
height: 190px;
left: 80.8px;
top: 236px;

For the li element:

/* React was first released in 2013 */

position: absolute;
width: 393.03px;
height: 17.81px;
left: 80.8px;
top: 236px;

font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;

color: #FFFFFF;

#39. So let's style the ul elements:

.ul{
  max-width: 393px;
  margin-top: 15px;
  margin-left: 10px;
}

.ul > li {
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
  padding-block: 10px;
}

.ul > li::marker {
  font-size: 1.4rem;
  color: #61DAFB;
}

#40. So our output will now look like this:

#41. Let's now consider the repositioning of our react-half-logo:

/* reactjs-icon 2 */

position: absolute;
width: 265.04px;
height: 263px;
left: 415.96px;
top: 162px;

#42. However, the best way to position our logo without interfering with any element is to place it as the background logo:

.main {
  background: #282D35;
  color: #fff;
  height: auto;
  margin: 63px 27px;
  background-image: url(https://i.ibb.co/zSqKSGH/reactjs-icon-2.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    margin-right: 0;
}