Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

React JavaScript Framework for Beginners – Project-Based Course

via freeCodeCamp

Start learning Write review

Details

Start learning

Provider

freeCodeCamp
Pricing

Free Video
Languages

English
Effort

8 hours
Sessions

Self-Paced
Level

Beginner

Found in

Project-based video course on the React JavaScript library for newcomers to React. Working in Replit, learners build three applications: an employee directory with Bootstrap 5 cards, team dropdowns and media queries; a meals app with search, modal and favorites components; and a stock tracker that fetches API data with Promise.all(), renders tables, autocomplete search and charts. Along the way it covers functional components, JSX, the useState and useEffect hooks, props and prop drilling, the Context API, routing with react-router-dom, event handling and localStorage persistence. Suited to those who already know basic JavaScript, HTML and CSS.

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.