The Complete React Redux Node Express MySQL Developer Course

Explore editor tools and complete hands-on tasks with Visual Studio through multiple-choice exercises throughout the course. The instructor emphasizes using Visual Studio across the entire program.

Learn to download, install, and use Git, the free open source version control system, to track different versions of your projects and share work across environments.

Install the latest stable version of Node, verify your environment, and explore Node core modules while keeping your code compatible with future Node features.

Install Xampp server and MySQL, choosing the correct version for your system, then start Apache and MySQL and test localhost access.

Learn to set up a React development environment, install create-react-app globally, create your first React project, and run a local dev server on port 3000 while exploring src and public.

Build a React app from scratch by creating a file, importing React and ReactDOM, and rendering a React element into a DOM container in the public folder.

Learn how to add Bootstrap to a React app by creating a new project, installing Bootstrap, running the development server, and importing Bootstrap in index.js to apply styling.

Create your first React component in the components folder by importing React and Component, defining a class that extends Component, exporting it by default, then render the counter in index.

Explore rendering multiple elements with fragments, manage component state, and update a counter using a stateful method, demonstrating dynamic expressions in React.

Learn to set attributes in react using a state image to dynamically update the src attribute, and use className with bootstrap badge classes, not the class keyword.

Learn how to apply inline styles in React using the style attribute and curly braces, adjust properties like font size, font weight, and margins, and combine bootstrap classes on buttons.

Learn to render classes dynamically in React by building a dynamic class string that changes with state, applying badge or primary classes based on a count condition.

Learn to render a dynamic React list by mapping a state array and giving each item a unique key. Fix common key warnings for list rendering.

Learn conditional rendering in React by displaying a list when an array has items and showing a fallback message when empty, using if statements and expressions inside curly braces.

Handle events in React by binding click, double-click, and key events, create and reference handlers, pass arguments with arrow functions, and update component state.

Learn how to bind event handlers in React class components and update state with setState, using constructor binding or arrow functions to access this correctly.

Explore composing React components by building a counters component that renders multiple counter components with isolated state, mapping an array of counter objects (id and value) to components via keys.

Learn how to pass data between components in React using props and children, wire up value attributes to dynamic counters, and render nested content with the children prop.

Learn to handle events from a child component by passing a delete function via props, using an id to remove a counter from the list and update the state.

Restructure the app by replacing a component, adding a user data component and a nav bar, importing NavBar, using bootstrap, and converting class attributes to className.

Build dynamic navigation in a React app by installing and configuring react-router-dom, defining static and dynamic routes, and using exact and render to manage 404 handling.

Learn to protect routes in a React Redux app by building a protected user route that allows access only when logged in or admin, with redirects for unauthorized visits.

Explore react life cycle hooks through mounting, updating, and unmounting phases, showing how to initialize state in the constructor, fetch data with ajax after mount, and clean up on unmount.

Learn to build a bootstrap-styled react form with controlled inputs for name and email, manage state with onChange handlers, and handle submission with preventDefault.

Build a simple restful API with Express, exposing posts, comments, and profile endpoints, then fetch data from the client using fetch or axios, demonstrating get requests and response handling.

This lesson introduces Redux, a global store to share data across components, enabling access and updates from anywhere and helping track whether the user is logged in.

Set up your work environment by creating a new app, installing two packages including React Redux, adding Bootstrap, and scaffolding three components: counter, list, and main, then wiring them together.

Build a simple Redux demo that introduces actions, action creators, reducers, and a store, then dispatch increment and decrement to update a counter and a list with console output.

Create a producer and action folder structure and implement the reduce function. Export constants for increment, decrement, and select, and build action creators to return these actions for the store.

Create and connect debt and number reducers, define actions and a switch-based state update, and combine reducers to configure a Redux store for the app.

Learn to integrate React Redux by wrapping your app with the provider, wiring your store, and enabling the Redux DevTools extension to inspect state and reducers in real time.

Connect a main React component to a Redux store with React Redux, define increment and decrement actions, map state to props, and wire inputs and buttons to update and display data.

