- Day 1
- Day 2
- Create a new repository in github.
- Open command line in folder where you want to create project.
- Write command
- Aswering the all the questions:
√ Project name: ... ecommerce-node-app
√ Select a framework: » React
√ Select a variant: » JavaScript
- Change your directory and install all the packages.
cd ecommerce-node-app
npm install
- Remove all the unnecessary files and codes from
index.css
, App.jsx
, App.css
- Remove image from assets
react.svg
- Create component for navigation bar
- Install sass library in the terminal
- Create
index.jsx
and navbar.scss
in NavigationBar component
- Write code of jsx for navigation bar in
index.jsx
and sass code in navbar.scss
- Set the path of NavigationBar component in
App.jsx
- Create file for svg icon in src --> assets -->
SearchIcon.svg
, CartIcon.svg
, UserIcon.svg
- Install svg into react component
- Add the plugin inside the
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svgr(), react()],
})
- Import the SVG file in react components
import { ReactComponent as SearchIcon } from "../../assets/SearchIcon.svg";
import { ReactComponent as CartIcon } from "../../assets/CartIcon.svg";
import { ReactComponent as UserIcon } from "../../assets/UserIcon.svg";
- Call the component in the jsx as
<SearchIcon />
, <CartIcon />
, <UserICon />