domitriusclark

import React, { Component } from 'react';
import './App.css';

const ShowingYourName = (props) => {
    return (
        <p>{props.firstName}</p>
    )
}

class App extends Component {

domitriusclark

Javascript:

• Wes Bos tutorial for learning vanilla JS
• You Don't Know JS Book Series by Kyle Simpson
• FreeCodeCamp free coding curriculum
• Pluralsight CodeSchool JS courses

---

React:

• Youtube for Tyler Mcginnis. Tons of JS and React videos + a free React bootcamp

domitriusclark

State and Lifecycle w React

Fetching Data with Fetch API or Axios

More on fetching data in React

Modern Javascript with Tyler Mcginnis

Fetch API

domitriusclark

Resources

There are multiple videos in this playlist https://www.youtube.com/watch?v=esVwR4lGwQE

https://jestjs.io/docs/en/expect

https://github.com/kentcdodds/react-testing-library

When unit testing, remember to think about the Component and what it does. It helps sometimes to take each component and write down it's job. What it renders and how are important. Follow your application as a user would and test it to match those interactions.

domitriusclark

/** @jsx jsx  */
import { css, jsx } from '@emotion/core';
import React from 'react';
import { useMutation, gql } from '@apollo/client';
import { useDropzone } from 'react-dropzone';

const UPLOAD_IMAGE_TO_CLOUDINARY = gql`
  mutation UploadImageToCloudinary($file: String! $uploadOptions: UploadOptionsInput){
    uploadImage(file: $file uploadOptions: $uploadOptions) {
      public_id

domitriusclark

  it('updates data to an array on successful request', async () => {
    let server = new Server({
      routes() {
        this.post("/example-endpoint", () => ({
          resources: [
            { id: 1, public_id: "image1" },
            { id: 2, public_id: "image2" },
            { id: 3, public_id: "image3" }
          ]
        }));

domitriusclark

function Image({ publicId, transformations, width, height, alt }) {
  const { generateUrl, url, status, error } = useImage({ cloudName: 'testing-hooks-upload' });

  React.useEffect(() => {
    // Now instead of getImage, we call the `generateUrl` function, better describing the action we're taking internally and what to expect back 
    generateUrl({
      publicId,
      transformations: {
        // by supplying height and width seperately from the transformations object, 
        // we can use the height and width to dictate the size of the element AND the transformations

domitriusclark

import { useMutation } from 'react-query';
import fetch from 'isomorphic-unfetch';

export default function useSearch({ endpoint } = {}) {
  if (!endpoint) {
    throw new Error("Must provide an endpoint to search");
  }

  let expressionConfig = "";

domitriusclark

import React from 'react';
import { useDropzone } from 'react-dropzone';
import { useUpload } from '../hooks/useCloudinary';

import {
  Text,
  Button,
  Input,
  InputGroup,
  InputRightElement,

domitriusclark

/* eslint-disable object-curly-spacing */
import { Command, flags } from '@oclif/command'
const { prompt } = require("enquirer")
const copy = require("copy-template-dir")
const path = require("path")
const fs = require("fs")
const util = require("util")


class Mycli extends Command {