greaveselliott

# Use the Node LTS image
# Step 1: Building our application
FROM node:lts-alpine AS builder

# Copying the project repo to the builder images default working directory /root
COPY . .

# Installing JS dependencies
RUN yarn

greaveselliott

# Use the Node LTS image
# Build step named 'builder'
FROM node:lts-alpine AS builder

# Set the default working directory
WORKDIR /root

# Copying the project repo to the builder images default working directory /root
COPY . .

greaveselliott

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { StoreProvider } from "./Store";

ReactDOM.render(
  <StoreProvider>
    <App />
  </StoreProvider>,

greaveselliott

import React, { useRef, useContext } from "react";

import { Store } from "./Store";
import { createNewListItem, deleteListItem } from "./Actions";
import "./app.scss";

export default function App() {
  const { state, dispatch } = useContext(Store);

  const input = useRef();

greaveselliott

return (
  <main>
    <h1>To do list</h1>
    <form onSubmit={onFormSubmit}>
      <input type="text" ref={input} />
      <input type="submit"/>
    </form>
    
    // ...
  )

greaveselliott

import { createNewListItem } from "./Actions";

const { state, dispatch } = useContext(Store);
const input = useRef();

const onFormSubmit = event => {
  event.preventDefault();

  createNewListItem({
    dispatch,

greaveselliott

return (
  <main>
    <h1>To do list</h1>
    <form>
      <input type="text" ref={input} />
      <input type="submit"/>
    </form>
    
    // ...
  )

greaveselliott

import React, { useRef, useContext } from "react";

import { Store } from "./Store";
import { createNewListItem, deleteNewListItem } from "./Actions";
import "./app.scss";

export default function App() {
  const { state, dispatch } = useContext(Store);

  const input = useRef();

greaveselliott

    return (<main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form" onSubmit={onFormSubmit}>
        <input type="text" className="app__input" ref={input} />
        <input
          type="submit"
          className="app__input-submit"
          value="Add to list"
        />
      </form>

greaveselliott

  return (
    <main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form">
        <input type="text" className="app__input"/>
        <input
          type="submit"
          className="app__input-submit"
          value="Add to list"
        />