By the end of this module, you will create an application that displays images and information of horned animals. This application will allow you to filter the images by the number of horns and choose your favorite image.
For this class, we will focus on the component structure of the application. You will create a new React application using Vite and fill it with components. Refer to ‘Feature Tasks’ to see exactly which components to build and where to display them.
Resources
Configuration Your repository must include the following config files:
README.md - Add the README from our configs folder, but edited by you to include an overview of the project for a new visitor to your repo. Name all collaborators..gitignore - provided by Vite.npm create vite@latest.README.md. We will import an “existing” repository with its own README.<h1> with a title.<h2> that displays the title of the animal, an <img> element with src, alt, and title attributes, and a <p> that displays the description.
Stretch Goal
[
{
"_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
Overview Read this overview.
Video Watch the video for this class from the demo playlist.
Demonstration Look through these sample problems.
Challenges
for-each.
git checkout -b for-each
npm run get-challenge 01
npm test 01 to execute the tests in this file for this challenge.npx jest --version in your terminal. Filename typos can make things break!npm test (without a challenge number) to run all of the tests for every code challenge file assignment during the course all at once. This can get “noisy”, but it’s an opportunity to get a view of your overall progress.Submission When you have completed the entire set of code challenges and all tests pass, create a pull request from your current branch to the main branch and merge it into main.
You will be able to see a test coverage report in GitHub on the Actions tab of your data-structures-and-algorithms repository. It should match what you saw on your terminal in the above steps. Your graders will be looking at this as well.
Submit a link to your pull request.
Array methods -
iterate array and run a callback functions (function(event)=call back function we did in 201)
let arr = [1, 2, 3, 4];
let newArray = [];
function addOne(value, index) {
newArray.push(value + 1);
}
// Old Fashioned way
for (let i = 0; i < arr.length; i++) {
addOne(arr[i], i);
}
// Newer way
// .forEach iterates an array. Does not return. Does not modify the original.
arr.forEach(addOne);
// Newer way but inline...
arr.forEach(function (value, index) {
newArray.push(value + 1);
});
// Newer way, but with arrows ...
arr.forEach((value, index) => newArray.push(value + 1));
// Arrow functions are interesting
let f1 = (value, index) => {
newArray.push(value + 1);
};
// If you only have 1 param, you don't need parens
let f2 = (value) => {
newArray.push(value + 1);
};
// If you only have 1 line of code, you don't need braces AND ... that will also be the return value
let f3 = (value) => newArray.push(value + 1);
// Implicitly return
let f4 = (name) => name.toUpperCase();
// f4("john"); Return would be "JOHN"
Clients and Servers Client - wants information, data Servers - has the data for the client protocol that we use to exchange
Local and Remote Local - VScode, terminal, live server, HTML, CSS, JS
WRRC Web remote request cycle
server - hw hd sw-when client goes to/homepage send markup client asks for homepage sw chrome turns markup to things
React
npm create vite@latest counter
Don’t touch index.html and main.jsx (get rid of import .index.css)
JSX for React component - can import one JS to other JS - component with HTML CSS JS all inside markup it made
Get rid of app.jsx
import React, { useState } from 'react';
function App() {
// count is a "getter"
// setCount is a "setter"
const [count, setCount] = useState(0);
function increment() {
// Adds 1 to the current 'count' in state
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
// When the value of {count} changes, React will automatically
// re-render THIS COMPONENT
return (
<div>
<h1>{count}</h1>
<button onClick={decrement}> - </button>
<button onClick={increment}> + </button>
</div>
);
}
export default App;
Import needs export
index requires main.jsx which brings in app from app.jsx, app just has a function to return a markup
import React from 'react';
import Header from './components/Header/Header.jsx';
import Family from './components/Family/Family.jsx';
import Footer from './components/Footer/Footer.jsx';
function App() {
return (
// can't return three parent things only one need to put in into something
<>
{/* something there that renders nothing */}
<Header title="Code 301" />
<Family />
<Footer />
</>
);
}
export default App;
Components folder with three folders inside folder put a file for each Footer.jsx and footer.module.css import the CSS in JSX and in JSX add className
Start at main, delete app.jsx and app.css.
Bookmark and Review
Statement on why this topic matters as it relates to what I’m studying in this module:
Adding on to what was learned in 201, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
What is a “component”?
What are the characteristics of a component?
What are the advantages of using component-based architecture?
What is “props” short for?
How are props used in React?
What is the flow of props?
Retrospectives are a critical part of Agile and typically take the form of meetings held by a team at the end of a sprint cycle. To get us acclimated to that process, we will use the format of a retrospective to guide today’s reflection.
This article gives a nice overview of the role of retrospectives.