E-commerce web app with React JS (Part 1)

Source: https://www.gruponsc.com.br/como-montar-um-e-commerce/

As I promised I’m posting the first part of the web app I’m creating.

Without further a do, lets get started!

First, let’s created a new ReactJS app using the command

npx create-react-app <here_goes_the_name_of_the_app>

Or if you are using MacOS (to this users, replace npm with yarn and add sudo for adm privileges)

sudo yarn create-react-app <here_goes_the_name_of_the_app>

Second, install the packages that we will need for the app

Fontawesome icons

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

React-router-dom

npm i react-router-dom

Awesome, now we have our app created and the packages that we need to start with. After the steps above are completed we will have the following folders structure and files:

node_modules
public
 — favicon.png 
 — index.html 
 — logo192.png 
 — logo512.png 
 — manifest.json 
 — robots.txt
src 
— App.css
— App.js 
— App.test.js
— index.css 
— index.js 
— logo.svg
— reportWebVitals.js
— setupTests.js
.gitignore
README.md
package-lock.json
package.json

Lets go in this structure before we continue.
node_modules folder is where all packages that you install will be, each one in a different folder(I do not recommend editing any files in this), the public folder is where you should put files that will the used in the frontend (the part that final user sees and interacts with) like images, the src folder is the one that you’ll spend most of the time in, is the part that the app will be constructed and the styles that you want to use(the .css files).

Now open the App.js and start programming a bit. You can delete all the content and replace by the code that I’ll show below. Just a heads up, the part in bold you can replace with your own needs, like the brand name, files name etc.
Back to App.js, we need to import some stuff before we continue. The files we’ll need are logo, react-router-dom, styles and icons.

import logo from ‘./logo.svg’;
import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;
import ‘./styles.css’;
import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;

Great! Having this imported we can start our basic app design, it’ll look like this

function App() {
return (
<BrowserRouter>
<div className=”App”>
<div className=”grid-container”>
<header className=”header”>
<div className=”brand”>
<Link to=”/” className=”header-links”>Your Brand Name</Link>
</div>
<div className=”header-links”>
<a href=”cart”>Link 1</a>
<a href=”signin”>Link 2</a>
</div>
</header>
<main className=”main”>
<div className=”content”>
</div>
</main>
<footer className=”footer”>
</footer>
</div>
</div>
</BrowserRouter>
);
}
export default App;

We have now the skeleton of the app, from now on we will create a menu and the views to insert into the content section as well as style the app with css.