
Explore the basics of React from HTML, CSS, and JavaScript to building a single-page app. Learn JSX, components, state, and lifecycle methods while creating your first React project.
Let's take a look at what React is and why learn it.
Set up your React environment with Visual Studio Code and Google Chrome, install Node.js and npm (or yarn), and use a local server to auto-refresh while coding.
Create a single, lowercase, dash-separated course folder in VS Code, run it with live server, and learn the traditional HTML, CSS, and JavaScript workflow before React.
Learn how to render a React component by using functional components, wrapping multiple elements with a fragment, and mounting the component to the DOM with the render method.
Learn how JSX blends HTML-like syntax with JavaScript in React, using Babel to compile, embedding expressions with curly braces, and applying camelCase attributes (className, htmlFor) to render dynamic components.
Learn to define and invoke functions in JSX using function keywords or arrow functions, and trigger them with onClick events and callbacks.
Apply the style attribute in React by passing a camelCase CSS properties object to elements, including color and fontSize, and learn when to use variables or className with external CSS.
Learn how to build reusable React components, including functional components and the shift away from class components, with proper naming, importing, and composing components to render UI.
Learn how props pass data from a parent to a child in React, enabling reusable functional components; use curly braces for props, manage class names, defaults, and other component properties.
Create a reusable React card component with header, body, and children, styled via CSS or inline styles; customize with background color, padding, shadow, and borders for flexible, reusable UI cards.
Discover how to use icons in React by adding Font Awesome via CDN or installing React Icons, importing icons from multiple providers, and styling their size and color.
Learn to integrate bootstrap in a react app as an alternative to styling, via CDN or npm, apply bootstrap classes to cards and buttons, then create a custom button component.
Explore function props and event handlers in React, pass callback functions from a parent to child components to handle clicks with camelCase event handlers.
Create a new react application and use the provided files in the resource folder
Create a title component to practice building React RFC functional components, passing text and classes as props, importing from a components folder, and rendering within a single page application.
Create a React component demonstrating the useState hook to manage a counter with plus and minus buttons, showing state-driven UI updates.
Learn how to render offers as cards in React using useState and map, building an offers container and list, and toggle more or fewer items with a show offers control.
Create an interactive five-star rating in a testimonial card by using useState and map, giving each card its own rating state and click-to-rate functionality.
Explore useRef in React to reference DOM elements, build page navigation, and create a scroll-to-top button that appears on specific window actions.
Create a login form inside a modal in a React app, controlled by state to show and hide, with email and password inputs and handling submit by preventing default.
Learn to implement client-side login validation in React by building a validate-and-submit form that checks email and password, shows alerts for empty fields, and toggles the login modal.
Create a registration form component in a React app, toggle between login and registration within a modal, and implement form groups with state, refs, on submit, and basic validation.
Welcome to my comprehensive React course for beginners! If you're someone who has experience with HTML, CSS, and JavaScript and wants to take your web development skills to the next level, then this is the course for you.
Throughout this course, I'll guide you through the basics of React, including how to build and structure React components, use React hooks, and create multiple projects to help you practice your newfound skills.
To start off, we'll take a look at what React is and why it's such an important tool in the web development industry. React is a JavaScript library used for building user interfaces, and it's become incredibly popular over the years due to its flexibility and ease of use. In fact, many companies, such as Facebook, Instagram, and Airbnb, use React to build their web applications.
With that in mind, we'll dive into the basics of React, including how to set up your development environment, create a basic React component, and how to render that component to the browser. From there, we'll explore the various React components that you can use, such as function components and class components, and how to structure your components in a way that makes sense for your application.
Next, we'll delve into React hooks, which are functions that let you use state and other React features without writing a class. We'll go through the various hooks, including useState, useEffect, useContext, and more, and show you how to use them in your applications to make your code more concise and easier to read.
Finally, we'll round out the course with multiple projects that you can work on to apply your newfound knowledge. These projects will include creating a simple to-do list application, a movie search application, and a weather app. By the end of the course, you'll have a solid understanding of how to build React applications and the confidence to create your own projects.
In conclusion, our React course for beginners is the perfect way to take your web development skills to the next level. With our comprehensive approach, we'll guide you through the basics of React, teach you how to use React components and hooks, and provide you with multiple projects to practice your skills. React is an important tool in the web development industry, and with this course, you'll be well on your way to becoming a proficient React developer.
Here is a list of all the hooks available in React and I will be teaching in this course, along with a short description of what they do:
useState: Allows you to add state to a functional component by providing a state variable and a function to update it.
useEffect: Allows you to perform side effects (such as fetching data or updating the DOM) after a component has rendered or before it's about to unmount.
useContext: Allows you to access data stored in a context object without having to pass props down through multiple levels of components.
useReducer: Allows you to manage complex state in a predictable way, by taking in a reducer function and an initial state value.
useCallback: Allows you to memoize a function, which can help with performance by preventing unnecessary re-renders of child components.
useMemo: Allows you to memoize a value, which can help with performance by preventing unnecessary calculations.
useRef: Allows you to create a mutable reference to a value or DOM element, which can be useful for accessing the DOM directly or persisting values across renders.
useLayoutEffect: Similar to useEffect, but runs synchronously after all DOM mutations have completed, which can be useful for manipulating the DOM directly.
useImperativeHandle: Allows you to customize the instance value that's exposed to parent components when using ref.
useDebugValue: Allows you to add a label to a custom hook, which can be useful for debugging and tracing the flow of data in your application.
Vite development environment: Instant Server Start, Lightning Fast HMR, Rich Features, Optimized Build, Universal Plugins, Fully Typed APIs
These hooks are some of the most commonly used ones in React, and can be incredibly powerful when used correctly. By understanding how each hook works and when to use it, you can build more complex and performant applications with ease.
Dear aspiring developers,
Welcome to the extraordinary world of React.js! My name is Norbert B.M I am a self tough web developer and Today, we gather here to embark on a transformative journey that will take you from the realms of HTML, CSS, and JavaScript to the captivating universe of React.
In this course, I have crafted a learning experience tailored specifically to guide you through this remarkable transition. My primary focus is to bridge the gap between your existing knowledge and the intricacies of React.js. Together, we will lay a solid foundation upon which you can build your expertise and create captivating web applications.
React.js, with its elegance and power, opens up new possibilities in the realm of web development. It empowers you to craft highly interactive, efficient, and scalable user interfaces. This revolutionary library will change the way you approach building websites, elevating your skills to new heights.
Throughout this course, we will embark on an immersive journey, gradually introducing you to React.js concepts and techniques. We will start by revisiting and reinforcing your understanding of HTML, CSS, and JavaScript, ensuring a strong footing for the adventure ahead.
As we progress, we will delve into the fundamental building blocks of React.js, such as components, states, and props. You will learn how to break down complex user interfaces into modular pieces, enabling reusability and maintainability in your codebase.
Through practical exercises and engaging projects, you will witness firsthand the transformative power of React.js. I will be by your side, offering my expertise, guidance, and support every step of the way. My real-world experiences will illuminate the path, providing valuable insights and best practices.
While this journey may present challenges, I believe in your potential to overcome them. I have carefully designed this course to provide a nurturing and inclusive environment where you can learn, explore, and grow. Together, we will unravel the mysteries of React.js, unlocking the doors to a world of endless possibilities.
So, my fellow learners, are you ready to embark on this transformative journey? Are you prepared to witness your skills evolve and witness the magic of React.js unfold before your eyes? If so, then join me as we set forth on this exhilarating adventure.
Embrace the power of React.js, and let us embark on this extraordinary voyage together!
I am Norbert BM, see you in the course!