Containers Components There are many ways to organize your React app, so much of it is learning popular, tried and true patterns and principles. Maybe the most important of these is using Container Components. Container Components contain Presentation Components. Basically, container(Smart or Stateful) components and components(Dumb Component or presentational component)
Classes What is a JavaScript "Class"? The class keyword was introduced in ES6, and is just syntactical sugar over the constructor function & prototype paradigm we’re used to working with in ES5. While the new class syntax doesn't fundamentally change how JavaScript works under the hood (JavaScript remains a prototype-based language
Digital Ocean Deployment: Jacob Evans Style Prerequisites: 1. Full stack application that is connected to repo on git. 2. A Domain name bought through namecheap or someone other service that allows custom DNS Modifying your app to server your react code 1. Open your index.js for your server 2. Import path at the top of
Bootstrap Navbar Bootstrap provides a broad variety of useful tools which not only decrease the amount of time you spend writing code, but also increase the aesthetic appeal of your webpage. Something almost every website you create will have is a navbar. Lucky for us bootstrap comes with a navbar which we
Lifecycle Methods The beauty of React is the splitting of complicated UI’s into little, bite-sized bits. Through lifecycle methods, we can then control what happens when each tiny section of your app renders, updates, thinks about re-rendering, and when it disappears entirely. componentDidMount() This method runs after your component is mounted
React State Why state? Up until now, we've been able to create simple, static (unchanging) UI (User Interface - what the user actually sees) components (those that just display stuff to the user), as well as components that pass properties (props) down to their children components to allow us to make even
Axios Todo Project You will be creating a Todo list. Use the totally rad todo API created by the legendary Bob. Here are the docs for it. For the requirements below, you'll be building a frontend site that pulls your list of todos down from the API to display them, and allows the
Axios Axios is a JavaScript library that helps us make AJAX calls to APIs. We will being using to make requests for data in the form of JSON. There are a few acronyms in those two statements that should be understood before getting too deep in how to use Axios. If
Nested Loops Nested loops are a very useful tool that we have access to in JavaScript. They can be used for a variety of things, such as accessing/creating matrices, or building a game similar to Battleship using a grid like system. Multidimensional Arrays We refer to arrays inside of arrays as
Strunctions "It's like a function but for strings!" - Dan Hitt Let's Practice String Methods. Implement all of the listed String Methods below using at least 3 unique Functions. String Methods .concat() .indexOf() .lastIndexOf() .match() .replace() .slice() .split() .toLowerCase() .toUpperCase() .substr()
String Methods Now that we are familiar with Strings and Functions we are going to teach you about String Methods. Now methods are essentially just functions that are built within the scope of an object. When people say function they are typically referring to a function on the global scope, whereas a
Disemvoweling Create a function that removes all vowels and spaces from a string. The function should then return the result as an object with two keys "consonants" and "vowels". Example const input = "Pickle Rick!" function disemvoweling(string){ } disemvoweling(input) // Output: // { // consonants: "pcklrck!", // vowels: "iei" // }
Game of Threes Write a recursive function that takes two integers, n and counter as parameters and does the following: 1. If the n is divisible by three, divide it by three and call the function again, providing the new value as n and counter + 1 as counter 2. If not, either add
Event Targets For this post, you should have an understanding of events in JavaScript. You should also be somewhat familiar with Chrome Developer Tools. We will be using it to explore the event object. We will be going over the event object, and the sometimes subtle differences different events have. Event Handler
Higher-order Function Exercise We will use the given array helpers to transform the given for loops away from being for loops. Here is some data you can use, feel free to add more car objects to it: const cars = [ { make: "ford", model: "E150", year: 2000 }, { make: "chevy", model: "malibu", year: 2017 }, { make: "chevy"
ES6 Basics This post is not designed to be all digested at once. Take it a subject or two at a time. Use the Table of Contents to find what you need! Table of Contents Const and Let Rest and Spread Operator Default Parameters Template Literals (Template Strings) Object Shorthand Destructuring Import/
Exercise React Meme Creator Make a meme creator using React. Your user should be presented with 3 input boxes: 1. Image URL (for the meme image) 2. Upper Text (Text to show up on the top of the image) 3. Lower Text (Text to show up on the bottom of the image) In the
Array Methods Continued This article will go over 7 array methods. * .forEach() * .map() * .filter() * .find() * .some() * .every() * .reduce() These methods work in much the same way. Once you learn one, the rest will become much easier to learn. They are all used to prevent us from using for loops. .forEach Given the array:
Deployment Deploying Static and Node Applications with Zeit Now This lesson has been adapted from Mykola Bilokonsky Documentation can be found HERE About Zeit Now Up until now you've been running your projects from your own server on localhost. Now is a node package that lets you deploy static websites and node applications to a remote server, which allows
Double Sum Warm-Up Write a function that returns the sum of two integers or if they are the same, returns double their sum. doubleSum(1,4); //returns 5 doubleSum(3,3); //returns 12
Escape Room Write a game that lets a user escape a room. The character finds him/herself locked in a room. In order to escape the room, your character needs to find the key in the room and then open the door. There's also a hole in the wall in the room.
CSS Flags Build the following flags in pure HTML and CSS, no images allowed. No need to make them responsive. The "aspect ratios" listed below refer to the height:width aspects. E.g. France 🇫🇷 is 2:3, so if you make it 200px in height, it should be 300px in width. With
Frame It Warm-Up Given a string of any length, write a function that "frames" it in a multi-dimensional array. For example: frameIt("pic"); //returns [ [*,*,*,*,*], [*,p,i,c,*], [*,*,*,*,*] ]
Longest Substring Warm-Up Write a JavaScript function to find the longest substring in a given a string without repeating characters. Example: longestSub("happy"); //returns "hap"
Adjacent Difference Given an array of strings, find the 3 adjacent elements with the longest combined length. Return them in the form of an array. Example function combined(arr){ // Find the 3 adjacent elements with longest combined length } combined(["this", "is", "an", "array"]) // Output: ["is", "an", "array"] // they have the longest combined