Skip to content

Project-Sustain/intro_to_react

Repository files navigation

Setting up

We recommend you use node version 20. Use nvm if you need to switch versions.

  • Use npm install to install dependencies
  • Use npm run dev to compile & run the application. It will run on localhost:5173

Task

  • The goal is to get familiar with JavaScript, TypeScript, React, and Material-UI
  • You will be working in the src/ directory. Ignore public/, node_modules/, .gitignore, package.json, and package-lock.json, and all other files outside src/.
  • Step 0: Get your dev environment running. Make sure that when you run npm run dev you see the landing page with text.
  • Step 1: Create a list of all states, and display it on the page. Source file: src/library/state_data.json
  • Step 2: When a state from the list is clicked, display a list of all counties in that state. County source file src/library/county_data.json
    • Notice that there is a field called GISJOIN associated with each entry in both of these files. You'll want to read the contents of these files into a data structure which you can search. The first 4 characters is a county's GISJOIN match it's associated state's GISJOIN. For example, Calhoun county's GISJOIN is "G0100150". We know this is in Alabama because Alabama's GISJOIN is "G010".
    • The selected state can be 'cleared', which causes the County list to disappear.
  • Step 3: Allow the user to search for counties by name. This involves a TextField that the user can type into, which filters the displayed counties.
    • This list is conditionally rendered. When no state is selected or when the selected state in cleared, this list does not show up.
  • Step 4: When a county is clicked, the map zooms to that county.
    • Use the sendRequest() function
  • Step 5: Make 3 charts
    • Pie chart for counties that begin with vowels vs consonants
    • Line chart of number of letters per county
      • x-axis: county names
      • y-axis: number of letters
    • Histograph (bar chart) of number of counties with which number of letters
      • x-axis: numbers of letters in county names
      • y-axis: number of counties with the corresponing number of letters
  • Ask Matt any clarifying questions! Reach out on MS Teams, or email [email protected]
  • NOTE: Use good software engineering practices (SRP, generalized components, clean code)

Read the Docs

  • React Hooks
    • https://reactjs.org/docs/hooks-intro.html
    • https://www.w3schools.com/react/react_hooks.asp#:~:text=Hooks%20were%20added%20to%20React,are%20generally%20no%20longer%20needed.
    • useEffect() https://reactjs.org/docs/hooks-effect.html
  • MUI components: https://mui.com/material-ui/
  • Some useful JavaScript functions to know about
    • .map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
    • .filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
  • ReCharts Charting: https://recharts.org/en-US/
  • Deck GL Map: https://deck.gl/

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published