React Front To Back

Explore a GitHub finder project that teaches refactoring from class components to functional components with hooks and context, implementing useState, useEffect, useReducer, and useContext to manage app and alert state.

Learn to bootstrap a React app with Create React App and run a dev server. Understand the public index.html root div, the app component, and ReactDOM rendering.

Clean up a create react app by removing service worker, logo, and tests, then convert the App component to a class-based component with render and lifecycle, plus a css file.

Learn how JSX, a JavaScript syntax extension, renders React components with an HTML-like output, and use fragments and the proper className and HTMLFor attributes to maintain a single parent element.

Explore expressions in JSX by embedding variables, JavaScript expressions, and methods with curly braces, and master conditional rendering with if, the ternary operator, and the double ampersand approach.

Create a class-based nav bar component, rendering a nav with a title and an icon. Define default props and prop types to enforce strings for title and icon with isRequired.

Learn component level state in a React front to back course by building a user item with avatar, login, and profile link, later converting state to props.

Create a users component that maps a users array to multiple user item components, passing each user as a prop and using unique keys for the list.

Refactor class-based components into stateless functional components using props and hooks, employ destructuring and prop types, and move state to the top-level app for centralized state and data from GitHub.

Fetch real github users in componentDidMount using axios, store users in app state, and pass them to the users component via props, showing a spinner while loading.

Create a spinner component and refactor the users list to a functional component, wiring in loading state, prop types, and GitHub API credentials with environment variables.

Register a GitHub app to obtain a client ID and client secret, store them in a .env.local file as environment variables, restart the server, and begin a GitHub user search.

Create a class-based React search component with a text input for usernames, using a controlled state and onChange to update text, and handle submit to prepare a GitHub user search.

Learn to pass search input up via props in a React app, call the GitHub /search/users endpoint with ?q=, manage loading, and render results.

Add a conditional clear button that resets the users state to an empty array and loading to false, wired via a clearUsers prop and a showClear boolean to control visibility.

Build a React alert system that shows a message when the search is empty, sets an alert with message and type, and auto dismisses after five seconds.

Set up react router v4 to create home and about routes, wrap the app in a browser router, and use link components for client-side navigation.

Fetch a single GitHub user via the /users/:login endpoint, manage loading state, and render the user's profile data in a dedicated React component with router-based navigation.

Build a responsive user profile UI in React, leveraging props, show a spinner while loading, and render avatar, name, location, bio, hireable status, and GitHub link in a card layout.

Display a user's repositories with a repos component and a repo item, fetching five via the GitHub API using per_page=5 and sort=created, and render each as a linked item.

Explore how hooks and the context API empower functional components, using useState, useEffect, useContext, useReducer, and useRef to manage GitHub state without prop drilling.

Refactor a class-based search component into a functional component using the useState hook, converting state management, props handling, and event logic for search and clear actions.

Convert a class-based user component to a functional one using the useEffect hook, destructuring props, and mimic componentDidMount with an empty dependency array.

Convert a class component to a functional component using useState and useEffect to manage users, repos, loading, and alerts, then introduce the context API for scalable app-level state management.

Learn to implement the context API with useContext and useReducer as a lightweight alternative to redux for managing app-level state in small to medium apps.

Move app state to the GitHub state provider, implement a reducer and actions like set loading and search users, and connect components via use context to share users data.

Move user state into a GitHub context and access it with useContext, dispatching actions to fetch, clear, and display users and a single user across components.

Move repos state into the GitHub context, replacing props and render props with a context-driven approach and dispatching get repos with loading while removing axios usage.

Learn to implement an alert context in React with a dedicated alert state and reducer, providing a global alert via a provider and dispatching set and remove alert actions.

Create a home component in the pages folder and a not found component, wire routes so non-existent paths show a not found message, and prepare for deployment to Netlify.

Learn to deploy a React app to Netlify using the Netlify CLI, configure environment variables for production, initialize with Netlify, and publish the production build via the build folder.

Build a full stack mern application with a back-end api secured by jwt for authentication. Register, login, and manage contacts with route protection and frontend state via context api.

Set up a cloud MongoDB Atlas database for your Node Express application, create a cluster, add a user, whitelist IPs, and obtain a connection string.

