Creating Admin Portal Project in React - Revision history

AliIybar at 13:47, 28 December 2018

2018-12-28T13:47:00Z

2018-12-28T12:10:50Z

2018-12-28T09:29:06Z

‎logService

2018-12-28T09:28:20Z

2018-12-27T16:02:01Z

2018-12-27T12:18:36Z

2018-12-21T11:41:23Z

2018-12-21T10:35:31Z

‎Installing & Using FontAwesome Icons

2018-12-21T10:34:12Z

2018-12-20T12:29:09Z

@@ Line 191: / Line 191: @@
        <label htmlFor={name}>{label}</label>
        <input
-         id={name}
+         id={name}`
          name={name}
          type="text"
@@ Line 207: / Line 207: @@
 </pre>
-==== loginFormjsx ====
+==== loginForm.jsx ====
 <pre class="brush:js;">
 import React, { Component } from "react";

@@ Line 177: / Line 177: @@
 == Authentication & Authorisation ==
 Create "'''authService.js'''" in the '''services''' folder
 <pre class="brush:js;">

@@ Line 163: / Line 163: @@
 </pre>
 === Config.json ===
 create a config.json file in the root to keep config elements in it. ie :

@@ Line 106: / Line 106: @@
 and replace '''<a''' with '''<Link''' and '''href''' with '''to'''. ie:
   <Link to="/product">
-== Http Client ==
+== Http Client - Preparation ==
 install Axios
   npm i axios
@@ Line 120: / Line 120: @@
          <ToastContainer/>
   ....

← Older revision		Revision as of 16:02, 27 December 2018
Line 109:		Line 109:
	install Axios		install Axios
	npm i axios		npm i axios
		+	install Toastify
		+	npm i react-toastify
		+	in app.js import Toastfy and css file and add a tag for container
		+	import {ToastContainer} from "react-toastify";
		+	import "react-toastify/dist/ReactToastify.css";
		+
		+	render() {
		+	return (
		+	<div className="App">
		+	<ToastContainer/>
		+	....

← Older revision		Revision as of 12:18, 27 December 2018
Line 106:		Line 106:
	and replace '''<a''' with '''<Link''' and '''href''' with '''to'''. ie:		and replace '''<a''' with '''<Link''' and '''href''' with '''to'''. ie:
	<Link to="/product">		<Link to="/product">
		+	== Http Client ==
		+	install Axios
		+	npm i axios

@@ Line 13: / Line 13: @@
 ** '''Prettier''' by Esben Petersen
 *** Set '''Format on Save'''
 in VS Code go to File / Preferences / Settings and add the line below in UserSettings section
@@ Line 62: / Line 63: @@
   npx nodemon index.js
 == Coding ==
-===
+=== Routing ===

@@ Line 43: / Line 43: @@
 Lastly, use the component and icon in your JSX:
   import React from 'react'
   import { faSearch } from "@fortawesome/free-solid-svg-icons";
@@ Line 52: / Line 53: @@
    </div>
+  )
 [https://scotch.io/tutorials/using-font-awesome-5-with-react https://scotch.io/tutorials/using-font-awesome-5-with-react]

@@ Line 26: / Line 26: @@
 go to ./src/index.js and add this line
   import 'bootstrap/dist/css/bootstrap.css';
 ==== Installing  & Using FontAwesome Icons ====
   npm i --save @fortawesome/fontawesome-svg-core

@@ Line 30: / Line 30: @@
   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:
+Then in your app, import and add an icon to the Library:'''''App.js'''''
-−
 '''App.js'''
   import { library } from '@fortawesome/fontawesome-svg-core'
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'