React JS Notes App & Crash Course

Set up a React notes app with npm and npx create-react-app, then build header, body, and footer components in src and run the dev server on port 3000.

Create a two-page react app with a notes list and a note detail page using react-router-dom, loading notes from a JSON file and linking to dynamic note ids.

Style the React notes app by applying a Google font, css variables for light and dark themes, and structured components like container, headers, and note details.

Set up a mock backend with JSON server to simulate calls for a React notes app, exposing routes for notes and supporting get, post, put, and delete.

Explore state in React, compare class-based and function-based components, and use useState and useEffect to fetch notes from a JSON server and load them into the component.

Develop and integrate create, update, and delete notes in a React notes app, using on change handlers, state updates, and fetch calls to a JSON server.

Clean up list item displays in a React notes app by trimming long notes, generating headlines from the first line, and showing a concise 45-character preview with a readable time.

Prep your application for production by running build to create a static build folder, then deploy to Netlify or via GitHub continuous deployment, while comparing development and production servers.