mfrancois3k

// Basic AJAX Example
import React, { Component } from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import axios from 'axios'
import createLogger from 'redux-logger'
import thunkMiddleware from 'redux-thunk'

const logger = createLogger()

mfrancois3k

const axios = require('axios');

module.exports = async () => {

  // Get all books at once using map (or object)
  const allReviews = new Map([
    ['isbn:9781491997246', { isbn: "9781491997246", short_title: "Vue.js: Up and Running", status: 0, review: "", category: "work", tags: ["javascript","vue","coding"] }],
    ['isbn:9781617294624', { isbn: "9781617294624", short_title: "", status: 0, review: "", category: "work", tags: ["javascript","vue","coding"] }],
    ['isbn:9781484238042', { isbn: "9781484238042", short_title: "", status: 0, review: "", category: "work", tags: ["javascript","vue","coding"] }],
    ['isbn:9781786469946', { isbn: "9781786469946", short_title: "Learning Vue.js 2", status: 0, review: "", category: "work", tags: ["javascript","vue","coding"] }],

mfrancois3k

full proper step by step deploy MERN

using "cool-fruit-app" and a "banana" model for the example

initial setup

1. create a top level folder

mkdir cool-fruit-app cd cool-fruit-app

mfrancois3k

Content

1. React Setup
2. Redux Setup
3. Server setup
4. Docker Setup
5. Deployment script

mfrancois3k

const sendgrid = require('sendgrid');
const helper = sendgrid.mail; //don't want to use es6 destructuring b.c we want to call it helper. not mail.
const keys = require('../config/keys');

class Mailer extends helper.Mail {
  //constructor doesnt need to receive a survey model obj.
  //It just has to be an object that has a subject and recipients.
  //the second parameter is the html string, that we'll call content
  //this design lets us use this Mailer for sending more than just surveys
  //this mailer obj is defined here created in the surveyRoutes to send the emails.

mfrancois3k

REACT_APP_API_URL=123123123
REACT_APP_APP_URL=123123123
REACT_APP_PAGE_URL=123123123
REACT_APP_FACEBOOK_PIXEL=123123123
REACT_APP_GOOGLE_TAG_MANAGER=123123123
REACT_APP_GEOLOCALIZATION=123123123

mfrancois3k

// src/App.jsx


import React, { Component } from 'react';
import { connect } from 'react-redux'
import Count from './components/Count';
import Controller from './components/Controller'
import { login, logout } from "./store/actions/authActions";

mfrancois3k

a Basic redux setup in a React application covering fundamental steps

#1 Create store (using 'redux'), we will pass the root reducer in here later (root reducer contains all other reducers)

#2 Wrap App root element in Provider (from 'react-redux')

#3 Create a root reducer file with reducer function with args of state & action and returning state. define init state
at top of file and feed as state arg
- We can create multiple reducers for different parts of our app to handle their own set of actions and then combine these reducers into one Root Reducer and pass it into the store.
- We can make reducers in their own files, then in the rootReducer file -> use the combineReducers method from 'redux' to combine all the reducers into the rootReducer

mfrancois3k

import jsonPlaceholder from "../api/jsonPlaceholder";

export const fetchPosts = () => async dispatch => {
  const response = await jsonPlaceholder.get("/posts");
  
  dispatch({type:"FETCH_POSTS", payload: response })
}

//with getState
export const fetchPosts = () => {

mfrancois3k

import React from "react";
import { Switch } from "react-router-dom";
import { useSelector } from "react-redux";
import { AnimatePresence, motion } from "framer-motion";
import { getPlatform, isMobilePlatform } from "../util/browser.helper";
import styled from "styled-components";
import { ROUTES } from "constants/routes.const";

// This can be tweaked for speed and opacity on enter-exit animations.
const variants = {