React Router Practice

Spin a new react up using create-react-app

Look over the working Solution and examine the app in React Dev Tools to see if you can elicit the structure so that you have a starting point for you app.

This version of the application should use hard-coded stocks data, which you can find in create a data.json file with the data below to use. however if you want to leverage pulling data from an API you can sign up for an API key and use https://financialmodelingprep.com/

data for your data.json file, just copy and paste it into a new data.json file in your src folder and then import the file. import data from "./data.json"

const stocks = [
  {name: "Apple Inc.", symbol: "AAPL", lastPrice: 140.64, change: -0.280000000000001, high: 141.74, low: 140.35, open: 141.5},
  {name: "Microsoft Corporation", symbol: "MSFT", lastPrice: 64.98, change: 0.109999999999999, high: 65.45, low: 64.76, open: 65.12},
  {name: "Alphabet Inc.", symbol: "GOOGL", lastPrice: 835.14, change: -4.50999999999999, high: 844, low: 829.1, open: 842},
  {name: "Facebook, Inc.", symbol: "FB", lastPrice: 140.34, change: 0.810000000000002, high: 141.0244, low: 139.76, open: 140.08},
  {name: "Oracle Corporation", symbol: "ORCL", lastPrice: 44.65, change: -0.300000000000004, high: 45.09, low: 44.575, open: 44.91},
  {name: "Intel Corporation", symbol: "INTL", lastPrice: 36.16, change: -0.370000000000005, high: 36.78, low: 36.125, open: 36.58}
]

Here is your routing table. So when your app is complete it should have all the routes below.

Route	Renders	Component
/	"This is the Homepage page"	Home
/about	"This is theAabout page"	About
/stocks/:symbol	A single stock	Stock
/stocks	All stocks	Dashboard

Your stock tracking app should have the following features...

No matter what route the user is visiting, they should always see a navigation bar at the top of the window. It should contain links to "Home" and "About" pages.

Dashboard (`/stocks`)

If a user visits /stocks or clicks "Home" in the navigation bar, they should be directed to a dashboard page. This page should list all of the stocks that the user is tracking, specifically their name and symbol. These stocks should be pulled from stock-data.js.

Bonus: Try rendering the stocks as per the image below.

Stock (`/stocks/:symbol`)

If a user clicks on one of the stocks listed in the Dashboard view, they should be directed to an individual stock show view. This view should display all of a stock's attributes.

The resources listed at the bottom of the readme might come in handy when building this out.

About (`/about`)

If a user clicks on "About" in the navigation bar, they should be directed to an about page. This is just a static page that displays a description of your app.

Practice JS

Vowels

  // --- Directions
  // Write a function that returns the number of vowels
  // used in a string.  Vowels are the characters 'a', 'e'
  // 'i', 'o', and 'u'.
  // --- Examples
  //   vowels('Hi There!') --> 3
  //   vowels('Why do you ask?') --> 4
  //   vowels('Why?') --> 0
  const vowels = (str) => {

  }

Reverse Int

  // --- Directions
  // Given an integer, return an integer that is the reverse
  // ordering of numbers.
  // --- Examples
  //   reverseInt(15) === 51
  //   reverseInt(981) === 189
  //   reverseInt(500) === 5
  //   reverseInt(-15) === -51
  //   reverseInt(-90) === -9

  const reverseInt(n) => {
  
  }

"Controlled and Uncontrolled Forms in React"

The useRef hook

Think of the useRef hook kind of like document.querySelector, it let's you assign a DOM node to a variable so you can access its properties.
React declarative (express what you want, not how to make it) nature makes it hard to write normal imperative (how to make the thing step by step) DOM code. So if you need to get access to a DOM node like an input you can do the following:
```
import { useRef } from "react"
```

const Component = props => { // create a new ref, we'll assign it in our JSX const inputRef = useRef(null)

const handleClick = () => { //log the inputs elements value console.log(inputRef.current.value) }

return (

) }

## Form Handling
There are two ways to handle forms in React.

#### Controlled Forms: The value of the inputs are bound to state, so value of state and the value of the inputs are always in sync.

#### Uncontrolled Forms: The forms are not bound by state, instead their values are pulled using a ref when needed.

## Example of a Controlled Form

- object holding form values as state
- handleChange function that updates the state when we type into the form
- handleSubmit function to handle form submission and do what you want with the data

```js
import { useState } from "react"

const Form = props => {
  //State to hold the form data
  const [form, setForm] = useState({
    name: "",
    age: 0,
  })

  // handleChange function
  const handleChange = event => {
    // dynamically update the state using the event object
    // this function always looks the same
    setForm({ ...form, [event.target.name]: event.target.value })
  }

  const handleSubmit = event => {
    // prevent page refresh
    event.preventDefault()
    // do what you want with the form data
    console.log(form)
  }

  // The JSX for the form binding the functions and state to our inputs
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={form.name}
        onChange={handleChange}
        name="name"
        placeholder="write name here"
      />
      <input
        type="number"
        value={form.age}
        onChange={handleChange}
        name="age"
        placeholder="write age here"
      />
      <input type="submit" value="Submit Form" />
    </form>
  )
}

Example of an Uncontrolled Form

a ref created for each input
handleSubmit for when form is submitted

import { useRef } from "react"

const Form = props => {
  // ref to get input values
  const nameInput = useRef(null)
  const ageInput = useRef(null)

  const handleSubmit = event => {
    // prevent page refresh
    event.preventDefault()
    // do what you want with the form data
    console.log({
      name: nameInput.current.value,
      age: ageInput.current.value,
    })
  }

  // The JSX for the form binding the functions and state to our inputs
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameInput} placeholder="write name here" />
      <input type="number" ref={ageInput} placeholder="write age here" />
      <input type="submit" value="Submit Form" />
    </form>
  )
}