components
- independent and reusuable building blocks of a web appprops
- arguements passed into componentsuseState
- hook that allows you to add a state variable to a component; to manage and store data that changes over time
useEffect
- hook that allows you to synchronize a component with an external system (ex. fetch data from server); executed after the initial renderpromise
- object that represents the eventual completion or failure of an asychronous operation (ex. pending, fulfulled, rejected)
NodeJS
- JavaScript runtime based on Google's Chrome V8 JavaScript engineExpress
- server-side development library used with NodeREST APIs
- allows frontend to interact with backend by sending HTTP requests (ex.GET
,POST
,PUT
,DELETE
) and receiving HTTP responses (typically inJSON
format)middleware
- intermediary functions that can processrequest
objects before they reach the backend orresponse
objects before they reach the client; usesnext()
to pass control to the next route handler/middleware function in the stack (ex.json-parser
to parse JSON to JS objects,CORS
to enable cross-origin requests, user authentication, logging requests, error handling)Mongoose
- an ODM for MongoDB that provides a high-level API, allowing interactions with the MongoDB database using JavaScript objects, model application data with schemas, enforce data validation, and simplify database CRUD operations
supertest
- library used for sending HTTP requests to REST API and asserting expected responsesasync
/await
- simplifies working with promises in asychronous operations (ex. fetching data);async
declares function as asychronous,await
pauses the execution of the function until the promise resolves, making the code look and behave like synchronous code (allows rest of app to run concurrently)bcrypt
- package for hasing passwords to securely store them in a databasejsonwebtoken
- library that generates JSON web tokens, enabling token-based authentication (ex. when the user logs in, backend generates a TOKEN that identifies the user)
props.children
- used to pass components as children to a component (ex. to create togglable component)useRef
- creates mutable object that persists across re-renders, commonly used to access or stores references to component instancesuseImperativeHandle
- customizes the instance value that is exposed when usingref
in parent components, often used withforwardRef
to make functions available outside of componentVitest
- used for quick and isolated unit tests (ex. testing React components, mocking API calls to test isolated components)Cypress
- used for E2E tests within a real browserIntegration tests
- test backend API functionality (ex. making POST request and verifying response and database changes)Unit tests
- test frontend components in isolation to ensure they render as expected (ex. testing React component to verify it displays correct content when given specific props)E2E tests
- test entire application flow to ensure frontend and backend work as expected (ex. simulating user logging in, creating post, verifying post appears on interface)
Redux
- state management library that uses a centralstore
to manage application's state; allows for predictable state changes throughactions
andreducers
; actions are dispatched to modify the stateuseDispatch
- provides React components access to the dispatch function of Redux store; used to send actions to update storeuseSelector
- allows React components to fetch data from Redux storeRedux Toolkit
- library that simplifies working with Redux (ex. create stores with less boilerplate code, write reducers and action creators using simpler syntax, handle asynchronous actions with thunk)configureStore
- simplifies setup of Redux store and reducerscreateSlice
- combines reducers and action creators into a single API, returning both action creators and the reduceraction creators
- Set up the action and dispatch to reducerreducers
- functions that processes actions and updates the stateredux-thunk
- middleware that allows action creators to return functions instead of action objects; functions can handle asychronous operations (ex. fetch data from server) and dispatch action (ex. saving data to store); abstracts server communication away from componentsreact-query
- used to store and manage data retrieved from serveruseReducer
- React hook that manages complex state logic by using a reducer functionto handle state updates in response to dispatched actionscreateContext
- used to create a context that components can provide or readuseContext
- used to read and subscribe to context from your componentcontext
- mechanism for sharing state between components without "prop drilling"
react-router
- library for managing navigation in a React appuseParams
- access URL parameter (ex. to fetch specific resource)useNavigate
- change browser's URL (ex. to render page after login)useMatch
- access paramaterizied part of path if URL matches (ex. extract ID of resource to fetch actual resource)custom hooks
- refactor component logic into reusable functions (ex. form field)
TypeScript
- typed superset of JavaScript, eventually compiled to plain JavaScript code- Type annotations - record contract for function/variable (provides type checking + code-level documentation)
- Type erasure - removes all type system constructs during compilation (no type information remains at runtime)
- Smarter IntelliSense - provides IDEs the type of data you are working with