markodayan

// 1) To ensure that paths are not accidently accessed - use 'exact' attribute on a Route
 <Route exact path='/' component={Dashboard} />
// 2) If Routing to a functional component, the props of it contain information about the route, check with console.log
 console.log(props) // in the functional comp -> eg props.match.params to get nav params from URL path
 console.log(props.match.params);
// 3)

 

markodayan

// When we want to request information from a server, we do this within dispatching an action by asynchronously fetching 
// data then dispatching to a reducer to alter app state.

// We achieve this with Redux middleware called 'redux-thunk'

// 'redux-thunk' allows you to call asynchronous tasks within action creators (dispatching actions). It halts the dispatch
// , performs the async request, then resumes the dispatch

// To use thunk it requires the 'applyMiddleware' method from 'redux'
// Thereafter it is applied to the store created as shown below:

markodayan

# SASS/SCSS automated compilation to CSS on save
sass --watch src/App.scss:src/App.css

markodayan

# Route, Link from react
npm install react-router-dom
# Some redux dependencies in React ( also thunk for async actions)
npm install redux react-redux redux thunk
# Firebase and redux middleware for Firebase and its features
npm install firebase react-redux-firebase redux-firestore

# React build and deploying to Netlify
npm run build 
netlify deploy --prod

markodayan

# Installing dependency
npm install materialize-css

markodayan

# add remote
git remote add origin <remote-link>

git add .
git commit -m "<commit message>"
git push -u origin master

markodayan

#dependencies 
npm install express graphql express-graphql lodash

markodayan

www.easings.net [CSS Animation and Transition Timing Functions]
caniuse.com [CSS Feature compatibility with browsers]
mydevice.io [Device screen resolution pixel conversions]
shouldiprefix.com [Future proofing CSS]
sass-lang.com [sass documentation]

markodayan

import { useState } from 'react';

export const useForm = initialValues => {
 const [values, setValues] = useState(initialValues);
 
  return [
    values,
    e => {
      setValues({
         ...values,

markodayan

import { useState } from 'react';

export const useForm = initialValues => {
 const values, setValues[ = useState(initialValues);
 
  return [
    values,
    e => {
      setValues({
         ...values,