React JavaScript Framework for Beginners – Project-Based Course

Overview

Embark on a comprehensive 8-hour project-based course designed to introduce beginners to the React JavaScript framework. Learn the fundamentals of React by building three distinct projects under the guidance of three experienced instructors. Explore essential concepts such as functional components, hooks, state management, props, and the Context API. Dive into practical applications by creating a team member allocation app, a meals application, and a stock market dashboard. Master key React features including JSX, Bootstrap integration, routing with react-router-dom, and working with APIs. Gain hands-on experience with data fetching, rendering lists, implementing search functionality, and utilizing local storage. By the end of this course, develop the skills to create dynamic, responsive React applications and lay a solid foundation for further learning in modern web development.

Syllabus

) Course Introduction.
) Introduction, part 1.
) What is Replit.
) What is React.
) Create a Repl.
) Create Functional Components.
) Install Bootstrap 5.
) Implement the useState Hook in a Functional Component.
) Upload Image Files to Replit.
) Create JSX Code to Render Bootstrap Cards for Employees.
) Create Teams DropDown List.
) Use JavaScript Events to Set State.
) Move State Related Functionality to the App Component.
) Understanding Props.
) LocalStorage and the useEffect Hook.
) Routing, react-router-dom package, Navigation.
) Create Employee Component.
) Abstract Responsibilities Into Functional Components.
) Implement Media Queries.
) Using Context to Reduce or Avoid Prop Drilling.
) Course Wrap up.
) Introduction, part 2.
) Setup.
) Context API.
) Data Fetching.
) Meals Component.
) Search Component.
) Modal Component.
) Favorites Component.
) Introduction, part 3.
) Initialize Project.
) React Router.
) Fetching Data From API.
) Multiple Requests with Promise.all().
) Map Method for rendering lists.
) Rendering Table of Stocks.
) Color Coding data.
) Autocomplete Search Component.
) Context API.
) Navigating Between Pages.
) Fetching Historical Data.
) Formatting Data.
) Working with Charts.
) Chart Time Toggle.
) Delete Stock (Event Propagation).
) Stock Data.
) Local Storage.