Learn to test a backend with Postman, set up a basic express server on port 5000, create a hello world endpoint, and plan modular routes for contacts, users, and more.

Set up express routing for a react app by creating users, auth, and contacts routes, exposing API endpoints for register, login, get logged in user, and CRUD operations.

Connect MongoDB to the app by configuring a default.json with the Mongo URI and using mongoose to connect with async/await, logging 'Mongo DB connected' on success.

Create a Mongoose user model with name, email (unique), password, and register date; configure Express JSON middleware and express-validator checks for name, email, and password, returning 400 with validation errors.

Complete the register route validation, check for existing users by email, hash the password with bcrypt salt, create and save the new user, and handle errors with appropriate responses.

Sign a JSON web token with the user ID, issued at, and expiration using a config secret, then verify token header with middleware to extract the user ID for authentication.

Implement an authentication route that validates email and password, compares passwords with bcrypt, issues a JWT token, and prepares middleware to verify tokens for protected routes.

Implement an authorization middleware using JWT to protect routes by verifying tokens from the header, attaching the user to the request, and testing a protected endpoint.

Build a contact model linked to users using mongoose, create a route to fetch a user's contacts with protected access, sort by date, and test with token authentication.

Create a protected post route to add a contact, validate the name with express validator, extract name, email, phone, and type from body, and attach it to logged-in user.

This lecture shows how to implement update and delete routes for contacts using off middleware and a token, including ownership checks and not authorized handling with findByIdAndUpdate or findByIdAndRemove.

Set up a react frontend in a client folder and run both express backend and react dev servers concurrently with a proxy for axios requests.

Learn to scaffold a React app, clean the repo, install axios, react-router-dom, uuid, and react-transition-group in the client, and set up a navbar with home and about routes.

Create a contacts context and state with a reducer, initialize with hard coded contacts, and wrap the app with a provider to manage contacts, alerts, and future authentication.

Build a dynamic contacts feature by creating contacts and contact item components, consuming the contact context, mapping state to a list, and styling with type badges (professional or personal).

Build a contact form component that uses a single contact state object, handles on change for name, email, phone, and type, and dispatches add contact via context to update UI.

Delete a contact from the UI by wiring a delete action in the contact item component through context, dispatching the delete contact action with the contact ID, and updating state.

Implement edit functionality by managing a current contact in state, expose set current and clear current actions, and reflect changes via the contact state context.

Explore editing and updating a contact in a react app by loading current data into the form, updating via context and reducer, and toggling between add and edit states.

Implement a contact filter form that filters by name or email using a dedicated filtered state and regex matching via filter and clear actions in a React context.

Add and delete animations to your contacts with React Transition Group, fading items in and out through item enter and exit transitions.

Introduce an express-backed auth context in React, with state including token from localStorage, isAuthenticated, loading, user, and error, plus actions load user, register, login, and logout, and plan private routes.

Create register and login forms using useState to manage name, email, password, and confirm password, with onChange and onSubmit handling and routes for /register and /login.

Learn to build a reusable alert system in React with a dedicated alert context, reducer, and component, featuring set and remove actions, auto-dismissal, and form validation integrations.

Register a new user with axios post to /api/users, handle the token, store it in local storage, and trigger alerts for errors while updating auth state.

load the current user from the backend, store the token in a global axios header, and validate authentication to access the protected home page.

Implement the user login flow by reusing the register logic to post form data to the API slash off endpoint, store the token in local storage, and load the user.

Implement logout and the navbar using auth context to show or hide links based on authentication, dispatch logout, and prepare a private route to block access when not logged in.

Create a private route to guard the home page using the auth context and its loading value. Redirect unauthenticated users to login, and render the specified component when authenticated.

Learn to add a contact to the database by sending a post request, updating state via dispatch, and handling errors while using MongoDB ID conventions.

Learn to fetch and clear user contacts in a React front-to-back workflow by calling the backend API, managing loading states, and clearing data on logout.

Demonstrates deleting contacts in the UI and persisting changes to the server. Uses a delete request with the MongoDB underscore id, updates the reducer, and handles errors with try/catch.

Update contacts on the server from the front end using a put request with the contact ID and updated data, enabling full create, read, update, delete functionality.

Deploy a full stack React app to Hiroku using Git and the Seelie CLI. Configure production assets and a post build script to serve the client build.