React Web Development || Become a React Developer

Jump into React web development by solidifying JavaScript fundamentals and ES2015 features. Learn to set up tools and explore real-world coding examples to build web apps.

Install node.js and npm, then install and use create-react-app to scaffold a React project, leveraging a tool that transpiles Acme script 6 to older JavaScript for browser compatibility.

Use a package manager to generate your first React application by initializing a new project in a chosen folder, then explore the generated files in Visual Studio.

Set up a React project, review package.json dependencies, and explore src and public folders. See how ReactDOM renders the app into the root div and why the index.html root matters.

Learn how variables act as data containers and how to use let for mutable values and const for immutable ones, with practical examples of strings, numbers, and booleans.

Explore arrow functions in acme script 6 by converting ordinary functions with const and the arrow syntax, and learn about parameters, optional parentheses, and this keyword scope.

Learn how to use import and export to split code into multiple files, choose between default and named exports, and import modules across your app for readability and maintainability.

Learn to export multiple functions with named exports instead of a single default export. Import them with braces, as in import { login, logout } from './login', and export functions.

Render a name variable in browser by returning it in an h1 tag using JSX within a React function, with React in scope and the value inserted via curly braces.

Discover how to use array methods in React by mapping an array to render each name, using callbacks and arrow functions, and previewing find and filter for data handling.

Learn how to use the array filter method in React to select ages over 18 and render them with map, including short and long syntax demonstrations.

Learn how to use the array find method to locate a specific item in a list, such as finding a user by age, within React development.

Explains how to use ES6 objects to store complex data with key-value pairs, access properties by dot or bracket notation, and perform object restructuring to extract and rename properties.

Explore how to create an array of objects, export and import it, and render items with map in React using h1 and b tags to show name, age, and job.

Learn how template literals in JavaScript simplify string building by embedding dynamic values with ${} inside backticks, replacing concatenation for readable output like my name is and my age is.

Learn how to replace if-else with the ternary operator in React and JavaScript, using an age check example to return 'you are allowed' or 'you are not allowed'.

Apply learned techniques to build a React example that uses arrays, objects, ternary operators, and template literals to render a users list with map and a no items found message.

Use the spread operator in ES6 to clone arrays and objects. Learn the three-dots syntax and how to update properties.

Learn how the rest operator in ES6 lets a function accept any number of parameters, collect the extras into an array, and access them by index with a showNumbers example.

Learn to build a React list with conditional rendering by scaffolding a new project, initializing with npm, and starting to code with your data.

Explore the React project structure by reviewing node_modules, public and source folders, and the index.html as the app entry, then delete the default source to start from scratch.

Create a json data file for a react app, building an array of course objects with id, title, author, price, image, and categories to render the view.

Create the main app files by setting up React, creating an index.js and a components folder, and wiring ReactDOM to render a home component into the root element.

Install and enable life server and react snippets extensions, then create a simple JSX component, export it, and run the app to render to the user.

Install essential extensions like prettier and symbol react snippet to speed up coding, enable format on save, and customize the winter is coming theme for clear visuals.

Create a new data file and a courses list component in the components folder, build a functional component, import it in index.js, and render a simple courses list for users.

Import and use the created courses data array, map through it in React to render each course with a unique key, and resolve the list key warning.

Render dynamic course data in the browser using jsx by mapping over a courses array to display image, title, author, and price with proper class names for styling.

Style the course list in a React app by creating a dedicated courses list component, importing CSS, and using flexbox to lay out course cards with responsive images and spacing.

Create a separate course item component and render it by mapping over a courses array, using each item's id as a unique key.

Learn to pass data between components using props, sending a course object from the course list to the course item, and access it with object destructuring.

Learn to style a React course item with css using bem notation, define classes like course__title, course__author, and course__price, and apply borders, padding, and display rules for clean layout.

Improve user experience by adding a dollar sign beside the price, organizing price elements with divs and flex layout, align items, and add a 'by' before the author name.

Master conditional rendering in React by checking the courses array length and showing a no items found message. Then map items when present and apply dynamic class for hot courses.

Add a top overlay on the image with adjustable opacity and color to improve readability, and render items with map in React web development.

Learn to add navigation and render components by route, with active states for blogs, jobs, and courses. Explore routing and dynamic course details, including title, categories, price, and description.

Build a nav bar component in a React app by structuring header and navigation markup and using react-router-dom for routing.

Style the navigation markup with flexbox to align header content and buttons in one line, with 75% content width and 25% for buttons, plus shadows and gradients.

Learn to set up react-router-dom, wrap your app with BrowserRouter, and render different content or item details via routes, following installation and basic routing steps.

Define routes in a React app to control content by URL, using a root path with exact matching to load components and a shared navigation across pages.

