COMPSCI 732 / SOFTENG 750 Examples Repository

This repository contains example code demonstrating various React / Node.js / Express / MongoDB features.

Index

• JavaScript examples: Doesn't demonstrate any MERN-stack code per se, but introduces advanced JavaScript language features which are used often in the creation of such apps. These features may be unfamiliar to you if you've learned programming in other languages, and they aren't introduced in COMPSCI 719. So it might pay to check them out!

• My First React App: Demonstrates about the simplest React app possible. No toolchains or libraries required other than React itself.

• My First JSX App: Shows how we can use Babel to transpile JSX code into a format which can be interpreted by all browsers.

• Vite+React: Shows the default output of running npm create vite@latest, selecting React and JavaScript + SWC as options, as of February 2024.

• Stripped-down starter project: A stripped-down version of the Vite+React starter project above.

• Components, Logic & Loops: Demonstrates simple React components with props, use of the ternary operator (?) and && for conditional rendering, and iteration using the map() function.

• CSS Imports: Demonstrates how to import and use raw CSS files in react webapps.

• CSS Modules: Demonstrates how to import and use CSS modules.

• useState() Hook: Demonstrates how to give components local state using the useState() hook.

• useEffect() Hook: Demonstrates how to have components give side-effects using the useEffect() hook.

• useRef() Hook: Demonstrates how to reference an HTML element using the useRef() hook, with a practical example involving HTML forms.

• Routing Examples: Demonstrates basic use of React Router, version 6 (NOT backwards compatible with older versions).

• More Routing Examples: Demonstrates mode advanced use of React Router.

• React Context API: Shows how to use the React Context API. Shows how to set up a context using React.createContext(), and how to obtain its value using useContext().

• More Context: Expands on the previous example by showing how we can set up a context whose value can be modified from child classes, with appropriate re-rendering occurring as expected.

• Local Storage: Shows how we can use the local storage API provided by all modern browsers to persist key-value pairs which will be local to a given origin. This example shows just usage of localStorage, without React.

• Local Storage with React: Shows how we can integrate local storage into our React apps. Two methods are shown.

• MUI: Shows off one of our previous examples, rewritten with MUI.

• Encapsulating State: Demonstrates one way we can encapsulate stateful values, and their mutator functions, in a context provider wrapper component.

• Node.js / Express: A simple example of a Node.js / Express web server, configured with some useful middleware.

• Express Routers, fetch(), and axios: Shows a simple example of using fetch() and axios from client-side code. Also demonstrates one possible way in which Express Router can be used to more appropriately organize your server route handler code.

• Express with React: Demonstrates how we can use a create-react-app frontend in combination with a Node.js / Express backend.

• MongoDB & Mongoose: Demonstrates how to use the mongoose package to communicate with a MongoDB instance. This example shows off just interaction with the database - there's no Express or React code here.

• The MERN Stack: Demonstrates how we can use the entire MERN stack to create a full-stack web application.

• Testing with Jest: Demonstrates how we can test our JS code using Jest. Several use cases are explored, such as basic testing, setup / teardown, testing exceptions, testing async code, and mocking.

• Testing your Backend: Shows how we can test our MongoDB database schema using mongodb-memory-server, and our Express routes using supertest.

• Testing your Frontend: Shows how we can test our React code using the React testing library.