Axios in React

Introduction Getting data from an API to display in your React app takes a couple steps. In this lesson, we will see how to use: * state * an axios call in componentDidMount * .map() To see a list of Todos from the API We will start state with an empty array, and

Vacation Spots Using Props and Map

Feel free to customize the given the array: let vacationSpots = [ { place: "Meridian, Idaho", price: 40, timeToGo: "Spring" },{ place: "Cancun", price: 900, timeToGo: "Winter" },{ place: "China", price: 1200, timeToGo: "Fall" },{ place: "Russia", price: 1100, timeToGo: "Summer" },{ place: "Lebanon", price: 400, timeToGo: "Spring" } ] Use .map() and props to create multiple vacation

Colored Info Boxes

Create a component that you can reuse 10 times. This component should be able to receive props for: * Background Color * Title * Subtitle * Information This component should be styled and built out well. Manually pass in props for each component from a parent component.

Business Homepage in React

You will come up with a business that interests you and create a homepage. Your home page will need: 1. A nav bar 2. An info section 3. A list of products or services 4. Images 5. A footer App should render the , a

and the

Multiple Array Methods Part 1

You should use multiple array methods to solve these problems. Don't use for loops! Using the provided peopleArray (bottom of this article), write a function that: 1. Returns a list of everyone older than 18, which is 2. sorted alphabetically by last name, and where 3. each name and age

V School's Todo API Documentation

The Todo API is something we built to help students create web applications with a completely open API to use. Have fun! And don't get too crazy on it... The baseUrl is: https://api.vschool.io//todo[/] (Where is your actual name, i.e.: https://api.vschool.io/jonsmith/todo)

Array Map Exercises

Use the built-in .map() method on arrays to solve all of these problems Feel free to copy and paste the function and tests in this assignment. 1) Make an array of numbers that are doubles of the first array function doubleNumbers(arr){ // your code here } console.log(doubleNumbers([2, 5,

Array Filter Exercises

Use the built-in array method .filter() to solve all of these problems Feel free to copy and paste the function and tests in this assignment. 1) Given an array of numbers, return a new array that has only the numbers that are 5 or greater. function fiveAndGreaterOnly(arr) { // your code

Array Sort Exercises

Use the built-in .sort() method on arrays to solve all of these problems Feel free to copy and paste the function and tests in this assignment. 1) Sort an array from smallest number to largest function leastToGreatest(arr) { // your code here } console.log(leastToGreatest([1, 3, 5, 2, 90, 20]

Array Reduce Exercises

Use the built-in .reduce() method on arrays to solve all of these problems Feel free to copy and paste the code for easy testing. 1) Turn an array of numbers into a total of all the numbers function total(arr) { // your code here } console.log(total([1,2,3])); // 6

DJ CSS

We'll be beefing up our original DJ JS. (You'll still need to make this from scratch). This time around, we won't be focusing on javascript event listeners though. Instead, every event will happen on hover, which you can just use the CSS :hover pseudo-selector for. In other words, no JavaScript

Useful Atom Plugins

Atom is a simple, approachable, yet customizable text editor. It comes pretty basic, but has awesome tools we can add to it. We will go over how to install those tools, and some of the basic ones you will want for VSchool. Install packages. Either: click on the Atom dropdown

Computer Setup for V School

Before continuing on, ensure that you have completed all of the tasks listed in the V School Preparation page, including the ones at the bottom TL;DR: That page has you get the following accounts: * Apple ID (Only required for Mac users) * Github * Edabit * CodeSignal * LastPass You also need to:

CSS Zen Garden

The purpose of this assignment is to do what you can with what you know (eyeball and guestimate). If there is something new, you are welcome to learn/google it, but is not required to pass the assignment. You can ignore details such as the fixed backgrounds, which use the

Flexbox

Flexbox is a modern and robust system for positioning elements in CSS. It is built into modern browsers, so there is nothing to install. you only need to have display: flex on your parent element to start using it. div { display: flex; } Flexbox is all about parent-child relationships. It is

Index is an anti-pattern

The problem When mapping over data in React you sometimes see developers do that following: {this.props.todos.map((todo, index) => (

{todo}

)} At first glance, this may seem to work correctly. But if we have logic to remove an item you will notice a bug. No matter what element you

Mapping Components in React

We've already covered the hardcoding of components in React, when you already know exactly what you want to show up on the screen. However, React isn't intended to be used simply for hardcoded data. Its whole purpose is to react to new information and user input and pass data to

Components In React

What is a component? A component is a part or element of a larger whole. In React a component is just that, a part of a website. Examples of this include Navbar, Header, Footer, in fact, we could think of a website as being completely made of components. In React,

Forms in React

Controlled Components We want the value of our input boxes to always be current with state. We do that with adding the event handler "onChange" to our inputs and then handling that change by updating state. class NameForm extends React.Component { //here is a pretty standard constructor constructor(props) { super(

Mongoose References

Tables In your Mongoose Schemas, you will have objects that have specified properties. These properties can reference other objects in other Schemas. This tutorial will explore some of the methods to doing this. One user has multiple todos If you are a user with todos, your todo schema will look

React vs ReactDOM

When building web applications in React, you use two packages—react and react-dom. Why is there react and react-dom? What is the difference? The react package holds the react source for components, state, props and all the code that is react. The react-dom package as the name implies is the

Inline Styling with React

Intro If you want to pass style down through props, are building animations, or want some conditional styling in React you will find yourself in need of inline styling. In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the

Bootstraps bootstraps

For this exercise you will install the default bootstrap navbar, but rather than using exactly what they give you, you get to make some changes to make the navbar more customized to your liking. After installing the default navbar, go through and make sure that your navbar meets all of

Styling in React

Styling in React Now that we have started using React how are we supposed to style all those awesome components that we have been making. There are a couple of ways. 1) Traditional CSS in Header Besides the need to use className instead of class you could just make a

JSX

JSX JavaScript and XML JSX is Javascript and XML. By this point in the class you should know JavaScript but what is XML? To understand it let's look at HTML VS XML. HTML Hyper Text Mark Up language

Hello World

XML eXtensible Markup Language. Hello World The difference here is