Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Crash Course Including React Hooks
Rating: 4.4 out of 5(30 ratings)
1,147 students
Created byJim Cooper
Last updated 4/2023
English

What you'll learn

  • Create a React application from scratch
  • Use React's JSX syntax
  • Create React components
  • Communicate between components
  • Style React components with CSS in JS, CSS classes, CSS modules, and SASS
  • Display images in React components
  • Bind to data in React components
  • Handle user input with events
  • Manage component state with the useState() hook
  • Access API data with the useEffect() hook
  • Use React Router to define routes and pages (URLs)
  • Link to routes/pages
  • Access URL query/search parameters
  • Define and use route parameters

Course content

4 sections22 lectures1h 5m total length
  • Course Introduction0:59

    In this lecture, we will discuss getting started with React JS and cover the topics that will be presented in this course including React Hooks.

    Topics in this course include Getting started with react, using CreateReactApp to bootstrap new react applications, JSX, building custom react components, styling components, using the react-router for navigation, React hooks like use effect and useState, accessing API data, and more.

  • What is ReactJS?1:48

    In this lecture, we'll give you a quick introduction to ReactJS and ReactJS basics. This tutorial is perfect for beginners looking to learn React and wants a quick introduction to the React concepts. React is a popular JavaScript library that is used for building user interfaces. With React, you can create reusable components that make your code more organized and efficient. In this tutorial, you'll learn why React is becoming increasingly popular and why you should consider learning React in 2023. We'll be explaining React in 90 seconds in an easy-to-understand way and give you a tutorial for beginners on how to get started on your React journey. By the end of this tutorial, you'll understand the basics of React and be ready to start building your own projects.

    We'll also be discussing react JavaScript course, react explained, react tutorials for beginners, why you should learn React, and how to learn React, so you can make an informed decision about whether or not React is right for you.

  • Get Started With React2:38

    In this React tutorial, we will show you how to get started with React in under 3 minutes. This is the second in a series of fast-paced videos that will help you quickly learn and understand key concepts in building React applications and websites. Whether you are new to React or just looking to refresh your knowledge, this tutorial is the perfect starting point.

    We'll take you through the React starting process & cover the basics of React, including the React app workflow and how to create your first React app. By the end of this tutorial, you will have a solid understanding of the React learning path and be well on your way from How to start with React to mastering React.

  • Exploring the React App Startup Process2:08

    In this lecture, we will be exploring the React app startup process and showing you how to start with React. This is the third in a series of fast-paced videos that will help you quickly learn and understand key concepts in building React applications and websites. Whether you're just starting out with React or looking to refresh your knowledge, this tutorial is perfect for anyone looking to learn the basics of React in 2023. We'll cover the react starting process, react basics, and the react app workflow, including how to create your first React app.

    We'll also provide a React learning path for those just starting out and a guide on how to learn React from scratch. Our expert instructor Jim Cooper will walk you through the process of understanding how a React app works and how to learn React in 2023. You'll gain a solid understanding of how a React app works, and how to learn React in no time.

  • Exploring ReactDOM in React1:00

    In this lecture, we will be showing you how to React uses ReactDom behind the scenes to efficiently render content and changes to components and component data. Understand and use ReactDOM. ReactDOM is the JavaScript library that React uses to manipulate the Document Object Model (DOM) in the browser. It allows you to mount and update React components in the actual DOM, making it an essential part of React's virtual DOM system. Our expert instructor Jim Cooper will guide you through the basics of ReactDOM, including an introduction to the virtual DOM and how React uses ReactDOM to manipulate the DOM in React. This part of a series of fast-paced videos will help you quickly learn and understand key concepts in building React applications and websites.

    We will also explain the difference between the real DOM and the virtual DOM in ReactJS, as well as cover the how React uses React Dom to render content. Whether you're just starting out from scratch with React or looking to learn how React uses ReactDOM, this tutorial will help you understand how React interacts with the DOM using ReactDOM's render method.

  • Exploring JSX Syntax in React3:45

    In this video, we will be exploring JSX syntax in React and providing a complete beginner's guide to JSX basics. JSX is a syntax extension for JavaScript and is used in React to describe the structure of UI components, and It's a powerful tool that allows you to create and manipulate elements in React. JSX allows you to mix HTML and JavaScript, making it easier to create and manage your React components. This part of a series of fast-paced videos will help you quickly learn and understand key concepts in building React applications and websites.

    This lecture will guide you through the basics of JSX and its use in React, including an introduction to JSX, what is JSX in React, and JSX for beginners. He will also explain how to understand JSX for beginners, how to use JSX elements, and how to create React apps using JSX. Whether you're just starting out with React or looking to learn JSX from scratch, this tutorial will help you understand how to use JSX in React, how to create React components, and how to use React's rendering elements.

  • Assess Your learning

Requirements

  • A working knowledge of HTML and JavaScript is highly recommended.
  • A basic understanding of CSS is recommended but is not required.
  • An understanding of specific JavaScript features including: Arrow functions, arrays, and array functions such as map() and filter().
  • You do NOT have to be a JavaScript, HTML or CSS expert to take this course.

Description

Welcome to my React Crash Course Including React Hooks, your quick start guide on how to create React applications.


My name is Jim Cooper and I am an experienced video course author with more than 25 years of software engineering experience and 10 years of experience creating technical, front-end development learning content. In this course, I will walk you through building a React application from scratch.


By the end of this course, you will be able to create a new React application from scratch using create-react-app and understand key React JS terminology including ReactDOM and React JSX syntax.


This course skips over the boring introductions and summaries and quickly demonstrates, in code, how to create React applications. This is a particularly helpful format for experienced developers who are wanting to learn React.


This React crash course begins by teaching you how to create a new React application from scratch using create-react-app, including an introduction to how the plumbing of how a React app is bootstrapped. You'll learn what react is, how it uses ReactDOM to efficiently render content, and the important parts of React's unique JSX syntax.


In addition, you'll learn how to:

  • Create your own React JS components

  • Style your React components with css, css modules, and SASS

  • Display data and images in your React components

  • Share data across React components

  • Manage React component state (data which changes over time) with the useState() React hook

  • Respond to user events including mouse clicks

  • Define and link to URLs, routes and pages

  • Use URL Query and Route Parameters

  • Share state (data) across multiple React components

  • Access API data with the fetch() and useEffect() React hook


You'll learn all this and more as we build an e-commerce website that's both interesting and relevant to modern web development in this React Crash Course. The application built can be accessed on Github and the Github repo contains a checkpoint for each video in the course, so you can easily explore the application at any given point in the course.


You can apply the knowledge you learn in this course in your career as a React JS developer to sharpen your skills and stand out in today's competitive job market.


With all of that in mind, I hope to see you inside!

Who this course is for:

  • This is a FAST-paced course intended for developers who are brand new to React.
  • You don't need to be an expert developer to learn React from this course, but brand new developers may find it too fast-paced.
  • Experienced developers will love the fast pace and focus on quick delivery of the most critical information.
  • Non-developers and brand new developers may find this course too fast paced.