Connect React Redux to map state to props and subscribe to store changes. Make the counter reflect updates from the store, showing dynamic numbers and a synchronized screen.

Connect a data list component to the Redux store, map state to props, and render the list by iterating store data with keys, ensuring updates reflect store changes.

Discover NodeJS as a JavaScript runtime that runs server-side on your machine using the same engine as Chrome, making JavaScript a server-side language rather than a browser script.

Explore npm, the node package manager, to install third-party packages into node_modules and manage dependencies with a package.json. Create scripts to run tasks, like starting a web server.

Explore node modules, including core modules and packages, and learn how to create your own modules with exports to share variables, functions, and classes across files.

Master basics of a node project: create folders, initialize npm, install dependencies and dev dependencies, build index.js and user.js, export a User class, and require it.

Explore more durable functions, focusing on exports and module usage. Examine the filename and directory functions to determine directory and file names.

Learn to use the Node.js core path module to manipulate file paths, including path.basename, path.dirname, path.extname, and path.join, and practice building a modules folder with files to demonstrate path operations.

Learn how to manipulate the filesystem in a Node module by creating folders, creating and writing to files, reading content, appending text, and renaming files using async callbacks.

Explore the os module by retrieving environment details such as platform, architecture, CPU info, memory, home directory, and system uptime, and log these values to verify the host environment.

Explore the URL module by creating and serializing URLs, inspecting host, hostname, and port, accessing path, and working with search parameters, including dynamically appending and iterating over them.

Explore event emitters in node by building a custom logger that extends event emitter, registering listeners, and emitting events to log messages from code.

Build a basic Node.js http server using the http module and createServer, handle requests and responses, and verify the server running on localhost by testing in the browser.

build a node.js server from scratch, load modules, configure port from environment, serve static files, implement routes like / and /api/users, and handle 404/500 errors with dynamic content types.

Explore what express is and why learn it: a lightweight backend framework for node.js that simplifies building web apps, handling requests, and server operations for APIs and microservices in JavaScript.

Install postman to test api requests, create a new project folder, initialize package.json with npm init, and install express to bootstrap the app.

Create a simple express server by requiring express, initializing app, and listening on port 5000 (or process.env.PORT). Run the server and visit localhost:5000 to see a cannot GET / message.

Set up a route, handle a get request, access the request and response parameters, and send a simple hello message to illustrate routing basics.

Explore how to serve static files with express by creating a public folder, adding an index page, and using express.static middleware to render assets.

Create a simple rest api with express to return a user array as json via the get /api/users endpoint. Test the endpoint using postman.

Define and use Express middleware to process requests, log data, access request and response, and call next to pass control. Implement authentication checks and error responses.

Learn to create a get single user route that fetches a user by id from a dynamic parameter, converts id to number, uses filter, and tests with postman.

Learn to organize Express routes with the Express router by creating a routes folder, exporting the router, and wiring it into the index to serve /api/users.

Learn how to implement post requests in an express app by building a create-user endpoint at /api/users, parsing json bodies with body-parser, and validating name and email.

Update user data using a put request by validating the user id, updating name and email as needed, and returning the updated user or a status response, demonstrated with Postman.

Learn to implement a delete request in a node express app to remove users, including checking for existence, sending a user deleted response, and returning 400 when not found.

Learn MySQL basics and practice create and delete operations within a simple operation management system, using the command line and Norges, for a streamlined workflow.

Learn to create a MySQL database and set up a user table with id, name, and email, including commands to connect, show databases, use the database, and describe the table.

Learn to insert data into the user table using insert into, specify name and email columns, leverage auto increment for id, insert multiple rows, and verify with a select.

Learn to select data from the user table using sql, including order by, selecting specific fields like email, and filtering with where and in to retrieve targeted rows.

Update the users table by changing the name column with a where clause, then delete a row, drop the name column, and drop the database to demonstrate SQL data manipulation.

Launch a node development environment by creating a folder, initializing npm, installing express, wiring up an index.js with express, and running the server with nodemon.

