Introduction to React and NodeJS

Choose and set up a terminal, from zsh on mac to bash on Linux or Windows, and learn commands like cd, pwd, and ls plus updating the path environment variable.

Install node.js and npm, ensure they run in a terminal, and set PATH if needed; install Visual Studio Code as editor, and set up MySQL server with Workbench and Git.

Build a full stack app by connecting a React frontend to a Node.js backend with Express, enabling create, retrieve, update, and delete operations on book lists via JSON.

Create a GitHub repository for a React and NodeJS project, add a default node gitignore and an optional emet license, then clone the project.

Find the finished source code for this course on cave of programming and GitHub, and browse per-video commits to see how the code evolves.

Create a client and a server app using the create react app workflow, install dependencies with npm and npx, and start the client to view it in the browser.

Edit the default app by simplifying src/app.js and displaying a hello message. Run npm start to see live browser updates and commit changes with git.

Learn how a React and NodeJS app starts by running node and npm start, serving an index.html from public, and rendering jsx with embedded variables.

Create a simple React component, import and export it, and embed it in the app; style it with a stylesheet, and track changes with git status and commit.

Build a simple server with the node http module, handling requests on port 8000, and return JSON using JSON.stringify for a book object with an author and title great expectations.

Install the express js backend in a server directory, using the express generator, with or without a view engine, initialize npm, install dependencies, and run the server on port 3000.

Create a new books route file, copy the user route, and require it in the server. Mount it at /box and restart to see the books text.

Learn to set up a MySQL database with workbench, connect as root, create a books database and table, and define an auto-incrementing primary key with not null constraints.

Create a restricted database user for the express backend to securely connect to the books database on localhost within a multi-tier application, grant privileges, and test the connection end-to-end.

Create a properties file to store database connection information, including a password, then import it with require in the server's config/db.js, and run npm start to test at localhost:3000.

Improve server startup by using Gnomon to auto restart the server on file changes, and configure a root npm script to run it.

Connect a node server to a MySQL database using the mysql module, configure host, user, and password, and handle authentication issues with native password settings and flush privileges if needed.

Master MySQL insert techniques, including insert into books set, safe deletes, and date handling for JavaScript via the MySQL module.

Insert a book record into a MySQL database from a Node.js app using an insert into set query with a book object containing author, title, and published.

Use connection pooling to limit MySQL connections and reuse them from a pool, reducing expensive setup during startup and queries.

Implement connection pooling by creating a pool and a get pool function to run queries, reusing and releasing connections from the pool.

Experiment with releasing connections by running 100 queries, observe the connection pool behavior and reuse, then confirm cleanup when the server stops.

Learn how to implement post requests to create a book, using axios in JavaScript to post to /books, handle request bodies, and test with a simple script.

Implement create, retrieve, update, and delete functionality for books by moving code into the post handler, using request body data, testing with sample book entries, and validating database updates.

Explore representational state transfer (REST) and its self-contained requests. Learn how get, post, put, and delete operate on resources like books via URLs with IDs.

Implement put and delete methods for updating and removing books, extend routes with id parameters, and test with browser and axios before wiring changes to the database.

Create a dedicated book repository class to handle database operations, exposing save, get, getAll, update, and delete methods via a connection pool, and integrate it into the book controller.

Explore error handling in a NodeJS and repository pattern: convert callbacks to handle errors, use 500/200 responses, return JSON errors, and implement a global error handler for robust API behavior.

Learn to implement a repository update method for a book using a put request, handle id and data, test with axios, and apply existence checks and proper http statuses.

Implement get and get all methods for the server, using callbacks to fetch all books or a specific book by id, return 200 with json, handle 500 errors.

Implement the delete method in the book repository to remove a book by id using a delete request, handling 200 and 500 status codes, and validate with Axios.

Learn how to run the frontend react client and the backend server concurrently by changing the port from 3000 to 4000 and using concurrently via npm start.

Learn to connect a React frontend to a Node.js backend running on different localhost ports by using environment variables to define a server URL and access it in the client.

Explore cross-origin resource sharing in a React and Node.js setup. Fix development CORS issues quickly by enabling a CORS module in an Express server.

Explore how a React component uses state as a key-value store, fetches data with Axios, and updates state with setState to trigger re-render, displaying a books array.

Render a dynamic list of books with map to create table rows from state, using each book id as the key, and note that React strict mode renders twice.

Create a React header component, export it, and render a simple navigation bar using className header and bullet links, laying out a logo and book list links.

Style the header using CSS classes, set background color, arrange left and right sections with grid template columns, remove bullet points, adjust font sizes, colors, and hover effects.

Add Material UI icons to the book table, install the icon set on the client, and configure edit and delete icons for row actions.

Style the table with borders, spacing, and margins; bold the author, italicize titles, format dates to four digits, and add hover-friendly icon styling for an interactive library display.

Explore how React Router enables seamless page navigation in a React app by wiring browser routes, switch statements, and exact paths to create, view, and library pages.

Create a book form using HTML with labeled text inputs for author, title, and published, styled with CSS grid to center the form and align controls.

Explore controlled forms in react by turning inputs into state-driven controls, using a book object as the source of truth. Bind onChange handlers to update state and reflect input values.

Learn to handle form submissions in React by wiring a submit handler, preventing default page reload, and updating state to keep debug output on the same page.

Enable book creation by posting a composed book object via axios, ensure full date formatting on the client, and verify server receipt with console logs.

Learn to redirect from the book creation page to the books list after success using a simple state flag and conditional redirect, without complex router changes.

Define client-side validation rules for a form using regular expressions, enforcing author up to 50 characters, title up to 70 characters, and a four-digit year, with a handle submit flow.

Create a custom flash message for form validation that appears briefly and disappears after three seconds using setTimeout, a show message function, and a state-driven display.

Implement form validation in React by using a validate function that shows messages on rule failures, returns false, and enforces character limits 2-50 and 2-70 while preventing default submit.

Learn to extract a flash message into a reusable React component, using props for message and duration, and integrate it into the book library component with functional and class-based approaches.

Explore how hooks replace the need for class state with useState and useEffect in a flash message component, toggling visibility with a visible state and show or hide classes.

Learn how to use the useEffect hook to run code after render, manage a flash message with a timeout, and clean up by clearing the timeout on unmount.

Learn to use a changing key in React tied to submit attempts to force a flash message to re-render on form submission, enabling the validation error to reappear as needed.

Pass parameters through react router by wrapping an edit icon in a Link and defining a /edit/:id route. Use withRouter to access match.params and redirect with a Redirect when needed.

Load a book’s data when editing by fetching with axios in a mounted component (class or useEffect), parse author, title, and year, and update the state.

Explore updating existing books in a React and NodeJS app by implementing conditional Axios requests (put vs post), refining update logic, and debugging with console output.

Set the server time zone to UTC to harmonize date handling between the REST service, database, and React UI, fixing incorrect date interpretation and ensuring consistent dates across the app.

Attach an onClick handler to the delete icon and pass the book id to axios delete. Refresh the page after deletion or remove book from list and use window.confirm.