Learn how to structure React routes with a switch to render first matching route and use redirect to send root requests to /home, using components like about, blog, and jobs.

Learn how react router handles redirects and path matching with the exact prop, and route users to home, about, or not-found pages as you build React apps.

Replace anchor tags with NavLink from react-router-dom to control routing without extra requests, and implement nav link attributes for about, jobs, blog, and courses routes to boost performance.

Explore the difference between Link and NavLink in React Router, learn how active class styling reflects the current component, and implement navigation with transitions and accessible routing.

Learn to control the url in a react web app using react-router-dom, with routes, exact paths, redirects, a switch, and Link usage for active navigation.

Turn each course item title into a clickable link that navigates to a dynamic course page using a link component, composing the path with the course id (e.g., /courses/{id}).

Create the course details component and define a dynamic route for the course path, using a parameter like idea to render course details and prepare data fetching.

learn how to read route parameters in React Router by accessing props.match.params.id to dynamically render course details, using history and location to navigate between items.

Learn to fetch the correct course by id from a local courses array, convert string ids to integers, and use find to display the matching course.

Learn to build a course details view in react, structuring an image container and a content section that includes status, title, description, price, and category handling with precise class names.

Render course details dynamically by mapping categories stored in an array, then display students and publish date on a React course details page.

Learn to style the course details component with a responsive flex layout, set image and content widths to 45% each, center the block, and apply box shadow and spacing.

Style the course details and status by using absolute positioning with a relative parent, and fine-tune the title, price, and categories with color, font size, and flex layout.

Explore real examples of using React Router to build tabbed content and navigation, see how clicks update the URL while swapping the main content, and preview handling events.

Master arrays of objects in React and build data-driven interactions by implementing search and filtering features for dynamic lists.

Master state management in React by shifting from static data to a central state that tailors what users see. Compare class-based components, Redux, and context or hooks as scalable options.

Convert a functional course list component into a class-based component by extending React.Component and implementing a render method to display and modify information, preparing for future state management.

Learn how to initialize a class-based React component with a constructor, set up state as an object, define a courses property, and access and map state data for rendering.

Review what we learned to build our estate management tool, focusing on using the constructor to initialize data and managing state as a JavaScript object within a component.

Implement input markup in a React render method, building a search form with an input, placeholder text, and class-based styling to align and style course search results.

Get the value from the input in React by handling the onChange event, reading event.target.value, and using it to filter the item list.

Convert an uncontrolled input into a controlled element by binding its value to state and updating it from user input using onChange. Manage input state with setState to reflect changes.

Implement a case-insensitive title filter on the courses array using the filter method, map the filtered results for display, and compare titles by converting both to lowercase.

Learn a second approach to filtering courses in React by filtering first, then mapping, and calling a dedicated filter courses method during render.

Learn to implement basic sorting for a filtered list in a React app by using array sort on price, and prepare a dropdown for user-driven sort options.

Improve user experience with conditional rendering in React by adding validation for empty results, displaying no items found messages, and combining filtering and sorting with dynamic classes and focus-driven styles.

Learn to sort courses in a React web development app using a dropdown to order by price or title in ascending or descending order.

Add a select input to enable sorting a course list by title, price, or students, using option values that map to data properties and a default ascending order.

learn to access select values with onChange, store them in state (short term and sort order), and drive ascending or descending sorting, then refactor to a single handle input function.

Explore implementing sort functionality in a React app using lodash to sort courses by price or title after filtering, including installation, import, and switching between ascending and descending orders.

Learn to sort arrays of objects with lodash's orderBy, understand that it does not mutate the input, and assign the result back to the array, while exploring lodash documentation.

Explore styling the select input in a React form by applying classes, targeting inputs, and adjusting height, width, and margins to build a clean search and filter UI.

Refactor your React code by removing redundant handlers and unifying input management with a single handleInput function that updates state via event.target.name and event.target.value for inputSearch, shortTerm, and sortOrder.

Refactor the course list by extracting the form into a component to reduce file length; wire up props for input handling, filtering, and search and sort by title or price.

Focus on forums by implementing signup and login forms with input validation and error messaging, exploring different validation approaches across forms and preparing data submission to a database or API.

Discover why using a third-party validation library simplifies form validation in React, illustrated with a signup form and the challenges of vanilla JavaScript validation.

Explore three popular react form validation options—Formik, Joy, and Redux Form. Formik provides forms and validation, while Joy handles validation alone, guiding you to install Formik in the next video.

Create a sign up component in a React project, implement a functional sign up form, and wire it to the navbar.

Install formik and yup, then build a signup form with a yup schema that validates username (min four chars), email, and password (min six), enforcing required fields.

Import formik from the library, set initial values for name, email, and buzzword, and apply the signup validation schema to enforce input rules.

