add class content

class-01/DISCUSSION.md

@@ -0,0 +1,35 @@
+# Readings: Introduction to React and Components
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[Component-Based Architecture](https://www.tutorialspoint.com/software_architecture_design/component_based_architecture.htm)
+
+  1. What is a "component"?
+  2. What are the characteristics of a component?
+  3. What are the advantages of using component-based architecture?
+
+[What is Props and How to Use it in React](https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0#:~:text=%E2%80%9CProps%E2%80%9D%20is%20a%20special%20keyword,way%20from%20parent%20to%20child)
+
+  1. What is "props" short for?
+  1. How are props used in React?
+  1. What is the flow of props?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+## Bookmark and Review
+
+- [React Tutorial through 'Passing Data Through Props'](https://reactjs.org/tutorial/tutorial.html){:target="_blank"}
+- [React Docs - Hello world](https://reactjs.org/docs/hello-world.html){:target="_blank"}
+- [React Docs - Introducing JSX](https://reactjs.org/docs/introducing-jsx.html){:target="_blank"}
+- [React Docs - Rendering elements](https://reactjs.org/docs/rendering-elements.html){:target="_blank"}
+- [React Docs - Components and props](https://reactjs.org/docs/components-and-props.html){:target="_blank"}

class-01/README.md

@@ -0,0 +1,108 @@
+# React and Component-Based Architecture
+
+## Overview
+
+Today we will be covering some new topics and reviewing concepts you should already be familiar with.
+
+We will spend some time reviewing the concepts from the prework. We will also discuss several new topics: `create-react-app` and component-based architecture.
+
+## Class Outline
+
+- Overview of 301
+- Review of prework
+- Discussion of `create-react-app`
+- Discussion of component-based architecture
+- Introduction to code challenges
+- Introduction of code challenge topic
+- Lab prep
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Component-based architecture
+- React
+- `create-react-app`
+- JavaScript classes
+- Arrow functions
+- Gain an understanding of scope with arrow functions
+- Gain an understanding of context, scope, "this", and the "new" keyword
+- Gain an understanding of the core concepts of React and how to create a basic React application
+- Understand component-based architecture and be able to build a simple component-based React application
+
+#### Execute
+
+- Be able to create a basic React application using `create-react-app`
+
+## Notes
+
+1. What is React?
+1. What are components?
+1. What is the difference between an arrow function and a function declaration?
+1. Turning a function declaration into an arrow function:
+
+   ```javascript
+   function doSomething(name) {
+     // Do something
+   }
+
+   doSomething = (name) => {
+     // Do something
+   }
+
+   // Or make it a one liner!
+   doSomething = (name) => // Do something small
+   ```
+
+1. Difference between a constructor function and a class:
+
+   ```javascript
+   // constructor
+   function Cat(name) {
+     this.name = name;
+     this.fluffy = true;
+   }
+
+   Cat.prototype.speak = function(){
+     console.log(`${this.name} says meow`);
+   }
+
+   // to make a new instance
+   const bob = new Cat('Bob');
+   bob.speak();
+
+   // class
+   class Cat {
+     constructor(name) {
+       this.name = name;
+       this.fluffy = true;
+     }
+
+     speak = () => console.log(`${this.name} says meow`);
+   }
+
+   // to make a new instance
+   const bob = new Cat('bob');
+   bob.speak();
+   ```
+
+1. Basic React Component Structure:
+
+   ```javascript
+   import React from 'react';
+
+   class Something extends React.Component {
+     render() {
+       return(
+          <section>
+            <h1>Header for Something</h1>
+            <p>Text that is all about Something.<p>
+          </section>
+       )
+     }
+   }
+
+   export default Something
+   ```

class-01/lab/README.md

@@ -0,0 +1,79 @@
+# Overview
+
+By the end of this week, you will create an application that displays images and information of horned animals. This application will allow you to filter the images by number of horns and chose your favorite image.
+
+Today we will just be focusing on the component structure of the application. You will create a new React application using `create-react-app` and fill it with components. Refer to 'Feature Tasks' to see exactly which components to build and where to display them.
+
+## Resources
+
+- [React Official Documentation](https://reactjs.org/docs/getting-started.html){:target="_blank"}
+
+## Configuration
+
+_Your repository must include the following config files:_
+
+- `README.md` - provided by create-react-app, but edited by you to include an overview of the project for a new visitor to your repo.  Name all collaborartors
+- `.gitignore` - provided by create-react-app
+
+## Feature Tasks
+
+- Complete the following steps to setup your repository:
+  1. Create a React application using `create-react-app` as demonstrated in class.
+      - Use the command `npx create-react-app <repo-name>`.
+  1. Create a new repository on GitHub WITHOUT a README.md. We will import an "existing" repository with its own README
+  1. Follow the instructions given by GitHub to "push an existing repository from the command line"
+      - be sure to select HTTPS or SSH, whichever is relevant for you
+  1. Create a Branch and begin your work.  As always, ACP often
+
+- Your `App` component should render a `Header`, `Footer` and `Main` component, each of which is defined in their own files.
+
+- Your `Header` component needs to have an `<h1>` with a title.
+
+- Your `Footer` component needs to contain your name as the author.
+
+- The `Main` component needs to render at least two copies of a component called `HornedBeast`.
+
+- The `Main` component needs to pass `title`, `imageUrl`, and `description` into each `HornedBeast` component. For the purpose of today's lab, you can pass whatever title, url and description that you want into each `HornedBeast` commponent.
+
+- The `HornedBeast` component needs to contain an `<h2>` that displays the title of the animal, an `<img>` element with `src`, `alt` and `title` attributes, and a `<p>` that displays the description.
+
+### NOTE: Rendering an image in React is a little tricky. Try to figure out how to do this on your own and we will go over it in the next code review
+
+## Stretch Goal
+
+- Given the following array, loop over the data to display three `HornedBeast` components:
+
+```js
+[{
+    "_id": 1,
+    "image_url": "http://3.bp.blogspot.com/_DBYF1AdFaHw/TE-f0cDQ24I/AAAAAAAACZg/l-FdTZ6M7z8/s1600/Unicorn_and_Narwhal_by_dinglehopper.jpg",
+    "title": "UniWhal",
+    "description": "A unicorn and a narwhal nuzzling their horns",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+
+  {
+    "_id": 2,
+    "image_url": "https://images.unsplash.com/photo-1512636618879-bbe79107e9e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd9460ee6d1ddbb6b1ca7be86dfc4590&auto=format&fit=crop&w=1825&q=80",
+    "title": "Rhino Family",
+    "description": "Parent rhino with two babies",
+    "keyword": "rhino",
+    "horns": 2
+  },
+
+  {
+    "_id": 3,
+    "image_url": "https://www.dhresource.com/0x0s/f2-albu-g5-M00-1A-11-rBVaI1hsIIiALxKzAAIHjSU3VkE490.jpg/wholesale-halloween-costume-prop-unicorn.jpg",
+    "title": "Unicorn Head",
+    "description": "Someone wearing a very silly unicorn head mask",
+    "keyword": "unicorn",
+    "horns": 1
+}]
+```
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day.
+- Create a Pull Request (PR) back to the `main` branch of your repository.
+- Submit your assignment as a link to your PR, and a comment describing how much time you spent on the lab.

class-02/DISCUSSION.md

@@ -0,0 +1,33 @@
+# Readings: State and Props
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[React lifecycle](https://medium.com/@joshuablankenshipnola/react-component-lifecycle-events-cb77e670a093){:target="_blank"}
+
+1. Based off the diagram, what happens first, the 'render' or the 'componentDidMount'?
+1. What is the very first thing to happen in the lifecycle of React?
+1. Put the following things in the order that they happen: `componentDidMount`, `render`, `constructor`, `componentWillUnmount`, `React Updates`
+1. What does `componentDidMount` do?
+
+## Videos
+
+[React State Vs Props](https://www.youtube.com/watch?v=IYvD9oBCuJI)
+
+1. What types of things can you pass in the props?
+1. What is the big difference between props and state?
+1. When do we re-render our application?
+1. What are some examples of things that we could store in state?
+
+## Bookmark and Review
+
+- [React Docs - State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html){:target="_blank"}
+- [React Docs - handling events](https://reactjs.org/docs/handling-events.html){:target="_blank"}
+- [React Tutorial through 'Developer Tools'](https://reactjs.org/tutorial/tutorial.html){:target="_blank"}
+- [React Bootstrap Documentation](https://react-bootstrap.github.io/){:target="_blank"}
+- [Boootstrap Cheatsheet](https://getbootstrap.com/docs/5.0/examples/cheatsheet/){:target="_blank"}
+- [Bootstrap Shuffle - a class "sandbox"](https://bootstrapshuffle.com/classes){:target="_blank"}
+- [Netlify](https://www.netlify.com/){:target="_blank"}

class-02/README.md

@@ -0,0 +1,94 @@
+# State and Props
+
+## Overview
+
+Today's class will focus on passing information as `props` from a parent component into a child component. We will also cover the concept of `state` and how individual components can hold state.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Code Demo
+- Bootstrap
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- State
+- Props
+- React-Bootstrap
+- Netlify
+- setState
+
+#### Execute
+
+- Understand and define the concepts of `props` and `state` as they relate to React Components
+- Pass both static and dynamic information from a parent component into a child component using `props`
+- Hold information as `state` in different components
+- Create responsive web pages suitable for desktop or mobile web browsers
+- Integrate a 3rd party component library into a React application
+- Deploy to Netlify
+
+## Notes
+
+1. What is state?
+
+1. What are props?
+
+1. To Update State: `this.setState({ thingInState: thingToUpdate })`
+
+1. To send something in props to a child component: `<ChildComponent bananas='randomString' />`
+
+1. To access that variable in the props from the child component: `this.props.bananas`
+
+1. Information flows in one direction. That direction is ______________.
+
+1. What is Bootstrap?
+
+1. What are different things that I can customize using Bootstrap?
+
+1. How does Bootstrap use classes for customization?
+
+1. Holding state in a parent component and sending it into a child component:
+
+  ```javaScript
+  import React from 'react';
+  import Child from './path-to-Child-component';
+
+  class Parent extends React.Component {
+    constructor(props);
+    this.state={
+      name: 'sue',
+      childName: 'bob'
+    }
+
+    render() {
+      return (
+        <>
+          <p>My name is {this.state.name}</p>
+          <Child kidsName={this.state.childName}>
+        </>
+      )
+    }
+  }
+
+  export default Parent
+
+  import React from 'react';
+
+  class Child extends React.Component {
+    render() {
+      return(
+        <p>My name is {this.props.kidsName}</p>
+      )
+    }
+  }
+
+  export default Child
+  ```