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

Source:

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.

--

--

--

Starting in programming life. Has a background in HTML, PHP, CSS and JS. Loves to share his thoughts and opinions.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Automatically upgrade lazy-loaded Angular modules for Ivy!

9 Promising Promise Tips

Progressive Web App Case Study (Astrolink)

Chrome extension to automatically close Bluejeans and Zoom tabs

An introduction to the JavaScript DOM

TIL/2020–12–30&31

Authentication with Auth0 and Next.js

(2)basic usage of useFormik hook with React Form

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
Lucas Saladini

Lucas Saladini

Starting in programming life. Has a background in HTML, PHP, CSS and JS. Loves to share his thoughts and opinions.

More from Medium

MERN Full Stack Application (Part 1/4 CRUD)-MongoDB,Express.js,

Spotify Clone using ReactJS — Part 1

E-Commerce App using Amazon UI and React JS

Adding Video Chat or Live Streaming to Your Website in 5 lines of Code Using the Agora Web UIKit