React Crash Course Including React Hooks
- Description
- Curriculum
- FAQ
- Reviews
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!
-
1Course IntroductionVideo lesson
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.
-
2What is ReactJS?Video lesson
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.
-
3Get Started With ReactVideo lesson
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.
-
4Exploring the React App Startup ProcessVideo lesson
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.
-
5Exploring ReactDOM in ReactVideo lesson
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.
-
6Exploring JSX Syntax in ReactVideo lesson
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.
-
7Assess Your learningQuiz
Answer the following questions to assess how you have retained the information in this section and to identify areas you may want to review.
-
8React Component Basics: A Guide for beginnersVideo lesson
In this lecture, we will cover React Component Basics for beginners and what you need to know to get started. From creating learning how to create React Components Types to learning how to use them in other components, you'll learn the basics in no time. Plus, this React component tutorial will help understand the different types of React Components, including functional and class components.
I will guide you through the basics of React components, and walk you through the process of creating your own React component example in an easy-to-understand manner. Whether you're just starting out with React or want to improve your React basics, this tutorial is perfect for you. This react component beginners guide is designed to help you master React Components and take your React skills to the next level.
-
9Styling React ComponentsVideo lesson
In this lecture, we'll be diving into the exciting world of "Styling React Components". Styling in React can be a bit tricky, especially for beginners. If you're new to React or just starting to learn about styling React components, this video is perfect for you! We'll take you through the basics of how to style React Components and show you how to create stylish and functional components with ease.
We'll take a deep dive into how to style React components, Our focus will be on making the process of styling React components as simple and straightforward as possible for beginners. We'll also cover topics like how to use styled-components, css classes, and inline styles to enhance the look and feel of your React applications. We'll be walking you through the process step-by-step, so even if you've never styled a React component before, you'll be able to follow along with ease. Whether you're building a small project or a large-scale application, you need to know how to style your React components effectively. With the help of Lightspeed Academy, you'll be able to create beautiful, functional, and user-friendly applications that stand out from the crowd.
-
10How to Use CSS Modules with React for Better Component StylingVideo lesson
In this lecture, you'll learn the power of using CSS Modules with React for better component styling. React CSS has never been easier or more effective than with the use of CSS Modules. Get an understanding of React CSS and discover how to use CSS Modules to enhance the styling of your React components.
I will take you through the step-by-step process of using CSS Modules with React and show you how to make the most of React with CSS. I will explain CSS Modules in English and show you how to take your styling to the next level and understand how they work with React component styling.
By the end of this lecture, you'll have a solid understanding of how to use CSS Modules to create and style stunning and effective React components. Whether you're a beginner to React or just want to learn about styling in React, our react tutorial will provide you with the knowledge and the basics of React and styling with CSS Modules.
-
11Styling React With SAASVideo lesson
In this beginner's guide lecture, you will learn how to use SASS for React styling and how to incorporate SASS into your React projects. Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that makes it easy to write reusable, maintainable and scalable styles. If you're just starting out with React and want to learn how to style your components using SASS, then this tutorial is for you.
This Sass tutorial in English is specifically designed for beginners and we will be covering everything from the basics of SASS to how to use it to style your React components. With step-by-step instructions and practical examples, you'll learn how to use SCSS (Sass CSS) syntax in your react styles and how to install the necessary node-sass dependency so you can use SASS to write clean, maintainable, and efficient styles for your React components.
By the end of this react sass tutorial, you will be able to use Sass in your React projects to create beautiful and responsive components. This video along with the prior video in the playlist is a great introduction to React component styling. We will be demonstrating how to style your React components and how to use CSS and SASS in React.
-
12Displaying Images In ReactVideo lesson
In this beginner's guide, we will be teaching you everything you need to know about "How to display images in React". If you're just starting out with React and want to learn how to display images in your React projects, then this tutorial is for you.
We'll be covering various techniques for importing and displaying images in React, including how to add images to your React project, how to import images in React JS, and how to use images in your React components. Whether you're a beginner or an experienced React developer, you'll find valuable insights and examples in this tutorial. I will be showing you how to import, add and display images in your React project with step-by-step instructions and practical examples. From the basics of importing images in React JS to inserting images and adding an image to your project, he will cover everything you need to know as a beginner. By the end of this tutorial, you'll be able to confidently display images in your React projects in no time!
So, Get started with React today by learning all about displaying images in React JS with this beginner's guide. See a real-life example of a React image in action and learn how to use images in React JS effectively.
-
13Binding To Data In ReactVideo lesson
In this React tutorial, we'll explore the basics of binding to data in React. Learn how to bind data in React and implement data binding with easy-to-follow examples. Continuiong from the previous introduction to React Fundamentals this tutorial will look at how to bind data in React.
Whether you're new to React or just starting to understand React fundamentals, this react tutorial for beginners will help you understand the basics of data binding in React. With step-by-step instructions and clear explanations, you'll quickly understand how to bind data in React and start using it in your own projects.
We'll also cover all the essential concepts for React JS data binding in React Components as we discuss databinding and the basics of React for beginners. Our data binding example will demonstrate how to bind data in React components and make your React app come alive!
-
14How to Pass Data to React Components with PropsVideo lesson
In this lecture, we will be discussing how to pass data to React components using props. Props are a powerful tool that allows you to pass data between components in React. Props are an essential part of React state management, and understanding how to use them is crucial to building effective and scalable React applications. Whether you are building a simple app or a more complex project, being able to pass data between components is essential for creating a smooth and efficient user experience. This tutorial is specifically designed for beginners who are new to React and want to learn how to pass data between components in an efficient and effective way.
I will take a step-by-step approach to learn how to pass data to React components using props. By the end of this tutorial, you will have a solid understanding of how to use props in React to pass data from one component to another and how to use them in your React projects.
-
15Handling Events in ReactVideo lesson
In this beginner-friendly tutorial, we will show you how to handle events in React like a pro and explain everything you the basics of event handling in React JS. Event handling is a crucial aspect of developing web applications and React provides an elegant way to handle events in your components. If you are new to React and want to learn how to handle events effectively, this video is perfect for you.
I will explain event handling in React JS in English and make it easy to understand for beginners. You will also learn how to handle events in ReactJS, how to use click events (onClick events) and how to handle them in react. By the end of this video, you will be equipped with the knowledge to handle events in your React projects effectively. We will be explaining event handling in React JS in English and ensuring that you understand the concepts fully. This video is also a great introduction to events in React and events in JavaScript.
-
16Handling State in React with the useState HookVideo lesson
In this lecture, you will learn how to use the useState Hook in React and how to effectively manage your React components’ State. This tutorial is designed for beginners who are just starting to learn about React state management. The useState Hook is an essential tool for React state management and this tutorial will provide a beginner's guide on how to use it effectively. Whether you are building a simple to-do list app or a more complex project, the useState Hook is an essential tool to have in your React toolbox. Discover best practices for react state management with useState and improve your components' functionality. With this tutorial, You’ll also learn how to create a simple state, how to update the state, and how to use the state in your components.
I will take a step-by-step approach to learn how to use the useState Hook to handle state in React. Additionally, you’ll also learn about the benefits of using the useState Hook and how it can simplify your state management. By the end of this tutorial, you will have a solid understanding of how to use the useState Hook to manage the state of your React components. So, Join us at Lightspeed Academy & get ready to learn about the useState Hook in React and take your React development journey to the next level!?❤️
-
17Conditional Rendering In ReactVideo lesson
In this lecture, we will explore the concept of conditional rendering in React. If you are new to React, conditional rendering is an essential concept that allows you to render different content based on certain conditions. It's a powerful feature that can make your web apps more dynamic, interactive, and user-friendly. we will discuss the basics of conditional rendering and explore some examples of how to use it in your React components. We will show you how to hide and show content based on user interactions, data values, or any other conditions you may have. This video is perfect for anyone looking to expand their knowledge of React rendering, and anyone who wants to create more dynamic and interactive React components.
I will discuss the basics of conditional rendering and show you how to use it in your React components. You'll learn how to conditionally render components in React and how to hide and show content based on user interactions, data values, or any other conditions you may have. By the end of this video, you'll have a solid understanding of conditional rendering in React and be able to use it to create powerful, dynamic, and interactive components that make your web apps more engaging for your users. Whether you're a beginner or an experienced React developer, this tutorial is sure to provide some valuable insights.
-
18Assess Your LearningQuiz
Answer the following questions to assess how you have retained the information in this section and to identify areas you may want to review.
-
19React Routing and NavigationVideo lesson
In this beginner's guide, we will cover everything you need to know about implementing routing and navigation in your React applications. Whether you're new to React or a seasoned developer, our tutorial will provide you with a quick understanding of routing and navigation in React. Our tutorial will cover topics such as React Router, basics of routing in React, React Router 6, React Router DOM, and React Routes, as well as how to implement routing in React JS. Our step-by-step react navigation tutorial will also guide you through the process of creating routes and building your navigation menu.
This React Router tutorial is up-to-date for 2023 and will provide you with the latest information on React Router V6 and React Router DOM V6. With our ReactJS crash course, you'll be up and running with React in no time. Our React tutorial for beginners will guide you through the fundamentals of React, including how to use components and hooks.
-
20How To Link To Routes: React Router For BeginnersVideo lesson
In this lecture, you'll learn how to link to routes using React Router, one of the most popular routing libraries for React applications. With React Router, you can create links between different pages of your application and make it easy for users to navigate between them. With step-by-step guidance, you'll explore the basics of routing in React, including creating links in React Router, navigating between different pages, and passing parameters between routes. If you're new to React, don't worry! This tutorial is designed for beginners and will walk you through the basics of React and React Router. We'll cover everything from setting up your development environment to creating your first React Router Links.
By the end of this tutorial, you'll have a solid understanding of how to use React Router to create links in your React app, and you'll be well on your way to building more complex React Router applications. Whether you're new to React or just need a refresher on React Router, be sure to check out our React Router tutorial for beginners. We cover everything from React Router basics to advanced topics like React Router v6 and React Router DOM.
-
21How to Access Query Parameters with React RouterVideo lesson
In this step-by-step guide, you'll learn how to access query parameters with React Router. Query parameters are a crucial component of web development, allowing you to pass information between pages and components. Our quick React tutorial covers everything you need to know about query parameters in React Router, including how to access them in React Router, how to handle query parameters in React, and how to work with query strings and search params. If you're a beginner in React Router, don't worry, this tutorial is designed for you. We'll start with the basics and gradually move towards more advanced topics.
If you're looking to learn query parameters, query strings, or search params in React, this tutorial is for you. We'll also cover React Router basics, including React Router DOM, and provide a crash course on ReactJS for beginners. Our crash course is perfect for beginners and experienced developers alike, and our tutorial will provide you with the skills you need to succeed.
By the end of this tutorial, you'll have a clear understanding of how to access query parameters in React Router and how to use them in your projects. So, whether you're a beginner or an experienced developer, this tutorial is perfect for anyone who wants to learn about query parameters in React.
-
22How to Use Route Parameters in React RouterVideo lesson
In this quick React Router tutorial, you will learn how to use route parameters in React Router, an essential skill for building dynamic and responsive web applications. Route parameters allow you to create dynamic routes in your React application, making it more flexible and powerful.
Throughout this React Router tutorial, we'll cover everything you need to know about route parameters in React Router, including how to use route parameters to pass data between components, react route parameters, how to access route parameters in your React components, route parameters in react and much more. Our React Router tutorial is designed for beginners, so no prior knowledge of React or React Router is necessary. We'll start with the basics and work our way up to more advanced topics, so you'll be able to follow along no matter your skill level.
-
23Assess Your LearningQuiz
Answer the following questions to assess how you have retained the information in this section and to identify areas you may want to review.

External Links May Contain Affiliate Links read more