Difference between revisions of "Creating Admin Portal Project in React"

Revision as of 12:41, 21 December 2018

Starting a project

Setting Up The Environment

• install node
• install create-react-app

npm i -g create-react-app

install VS Code

• install VS Code
• install VS Code snippets - Click Extensions icon on the left sidebar and search and install
  • Simple React Snippets by Burke Holland
  • Prettier by Esben Petersen
    • Set Format on Save
  • Auto Import by Sergey Korenuk

in VS Code go to File / Preferences / Settings and add the line below in UserSettings section

 "editor.formatOnSave":true

Creating React App

Go to the project folder

npx create-react-app adminportal

cd adminportal

adminportal is lowercase because [Create React App] doesn't like capitals

Installing Bootstrap

npm i bootstrap@4.1.1

go to ./src/index.js and add this line

import 'bootstrap/dist/css/bootstrap.css';

Install reactstrap

npm install --save reactstrap

Check it's site for more details

https://reactstrap.github.io/

Installing & Using FontAwesome Icons

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

Then in your app, import and add an icon to the Library:App.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'

library.add(faIgloo)

Lastly, use the component and icon in your JSX:

 import React from 'react'
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Food = () => (
  <div>
     <FontAwesomeIcon icon={faSearch} />
  </div>
 )

https://scotch.io/tutorials/using-font-awesome-5-with-react

Install nodemon

it restarts the application when file contents changes.

npm install --save-dev nodemon

Usage

npx nodemon index.js

Coding

Routing

install router

npm i react-router-dom

in index.js file add this line

import { BrowserRouter } from "react-router-dom";

and wrap <App/> with <BrowserRouter> like below

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

in App.js import Route & Switch

import { Route, Switch } from "react-router-dom";

and add these lines to render()

    return (
      <div className="App">
        <TopBar />
        <SideBar />
        <header className="App-header">
          <div className="content">
            <Switch>
              <Route path="/admin" component={Admin} />
            </Switch>
          </div>
        </header>
      </div>
    );

So in this scenario there is one top bar and a left side bar. They are static. The rest of the screen (div with className="content") will be different in every page.

Switch is for stopping rendering to go to next Route which matches the satisfying criteria. Like:

if the first route is path="/admin" and the second route is "/" without a switch here it will render both of them back to back.

Links

In sideBar component when I click a link it normalyy reload the whole page as it uses <a> tag to prevent this import Link

import {Link} from "react-router-dom";

and replace <a with <Link and href with to. ie:

<Link to="/product">