Create a database connection and define the connection constants. Create the database when missing, connect using the configuration, and verify the connection in the browser.

Create a table with an auto-incrementing id, title, and body fields, then test the post route to confirm the database table is created.

This lecture demonstrates inserting data into a posts table by adding two posts with titles and bodies, using prepared statements and basic error handling.

Learn to select multiple posts and a single post using dynamic route parameters, handling request and response, and verify results via console output.

Update posts by sending a request, defining the update query, and saving the new title. Test by finding post one and verifying the updated title.

Learn how to delete a single post by locating and defining the delete function, crafting the delete query, and verifying the post is deleted in the browser.

Kick off a full stack stock app by setting up the React front end, installing core packages (React, Redux, react-redux, Express, MySQL), and using a starter template.

Create a components folder with five subfolders (favorite, get help, registered, proofpoint, template), update public index.html and styles, convert to a default React class, and run the app.

Develop the main component by creating files, converting class to className, and wiring state and handleChange to toggle between user profile navigation and a search route on localhost.

Set up and fix routing in a React app by configuring Router, correcting history usage, and defining dynamic routes and components to display search results and user lists.

Explore how to use the GitHub API to search for users and retrieve their repositories using a dynamic username, and examine the returned user data and repository list.

The data component fetches users by username from an API, stores them in state, and renders a searchable user list with avatars and clickable items to view individual profiles.

Develop a specific data component that fetches a user and their last five repositories from an api. Manage state and pass user data as props to a repositories display component.

Implement a redux store with actions and reducers to manage user favorites, persisting to localStorage, and wire it up with react-redux provider and dev tools.

Connects a specific component to the redux store, manages a favorite flag and list via actions, and persists updates to local storage through lifecycle and conditional rendering.

Build a redux-connected favorite component in a React app, fetch users, render a dynamic avatar list with logins, and toggle favorite status with view details navigation.

Learn to start a back-end with express, install needed packages, connect to a MySQL database, set up routes and static image hosting, and run the server on a port.

Connect to the my skill database by configuring express, defining the my skill constant, and wiring the router and connect function with error handling, logging, and module exports.

Create a users table if it doesn't exist using a select or create query, with an auto-incrementing id primary key, and add name, password, picture, email (unique), and address.

Implement a backend register route to create a new user by accepting name, email, and password, checking for existing email, and inserting the user into the database with proper responses.

Implement a backend login and signup flow by defining user fields, validating credentials against the database, generating a token, and returning a status 200 response.

Learn to build a login and register front-end with redux state, actions, and reducers to manage authentication, token handling in localStorage, and logout navigation.

Create two new components in the logon register folder for login and register, then integrate them on the main page and configure the port and api slice users.

Develop a login component with redux connect, mapStateToProps, and form handling for email and password, and manage sign-in flow, API responses, and token storage.

Build a front-end register component connected to the store, managing state for name, email, and password. Post data with axios, prevent default, validate fields, and handle server responses and errors.

Learn to implement a private route in a React app by checking a stored token, rendering the profile when authenticated, and redirecting to login otherwise, with redux state handling.

Develop back-end endpoints to get and update user data, decode the token to extract the user email, query the database for that user, and enforce authorization before returning data.

Learn how to update a user's name and address while handling image uploads on the back end, including configuring disk storage, validating file types, and returning success responses.

Define the back-end delete route to remove a user by id after verifying the password, and test with Postman to confirm a 200 success or 400 error.

Learn to build a user profile component that fetches data with axios, uses token authorization, and displays name, email, and address from a localhost API.

Update a user profile in a React front-end by handling image changes with a file reader, updating state, and saving data via a PUT request.

This lecture demonstrates a front-end delete user flow with a password-confirmation modal using react-bootstrap and react-confirm. It wires the confirm dialog in the profile component and triggers a delete request.

Set up environment variables and a config module to define host, database name, user, and secret for the app. Wire these values into the server connection to prep for deployment.

Deploy a full stack React and Express app to Heroku. Create the app, configure frontend and backend, and set environment variables for ClearDB.