Tag: Frameworks

[#Script #Coding] React JavaScript Framework for Beginners – Project-Based Course

Posted on by Eric Brooks

React JavaScript Framework for Beginners – Project-Based Course

By freeCodeCamp.org
Published: Aug 31, 2022

“
freeCodeCamp.org Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place to start your learning journey. You will learn everything you need to know to get started with React by building three different projects.

We brought together three popular teachers for this course so you can learn from multiple perspectives.

You can code React all in a web browser using Replit. Replit provided a grant that made this course possible.

https://join.replit.com/react-students

    Part One
    Contents

  • (0:00:00) Course Introduction
  • (0:02:03) Introduction, part 1
  • (0:06:15) What is Replit
  • (0:07:50) What is React
  • (0:08:23) Create a Repl
  • (0:11:29) Create Functional Components
  • (0:18:02) Install Bootstrap 5
  • (0:22:49) Implement the useState Hook in a Functional Component
  • (0:29:16) Upload Image Files to Replit
  • (0:33:28) Create JSX Code to Render Bootstrap Cards for Employees
  • (0:40:49) Create Teams DropDown List
  • (0:45:03) Use JavaScript Events to Set State
  • (0:54:26) Move State Related Functionality to the App Component
  • (0:56:48) Understanding Props
  • (1:04:41) LocalStorage and the useEffect Hook
  • (1:11:47) Routing, react-router-dom package, Navigation
  • (1:25:25) Create Employee Component
  • (1:38:03) Abstract Responsibilities Into Functional Components
  • (1:46:14) Implement Media Queries
  • (1:47:04) Using Context to Reduce or Avoid Prop Drilling
  • (1:48:50) Course Wrap up
  • (1:49:15) Introduction, part 2
  • (1:53:12) Setup
  • (2:08:03) Context API
  • (2:30:46) Data Fetching
  • (2:42:08) Meals Component
  • (3:38:29) Search Component
  • (4:10:11) Modal Component
  • (4:43:04) Favorites Component
  • (5:14:27) Introduction, part 3
  • (5:20:32) Initialize Project
  • (5:22:48) React Router
  • (5:30:23) Fetching Data From API
  • (5:49:46) Multiple Requests with Promise.all()
  • (5:54:05) Map Method for rendering lists
  • (6:04:12) Rendering Table of Stocks
  • (6:09:12) Color Coding data
  • (6:16:55) Autocomplete Search Component
  • (6:39:12) Context API
  • (6:59:40) Navigating Between Pages
  • (7:03:52) Fetching Historical Data
  • (7:25:22) Formatting Data
  • (7:31:31) Working with Charts
  • (7:44:18) Chart Time Toggle
  • (7:58:54) Delete Stock (Event Propagation)
  • (8:05:26) Stock Data
  • (8:16:52) Local Storage

”

Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.

Connect