100 Days of Code version 1.0

a-100-Days-of-Code.md

100 Days of Code Journal

Jashele Tillman

• Twitter
• Portfolio

Purpose

Put your all into anything for 100 days and it's likely you'll be way better & much more improved than when you started.

Note to Readers

Due to needing to take breaks throughout this journey sometimes, this will be a consistent journal and not necessarily a consecutive one. The goal is simply to document every single day that I spend coding / learning (on my own) for 100 days and within the year 2020. As always (for me), it's not about speed, it's about learning, true direction, and effectiveness. Enjoy!! 😄

y-February.md

Day 1

• I am spending some time to go back over the foundations of Reactjs. There are a couple of concepts that I was never truly clear about on the level of what's actually happening. This tutorial helped me before - application wise, but I'm doing it again for both application and listening out more for explainations to things.
  • Course: React Tutorial with Dev Ed

Project:

To reinforce my learning of this lesson on props, hooks & state, I started on a simple React app that lists my favorite movies & tv shows. Nothing fancy, it's all in App.js.

• I set an array of objects (movies/tv shows) to state using a React hook.
  • const [shows] = useState([ {name: "name" , etc. } ])
• I created additional logic as well --
  • A dark mode hook:
    • The state is set to false by default because I want the default theme to show first.
    • const [darkMode, setDarkMode] = useState(false);
  • An onClick event:
    • When triggered, this function is what causes dark mode to toggle true or false based on the current condition.

This function {theme} is setting darkMode to either true/false.

const theme = () => {
  setDarkMode(!darkMode);
};

When users click the button, it will trigger the above function: {theme}.

<button 
  onClick={theme}
  className={ darkMode ? "themechanger-button-dark" : "themechanger-button" }>
Change Theme
</button>

• Any element that needs to be changed based on the toggle have a className of {darkMode ? "class" : "class"} - if darkMode state is true set class to appropriate class, if false set to appropriate class.

• The change theme button is located at the top of the page so users have ease of access to the toggle dark mode on/off.

I'll be continuing to work on this project next go round!

• Link: jasheles-shows.netlify.com/

Updated: February 16, 2020

---

Day 2

• Continuing day 1's project ...

  • I made minor tweaks to the styling to make it look good in mobile.
  • Added a back to top link in the footer with a smooth scroll effect.

• I created a repo for this project.

• I tweeted about it.

Updated: February 17, 2020

---

Day 3

• Blog Post

  • I wrote a post detailing a bit of how I built the theme changer with React hooks. This was a great practice on explaining how I approached a project. I feel so much more confident in my understanding of hooks & state as well as their usage.
  • I tweeted about it.

• Context API Review: Reviewed how to use Context API for state management.

  • Course: Context Api Tutorial with Dev Ed.

Project:

• Render a list of movies using Context API and display the number of movies on the list.
  • Demo (See Live)
  • Code (GitHub Repo)

Updated: February 18, 2020

---

Day 4

• Reviewing Context API

Updated: February 20, 2020

---

Day 5

• React Router Practice:

  • Course: React Router Tutorial with Dev Ed.

• Created a gist explaining Context API.

• Created a gist explaining React Router.

• Created a gist explaining dynamic routing.

Project:

React Router, dynamic routing, fetch API:

• Demo (See Live)
• Code (GitHub Repo)

Updated: February 26, 2020

---

Day 6

• Created a recipe app using React with search functionality
  • API: edamam.com

z.md

Notes:

Learning Interests

Full Learning Paths

• FEM - Web Development Course for Beginners

• FEM - Writing Professional and Modern JavaScript

Videos

• JavaScript for Beginners Course

• Vanilla JavaScript Tutorials

• React Tutorial for Beginners w/Redux

• JavaScript Animation Tutorials

• Nodejs with Auth/JWT Tutorial

• Guided React Projects w/API

yarn add 100-days-of-code
yarn start

😄

import React, { useState, createContext } from "react";