The government forest service website does not provide a way to find the nearest forest recreation pass vendor. This web app provides a way to find recreation pass vendors near you.
- Mobile first, responsive design
- React
- Figure out why Prettier doesn't work on js files
- Create vertex, graph class, vertices, graphs
- Sorting algorithm: Timsort, Heapsort, Mergesort, Quicksort
- Show 25 locations at a time, with arrows that allow users to see next 25.
- Add type annotation
- Add Redux
- Add tests
- Option to sort alphabetically, by zipcode and city
- Show map with markers for vendors
- Create classes to package methods with data
LATER
- Create my own zipcode and latitude/longitude database
- Create a relational database
- Figure out Google Maps Distance Matrix API / Bing maps API
- v. 1.0 - straight line distance between two zip codes
- v. 2.0 - route distance between two zip codes
- Scrape website with Python and create JSON file
Move into project folder
cd adventure-pass-setup
Install dependendies
npm install
Run project
npm run dev
Build static site
npm run build
Preview build
npm run preview
This app was scaffolded with Vite and the react-ts template preset.
The adventure pass vendor data was obtained by saving a webpage as an html file and parsing it.
How to use fetch() to put data into Context?
One way is to define a function that calls fetch() inside of Provider. Then call the fetch function inside of useEffect's callback function. useEffect's callback function is where we perform actions with side effects. By default, useEffect's callback function runs after every render. Limit re-renders by providing a dependency array. An empty dependency array means the side effect is run only after first render.
How to use Context?
- Import React, useContext and any other hooks you'll use.
- Create a Context object with createContext(). It will have a Provider property.
- Define your Provider function component.
- Use useState to create a state variable and stateSetter function.
- Return a HOC
Context.Provider
component that wraps around itsprops.children
. - Pass the
Context.Provider
avalue
prop that holds an object of "global" data. - Export Context object and Provider function component.
- In your entry file (index.js, main.js), import your Provider function component.
- Call it and wrap it around your app. Don't forget this step.
- Use data in context by calling
useContext(Context)
and destructuring thevalue
object in your function component.
Refresh page after form submit / update table after form submit?
React automatically re-renders when state changes.
Fetch/get text data with
- html string in js file
- local html file
- url