Revision as of 11:35, 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

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

=