Changelog

Questions & Notes

  • Is there a way to develop in CodeSandbox while keeping my API key private?
  • How do I keep an API private if I'm pushing changes to a public Github repo?
  • Build a few projects with the concepts that I know: I can prioritize the Weather App the Timer, and potentially pulling data from Google Sheets or Airtable
  • How do I create a backend of a React App? Consider Firebase or MongoDB; maybe Node?

2020.05.21: Progress Reflection

It's been about 13 hours over the past 5 days to get to this point. Spending between 2.0–4.5 hours each day. A combination of watching tutorial videos, reading documentation, implementing the concepts, troubleshooting, and I'd say most importantly, documenting what I'm learning.

The documentation happens at two different moments:

  • Once when I'm learning a new concept, I'll screenshot, and annotate the screen to highlight the concepts and see how different functions and methods are related.
  • The second part happens after I've implemented something. I have a notepad that's open where I jot down bullet points, questions, resources that I'm using to answer my questions.

I'm at a point where I can create a page, use components, pull data from an API and display it on the page.

The barrier from previous coding experiences was not knowing how to persist data so that the apps could have more utility. We'll see how it goes this time! I'm more optimistic because of how easy it is to manage states in a React app vs. plain Javascript.

2020.05.21: Updating the page with state changes

  • Renders only happen when props or state changes
  • props are read only, so we can't use them to update the data.
  • Functional components can now access state with React Hooks useState
  • I don't know what constructors and super() methods do.
  • I undersrtand componentDidMount(), but haven't used it yet.
  • Implemented React states 3 times. Once with classes; twice with React Hooks via useState. UseState is much easier. Not sure what the limits are of useState within functional components.
  • The React Hook documentation does a great job of comparing the implementation of states with class components vs. functional components
  • More data API: NYC Data APIs

2020.05.21: Pulling data via simple API

Notes

  • Create new file- import React
  • Create simple component via const- export default component
  • Import in app file
  • Use component as HTML element
  • I'm mixing up my syntax for function components with and without arrow syntax:
  • I added brackets and return in my function compoment.
    const Jsonapi = () => {   <p>placeholder for JSON api</p>;};
    vs.
    const Jsonapi = () => <p>placeholder for JSON api</p>;
  • Class components require: class, extends React.Component, and render;
  • Looked up the difference between functional and class components. Seems like with React Hooks useState and useEffect, there isn't an advantage to Class Components...?
  • Also, I feel like I can now read the React Main Concepts official documentation and follow along. 🎉
  • API fetching via Skillshare
  • Learning about the coolest API endpoint, the Fetch API. fetch(). Also read up on json() and then()
  • Looked for a new APIs to experiment with. Found Postman's collection; and a list of 10 APIs for side projects and a few more APIs here. Specifically the OMDb API
import React from "react";

function JsonAPI() {
  const onTellJoke = () => {
    fetch("https://icanhazdadjoke.com", {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    })
      .then(responseFromAPI => responseFromAPI.json()) //take response, format into JSON
      .then(dataFromResponse => console.log(dataFromResponse.joke)); //take JSON data, console log the joke
  };
  return <button onClick={onTellJoke}>Tell me a joke</button>;
}
export default JsonAPI;

2020.05.20: Pulling data via local JSON

const projectListData = [
  {
    title: "Project List",
    summary: "A list of projects with titles, summaries, and a done state.",
    detail:
      "Bonus: Populate projects via Google Sheets or AirTable. Commit to Github. Deploy site via Netlify. Populate via JSON"
  },
  {
    title: "Timer",
    summary: "Start, stop; pause, resume, and set time",
    detail: ""
  },
  {
    title: "Color Picker",
    summary:
      "Set primary color, toggle complementaries, add secondary, add saturation variations",
    detail: ""
  }
  // {
  //   title: "",
  //   summary: "",
  //   detail: ""
  // }
];

export default function Projects() {
  return <ProjectList projectData={projectListData} />;
}

const ProjectList = myProps => {
  const rows = myProps.projectData.map((row, index) => {
    return (
      <div className="SingleProject" key={index}>
        <div className="ProjectTitle">{row.title}</div>
        <div className="ProjectSummary">{row.summary}</div>
        <div className="ProjectDetail">{row.detail}</div>
      </div>
    );
  });

  return <div>{rows}</div>;
};
  • Worked through the implementation with dummy data.
  • Refactored the first version to refernece the local JSON data.
  • It's also live on its own URL via Netlify. New deploys happen automatically when I push commits to Github. 🤓
  • I tried to see if Google Sheets could export to a JSON file. It did, but I still need to figure out how to parse through the exported JSON.
  • Learned to use the map() function.
  • I also appended z1 and z2 to variables so that I can visually identify the path each variable takes to have an effect.

2020.05.20: First commit

  • Created static components to list projects.
  • Data is currently entered manually on each component.
  • Pushed changes to Github to track the changes over time. Figuring out how to keep CodeSandbox and Github in sync took 50 minutes. Creating a repo from CodeSandbox didn't seem to keep it in sync. I'd have to fork it to make changes. The other path was import a repo from Github, fork the clone, then push edits back to Github via CodeSandbox. 😭
import React from "react";
import "./styles.css";

const SingleProject = myProps => (
  <div className="SingleProject">
    <div className="ProjectTitle">{myProps.title}</div>
    <div className="ProjectSummary">{myProps.summary}</div>
    <div className="ProjectDetail">{myProps.detail}</div>
  </div>
);

export default function Projects() {
  return (
    <div className="ProjectList">
      <SingleProject
        title="Project List"
        summary="A list of projects with titles, summaries, and a done state."
        detail="Bonus: Populate projects via Google Sheets or AirTable. Commit to Github"
      />
      <SingleProject
        title="Timer"
        summary="Start, stop; pause, resume, and set time"
      />
      <SingleProject
        title="Color Picker"
        summary="Set primary color, toggle complementaries, add secondary, add saturation variations"
      />
    </div>
  );
}