Implement the signup function in a React form by wiring onSubmit to a signUp handler, rendering a div and a render callback for future inputs.

Build a reusable custom input component in React that accepts value, onChange, name, type, placeholder, and error props, and use it in the signup form.

Learn how to retrieve and validate form values using a validation schema, handle submit via onSubmit, and log user inputs from a sign up form in a React setup.

Develop and style a react form by building a reusable input component with dynamic error states, container layout, and a centered submit button with a focus animation.

Define a form schema with name, email, and password, and set initial values. Apply a validation schema, handle changes, errors, and submission in formik.

Create and test a login component with its markup, wire the route, and verify navigation to the login view; the next video covers handling the login form with Formica.

Create a login validation schema with yup by defining an object shape for email and password, applying email validation, required rules, and a minimum length to ensure valid input.

Learn to build a login form with Formik by wrapping inputs in a Formik component, and set initial values and a validation schema. Wire on submit to a login function.

Render form fields with Formik by wiring email and password inputs to initial values and validation schema, using the form and field components, and preparing error handling.

Render form errors in React with Formik, displaying real-time messages for fields like email and password. Inspect props to map errors to screen elements and prepare for per-field validation.

Implement per-field validation for a login form by using touched to detect focused fields and render errors only for email or password when touched.

Build a functional login form with validation and error handling. Apply dynamic classes for email and password to show errors and ensure smooth functionality before styling.

Learn how to capture login values, log them to the console, and fix accessibility warnings by setting the submit button type, while using a validation schema and initial values.

Learn what an API is and how it enables your React app to use features like video sharing without building them. Understand behind-the-scenes processing and promises in API usage.

Learn how endpoints and API keys enable web apps to fetch data from providers like YouTube or Instagram, by making targeted requests to specific URLs.

Explore how to interact with an API endpoint by sending different request methods—get to retrieve data, post to create, update to modify, and delete to remove data—using practical examples.

Learn how to make API requests with Axios, including get requests, endpoints, and handling promises with async/await for clean, asynchronous data retrieval in frontend development.

Think about building a React app by defining reusable components, photo list and photo item, setting up a from-scratch project, and organizing the source folder for clarity.

Learn why a React list requires two components: a class-based container photo list that fetches and stores images, and a functional photo item that renders them.

Explore what an API is and how web APIs let you access data from services like photos or videos, using API keys and libraries such as axios to request data.

Explore React class-based components and the lifecycle methods, including constructor, render, and componentDidMount. Learn how mounting vs updating triggers renders and how state changes affect the render cycle.

Mount the component to render data, then make a GET request to fetch data from an API. Configure a request with an authorization header and API key to authorize access.

learn to fetch data from an API using async/await, handle promises, and inspect the returned data object with photos, while configuring authorization headers and logging results.

Fetch API data and store it in the component state, then render the photos by accessing this.state.photos in render.

Render a photo item by mapping over a photos array and passing each photo as a prop to a PhotoItem component, ensuring unique keys.

Learn to add the markup for a photo gallery in a React project. Repeat the structure for each image, with a photo__item, photo__image, and photo__buttons.

Learn to render images in React by binding dynamic sources, using landscape photos, and adding alt text while inspecting the console and linking to original images.

Create and style a photo list in React by building a photo item and photo list components, applying flexbox layouts, borders, margins, and container styling.

Understand API usage guidelines, including legal considerations and promotional source credits, with examples from the Unsplash API and Pixels, and note 200 requests per hour versus unlimited access.

Learn to consume different APIs to fetch image and user data, display images with links to profiles, sort content, and build an intermediate-level React app with forms and API calls.

Generate a new reactor project from scratch, keep a reference app, set up in the terminal, name it, and open it in VS Code.

Set up a React project, clean up starter files, and start the development server to preview the image gallery in the browser.

Create two components for the image gallery: a class-based item list and a functional item, organized in a src/components folder and rendered with the icon list.

Learn to add the componentDidMount lifecycle method to fetch data from an API, initialize state for photos, and store the results for rendering in a React component.

Create an application and obtain an API key for the Unsplash API. Read the documentation and follow guidelines to build an educational image gallery in this course.

Install axios, import it, and perform a get to the /photos endpoint with client id and api key authorization headers. Await the response and log the photo data.

Fetches data from the splash API, renames the data property to photos, stores it in state, and maps photos to PhotoItem components with unique keys.

Pass photo data via props from the photo list to a photo item, then render a markup-driven image container showing created time, updated time, likes, and the photographer.

map photo data to the user interface by binding src, thumbnail, description, created at, updated at, likes, and user name with a profile link and original image url.

Define routes with react-router-dom, set up a browser router and switch, and render a photo list and a dynamic user detail page at /users/:userName.

