React Front To Back

Build a client-side React feedback app using components, props, state, events, and the context API, with real-time validation, update, delete, animations, and routing via a JSON server.

Kick off a hands-on React project using Create React App, install with npx, run npm start, and explore the public and src folders, index.html, and single-page app structure.

Learn to initialize a React project by setting up index.js, creating a main app component, rendering with ReactDOM, enabling StrictMode, and importing a global index.css for styling.

Learn how JSX lets you write HTML within React components as JavaScript, and understand one parent element, fragments, and attributes like class name and for attribute.

Render dynamic values in JSX with curly braces, use variables and expressions, map arrays to lists, and assign unique key props to each list item.

Learn conditional rendering in React by returning different JSX from loading and show comments flags, using if statements, the ternary operator, and the && operator.

Build a header component as a functional React component in a components folder, pass a text prop, render it with destructuring, and use default props and prop types for robustness.

Explore styling in React from global css to inline styles and css-in-js, passing header background and text color props, setting default props, and validating with prop types.

Learn how to manage component level and global state in React using the useState hook, including updating rating and text with setters, immutability, and previous-state patterns.

Build app-level feedback state with useState and default data, pass it to a feedback list and items, map to render, and show 'no feedback yet' when empty.

Create a reusable React card component, pass children, and apply conditional class or styles with a reverse prop. Define default props and prop types, sharing the component across the app.

Learn to add a delete button with react-icons, handle click events, and propagate a delete handler via prop drilling to remove an item by id with array filter.

Create a React feedback stats component that shows total items and average rating, takes the feedback array as a prop, and computes the average with reduce, formatting to one decimal.

build a feedback form with a text input and a planned rating selector, wrap it in a card, and bind the input to state with useState while handling changes.

Create a reusable button component for the feedback form with props for children, type, version (primary or secondary), and isDisabled, using shared btn classes and default purple styling.

Implement real-time validation by disabling the button until input has ten characters, with a conditional message guiding the user. The component stores btnDisabled and message state and updates on input.

Add a rating select component to the feedback form by introducing a ten-value radio button set, wiring it through state and a callback prop to update the form's rating.

Submit feedback by handling form submission, validating text length, and creating a new feedback object with text, rating, and a uuid id. Update the global state immutably to display it.

Add a fade animation to the feedback list using Framer Motion, wrapping the list in animate presence and applying a motion div with initial, animate, and exit opacity transitions.

Master routing in a React app using React Router DOM, compare version five and six, and build a home and about page with BrowserRouter and exact paths.

Upgrade your app by migrating to react-router-dom v6: wrap routes inside Routes, replace component with element for each route, and use a fragment for multiple components.

Create an about icon link in a React app, replacing anchor tags with React Router Link for instant client-side navigation, and explore path, query params, and hash options.

Discover how NavLink applies an active class to the current link and how useParams reads id and name from routes like post/:id and post/:id/:name.

Master React Router DOM v6 basics: use navigate for redirects, trigger navigation after actions, and set up nested routes like post and post/show with an asterisk catch-all.

Introduce a context and provider to manage global feedback state and wrap the app to expose state and actions via context.

Learn to access and share global state in React with the use context hook by consuming a feedback context, refactoring components to pull data from context, and removing prop drilling.

Move delete and add feedback functionality into the feedback context, using useContext to manage global state, remove prop drilling, and clean up app.js.

Enable editing of feedback items by clicking an edit icon to load the item’s id, text, and rating into a global edit state for form population.

Learn to populate a feedback form for editing by reading the edit object from context, using useEffect to sync text and rating, and enable the submit button.

Create an update feedback function that takes an id and updated item and updates the feedback list via context by mapping to replace the matching item.

Build static assets into a production frontend with npm run build, test the local build via serve on localhost 5000, and deploy to Netlify from a GitHub repository.

Fetch data from a json-server backend on localhost:5000/feedback using useEffect and the fetch api with async/await, update the feedback state, and set is loading to true to show a spinner.

Create and display a spinner component to indicate loading in the feedback list by wiring a loading state, conditionally rendering the spinner when data fetch is in progress.

Add a proxy to streamline requests to backend and implement post /feedback call with fetch, headers content-type application/json, and JSON.stringify body, letting json server generate ID automatically and persist data.

Learn to delete and update items against a json-server backend using fetch, including delete requests, put requests with json headers, and handling server responses to reflect changes in the interface.

Build a GitHub finder app using REST API to search users and fetch profiles, while managing state with reducers in context, styled with Tailwind and Daisy UI, deployed to Vercel.

Set up Tailwind CSS and Daisy UI in a new React app, configure Craco and PostCSS, install Daisy UI, and verify utility classes and Daisy components.

Learn to build a responsive navbar component for the GitHub Finder app, with React Router, icons, and Tailwind/Daisy UI styles, including home and about routes.

Create a pages folder with home, about, and not found, then configure React Router v6 routes for /, /about, and a catch-all to not found.

Explore the GitHub rest api by querying endpoints like /users and repos, and learn to use a personal access token via environment variables to manage rate limits in React apps.

Display users from the user results component by rendering a reusable user item with login and avatar, including a visit profile link, while preparing to move state to context later.

Set up a global GitHub context to manage users and loading state, introduce reducers for scalable state management, and wire the context with a provider and fetch users.

Implement reducers and the useReducer hook to manage GitHub state, dispatch actions with types and payloads, and update users and loading via a centralized reducer.

Clean up fetch users by removing the test fetch, manage loading with a reducer and a set loading action, and prepare the state for a future user search component.

Create a user search component that renders a search form on home page and uses useState to manage input. Submit triggers a GitHub API search to populate the users state.

Learn to implement a GitHub user search feature by wiring a search endpoint to the form, using url query params, dispatching the items payload, and clearing results.

Learn to clear the users by dispatching a clear_users action from context and wiring the clear button on click to reset the users array in the reducer.

Build a reusable alert context with a reducer in React, dispatching set and remove alert actions after three seconds, wired through providers in App.js to display alerts across the app.

Fire alerts from a React alert context by calling set alert with a message and type. Build an alert component that reads the state and auto hides after three seconds.

Build the user profile page by rendering avatar, name, login, location, bio, and a list of repositories, with a loading spinner, icons, and a link to the GitHub profile.

Create a React user profile stats panel showing location, website, Twitter, and stats like followers, following, public repos, and public gist, with a plan to fetch latest repositories.

Fetch a user's repositories from GitHub, store them in context via get user repos and reducer, and render a latest ten repos list in a repo list component.

Build a reusable repo item component in React to display name, description, watchers, stars, and issues with icons and badges, and prepare for refactoring with an actions file and context.