React Documentation

Building a react app: Build a static version of your application Identify and implement the minimal state your app needs Add functions to mutate the state and thus make the UI interactive

https://react.dev/learn/thinking-in-react Break UI into a component hierarchy (data flows from top to bottom) Programming - One component should do one thing CSS - consider what you would make class selectors for Design Build a static version of your application(no use of state vars!) Because static App components will only return JSX (one-way data flow)

React: https://react.dev/ React components: https://legacy.reactjs.org/docs/components-and-props.html Hooks: https://legacy.reactjs.org/docs/hooks-intro.html, https://www.freecodecamp.org/news/learn-react-usestate-hook-in-10-minutes/ (useState hook), https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/ (useEffect hook) JSX https://legacy.reactjs.org/docs/introducing-jsx.html Public folder in react app: https://create-react-app.dev/docs/using-the-public-folder/ Using fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Using async https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function Using promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Lists and keys https://legacy.reactjs.org/docs/lists-and-keys.html Style: https://legacy.reactjs.org/docs/dom-elements.html#style

JavaScript Overview: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Overview Define vars using let or const (var old version) Arrays defined using [] and objects using {} ternary statement a ? b : c which returns b if a is true, otherwise returning c, and the nullish statement a ?? b which returns b if a is null or undefined and a otherwise. Lambda functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Useful functions: map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox Using query parameters: https://www.semrush.com/blog/url-parameters/

Node.js: https://nodejs.org/en To install download and e.g. in VS code make sure you are in the server folder of the react app (cd server) and then run npm install → then do the same in the client folder (cd ../client to switch directory then cd client and npm install) To start the app later run npm start in command line

Libraries to use: → the libraries will also require an extra installation in some cases (if error comes up easy to quickly google and look up the right commands) MUI → great components and providing templates for the UI https://mui.com/ https://mui.com/material-ui/getting-started/templates/ https://mui.com/material-ui/getting-started/learn/ Youtube introduction to the main components: https://www.youtube.com/playlist?list=PLlR2O33QQkfXnZMMZC0y22gLayBbB1UQd

Recharts https://recharts.org/en-US/

Express for routing: https://expressjs.com/en/guide/routing.html#:~:text=Route%20parameters