Learn to convert a username into a dynamic link that routes to a user profile by fetching /users/{username} and navigating to a detail screen in a React app.

Extract the username from the url, fetch that user's data from the splash API, and store it as an object in state for rendering a single user profile.

make a get request to the base api to fetch a user's profile by name using async/await and authorization headers with client id and api key.

Refactor api calling by extracting a reusable axios instance and headers into a dedicated access file, enabling consistent base url and get requests for users and photos.

Learn to build the user info component in a React app by creating structured markup with a title, image, profile link, and a dynamic photos section, using clear class naming.

Learn how to navigate to a user info component, fetch and store user data in state, and conditionally render a loading indicator before displaying the user's information in React.

Display real user information from state by binding name, bio, and a large profile image in React, using conditional rendering to handle API data and prevent undefined errors.

Learn to implement a user profile link and fetch data from an API, handle loading states, and use conditional rendering to display the profile image once data loads.

Finish the section by rendering a user's name, profile image, and a thumbnails gallery from user.photos using map with unique keys and conditional rendering to handle unloaded images.

Style a responsive user info component in React by composing a compact layout with a profile image, title, and view profile link using flexbox, width adjustments, and subtle shadow effects.

Add the photo form component to the React app, render it with the photo list using a React fragment, and ensure a single return for clean, efficient UI.

Add a select input to the form and populate its options from api properties like created_at, updated_at, and likes. Include a second select for sort order with ascending and descending.

Sort a photos array in a React app using sort term and sort order, toggling ascending or descending with lodash and rendering the sorted results via state-driven mapping.

Learn to sort and filter photos in a React app by wiring select inputs to a shared onChange handler that updates state using event.target.name and event.target.value.

Build a reusable API module with headers and authorization, use axios or fetch to access endpoints, review API keys, and outline basic error handling for a real-world application.

Style our photos component by using a grid library to handle different image heights, then install and use stack grid with a width of 400.

Adjust image sizing and grid spacing in a photo gallery by creating a photo item component, tweaking width, and applying gutter width and height to improve layout and image quality.

Finish styling the photo content with padding and a flex layout; set photo buttons to a background, white text, and pointer cursor, and display likes, created at, and updated at.

Explore how to build a front-end authentication flow in React by connecting the front end to a custom API, implementing sign up and login with form validation.

Analyze the sign up, login, and home components in a React project, exploring Formik-based validation and the sign up and login functions that send user data to an API.

Learn what a baseURL is and how to use it to configure an axios API client, create an API folder, and wire a dummy API for your React project.

Learn to implement signup authentication with a post request to a base URL endpoint using a custom axios instance, sending user name, password, and email.

Learn how to send the exact information an api endpoint expects, create fields for first name, last name, email, and password, and validate types with a yup schema.

Create a user object from form values by mapping fields to documented properties, then send it to the API to register the user; use formik to auto-create payload when available.

Learn to handle asynchronous operations in JavaScript using promises and the async/await pattern, placing await inside an async function and correctly structuring code for API calls.

Learn to implement the login in a React app by posting to /auth/login with email data using axios and a custom access module, and handle the async login flow.

Build a React authentication API using Express and MongoDB Atlas, creating a free cluster, adding a database user, whitelisting your IP, and wiring the connection with an .env file.

Connect the API to the React app by starting the API, verifying MongoDB cloud connection, and running the React frontend on port 3001; next, implement user signup and login.

Learn to implement a sign up flow by sending a post request to the registration endpoint with email, username, and password, and handle api errors that may occur.

Implement user login in a React app by sending email and password to the login endpoint via the login component, and understand how the API authenticates existing accounts.

Diagnose cors errors caused by cross-origin access control headers between your app and a separate API server, and learn practical steps to test and fix with a library.

Learn how the API redirects after signup to the login screen, handle login to receive a JSON web token, and use that token to verify authentication for protected actions.

Store the login token in localStorage to persist sessions and navigate to the home. Decode the JSON web token to display the logged-in user's name in the navigation.

Access the token from local storage in the nav bar, decode it with a library, and display the user name on the screen.

Fix react errors by handling missing user data from storage with try-catch, exposing the user, and using conditional rendering to hide sign up and log in when a user exists.

Apply conditional rendering in React to show login and signup or the user name based on presence of a token; wrap elements in a React fragment to enable clean returns.

Add a logout route and navigation link in the React app, display the logged-in user name, and create a logout component to handle sign-out using local storage token.

Build a logout component with logout and cancel buttons, delete the token from local storage, redirect to the home page, and display the logout option only if a user exists.

Explore building a scalable React app with a simple API, including login, sign up, and email verification, then master Redux and hooks for robust state management.