{"id":36839,"date":"2022-12-29T01:00:01","date_gmt":"2022-12-29T05:00:01","guid":{"rendered":""},"modified":"2022-12-30T05:49:29","modified_gmt":"2022-12-30T09:49:29","slug":"script-coding-react-javascript-framework-for-beginners-ndash-project-based-course","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/","title":{"rendered":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course"},"content":{"rendered":"<div style=\"padding: 2%;\" align=\"center\"><iframe loading=\"lazy\" title=\"React JavaScript Framework for Beginners \u2013 Project-Based Course\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/u6gSSpfsoOQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<blockquote style=\"text-align: left; background-color: #E4E4E4; border: 3px dotted gray; padding:2%;\"><p>\n<a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/p>\n<h3>React JavaScript Framework for Beginners \u2013 Project-Based Course<\/h3>\n<p><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a> By <a href=\"https:\/\/www.youtube.com\/channel\/UC8butISFwT-Wl7EV0hUK0BQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><strong>freeCodeCamp.org<\/strong><\/a><br \/>\n<strong>Published<\/strong>: Aug 31, 2022<\/p>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201c<\/span><\/em><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg\" class=\"alignright\" alt=\"freeCodeCamp.org\" style=\"width: 200px; height: auto;\" align=\"right\"\/><\/a> 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.<\/p>\n<p>We brought together three popular teachers for this course so you can learn from multiple perspectives.<\/p>\n<p>You can code React all in a web browser using Replit. Replit provided a grant that made this course possible.<\/p>\n<p><a href=\"\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/join.replit.com\/react-students<\/a><\/p>\n<hr \/>\n<ul><strong>Part One<\/strong><\/ul>\n<ul><strong>Instructor: Gavin Lon<\/strong><\/p>\n<li>Gavin&#8217;s channel: <a href=\"https:\/\/www.youtube.com\/c\/GavinLon\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/c\/GavinLon<\/a><\/li>\n<li>Code from video (using Prop Drilling): <a href=\"https:\/\/replit.com\/@GavinLon\/TeamMemberAllocation\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/replit.com\/@GavinLon\/TeamMemb&#8230;<\/a><\/li>\n<li>Code alternate (using Context to avoid prop drilling): <a href=\"https:\/\/github.com\/GavinLonDigital\/TeamMemberAllocationApp\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/github.com\/GavinLonDigital\/Te&#8230;<\/a><\/li>\n<li>How to Create a Free Replit Account: <a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-use-replit\/#how-to-create-a-free-replit-account\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.freecodecamp.org\/news\/how&#8230;<\/a><\/li>\n<li>What is a repl and how to create one: <a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-use-replit\/#what-is-a-repl-and-how-do-you-create-one\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.freecodecamp.org\/news\/how&#8230;<\/a><\/li>\n<li> Function component vs class component: <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html#function-and-class-components\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/reactjs.org\/docs\/components-a&#8230;<\/a><\/li>\n<li>JavaScript Arrow Functions: <a href=\"https:\/\/www.freecodecamp.org\/news\/javascripts-arrow-functions-explained-by-going-down-a-slide-2eb8ee3c45e\/\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.freecodecamp.org\/news\/jav&#8230;<\/a><\/li>\n<li>Hooks and State in React: <a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/reactjs.org\/docs\/hooks-state&#8230;.<\/a><\/li>\n<li>The Bootstrap Grid System: <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/layout\/grid\/\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/getbootstrap.com\/docs\/5.0\/lay&#8230;<\/a><\/li>\n<li>Understanding Props in React: <a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-use-props-in-react\/\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.freecodecamp.org\/news\/how&#8230;<\/a><\/li>\n<li>Using Context in React: <a href=\"https:\/\/reactjs.org\/docs\/context.html\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/reactjs.org\/docs\/context.html<\/a><\/li>\n<\/ul>\n<hr \/>\n<ul><strong>Part Two<\/strong><\/p>\n<li>Instructor: John Smilga<\/li>\n<li>Gavin&#8217;s channel: <a href=\"https:\/\/www.youtube.com\/c\/CodingAddict\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/c\/CodingAddict<\/a><\/li>\n<li>Complete App: <a href=\"https:\/\/meals-application.john-smilga.repl.co\/\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/meals-application.john-smilga&#8230;<\/a><\/li>\n<li>Source Code: <a href=\"https:\/\/replit.com\/@john-smilga\/meals-application\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/replit.com\/@john-smilga\/meals&#8230;<\/a><\/li>\n<\/ul>\n<hr \/>\n<ul><strong>Part Three<\/strong><\/p>\n<li>Instructor: Sanjeev Thiyagarajan<\/li>\n<li>Gavin&#8217;s channel: <a href=\"https:\/\/www.youtube.com\/c\/SanjeevThiyagarajan\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/c\/SanjeevThiy&#8230;<\/a><\/li>\n<li>Code: <a href=\"https:\/\/replit.com\/@SanjeevThiyagar\/react-demo\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/replit.com\/@SanjeevThiyagar\/r&#8230;<\/a><\/li>\n<\/ul>\n<hr \/>\n<ul><strong>Contents<\/strong><\/p>\n<li>(0:00:00) Course Introduction<\/li>\n<\/ul>\n<hr \/>\n<ul>\n<li>(0:02:03) Introduction, part 1<\/li>\n<li>(0:06:15) What is Replit<\/li>\n<li>(0:07:50) What is React<\/li>\n<li>(0:08:23) Create a Repl<\/li>\n<li>(0:11:29) Create Functional Components<\/li>\n<li>(0:18:02) Install Bootstrap 5<\/li>\n<li>(0:22:49) Implement the useState Hook in a Functional Component<\/li>\n<li>(0:29:16) Upload Image Files to Replit<\/li>\n<li>(0:33:28) Create JSX Code to Render Bootstrap Cards for Employees<\/li>\n<li>(0:40:49) Create Teams DropDown List<\/li>\n<li>(0:45:03) Use JavaScript Events to Set State<\/li>\n<li>(0:54:26) Move State Related Functionality to the App Component<\/li>\n<li>(0:56:48) Understanding Props<\/li>\n<li>(1:04:41) LocalStorage and the useEffect Hook<\/li>\n<li>(1:11:47) Routing, react-router-dom package, Navigation<\/li>\n<li>(1:25:25) Create Employee Component<\/li>\n<li>(1:38:03) Abstract Responsibilities Into Functional Components<\/li>\n<li>(1:46:14) Implement Media Queries<\/li>\n<li>(1:47:04) Using Context to Reduce or Avoid Prop Drilling<\/li>\n<li>(1:48:50) Course Wrap up<\/li>\n<\/ul>\n<hr \/>\n<ul>\n<li>(1:49:15) Introduction, part 2<\/li>\n<li>(1:53:12) Setup<\/li>\n<li>(2:08:03) Context API<\/li>\n<li>(2:30:46) Data Fetching<\/li>\n<li>(2:42:08) Meals Component<\/li>\n<li>(3:38:29) Search Component<\/li>\n<li>(4:10:11) Modal Component<\/li>\n<li>(4:43:04) Favorites Component<\/li>\n<\/ul>\n<hr \/>\n<ul>\n<li>(5:14:27) Introduction, part 3<\/li>\n<li>(5:20:32) Initialize Project<\/li>\n<li>(5:22:48) React Router<\/li>\n<li>(5:30:23) Fetching Data From API<\/li>\n<li>(5:49:46) Multiple Requests with Promise.all()<\/li>\n<li>(5:54:05) Map Method for rendering lists<\/li>\n<li>(6:04:12) Rendering Table of Stocks<\/li>\n<li>(6:09:12) Color Coding data<\/li>\n<li>(6:16:55) Autocomplete Search Component<\/li>\n<li>(6:39:12) Context API<\/li>\n<li>(6:59:40) Navigating Between Pages<\/li>\n<li>(7:03:52) Fetching Historical Data<\/li>\n<li>(7:25:22) Formatting Data<\/li>\n<li>(7:31:31) Working with Charts<\/li>\n<li>(7:44:18) Chart Time Toggle<\/li>\n<li>(7:58:54) Delete Stock (Event Propagation)<\/li>\n<li>(8:05:26) Stock Data<\/li>\n<li>(8:16:52) Local Storage<\/li>\n<\/ul>\n<div style=\"text-align: center; font-weight: bold\">[<a href=\"https:\/\/www.youtube.com\/watch?v=u6gSSpfsoOQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\" title=\"Read More on YouTube\">READ MORE<\/a>]<\/div>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201d<\/span><\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[109,380],"tags":[2633,1756,2632,193,1923,1813,2445,2631],"class_list":["post-36839","post","type-post","status-publish","format-standard","hentry","category-scripting-and-coding","category-video-tutorials","tag-frameworks","tag-freecodecamp","tag-gavin-lon","tag-javascript","tag-john-smilga","tag-react","tag-replit","tag-sanjeev-thiyagarajan"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!<\/title>\n<meta name=\"description\" content=\"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T05:00:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-30T09:49:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course\",\"datePublished\":\"2022-12-29T05:00:01+00:00\",\"dateModified\":\"2022-12-30T09:49:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/\"},\"wordCount\":449,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i2.ytimg.com\\\/vi\\\/u6gSSpfsoOQ\\\/hqdefault.jpg\",\"keywords\":[\"Frameworks\",\"freecodecamp\",\"Gavin Lon\",\"javascript\",\"John Smilga\",\"React\",\"Replit\",\"Sanjeev Thiyagarajan\"],\"articleSection\":[\"Scripting and Coding\",\"Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/\",\"name\":\"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i2.ytimg.com\\\/vi\\\/u6gSSpfsoOQ\\\/hqdefault.jpg\",\"datePublished\":\"2022-12-29T05:00:01+00:00\",\"dateModified\":\"2022-12-30T09:49:29+00:00\",\"description\":\"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i2.ytimg.com\\\/vi\\\/u6gSSpfsoOQ\\\/hqdefault.jpg\",\"contentUrl\":\"https:\\\/\\\/i2.ytimg.com\\\/vi\\\/u6gSSpfsoOQ\\\/hqdefault.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!","description":"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/","og_locale":"en_US","og_type":"article","og_title":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!","og_description":"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...","og_url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"2022-12-29T05:00:01+00:00","article_modified_time":"2022-12-30T09:49:29+00:00","og_image":[{"url":"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course","datePublished":"2022-12-29T05:00:01+00:00","dateModified":"2022-12-30T09:49:29+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/"},"wordCount":449,"commentCount":0,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#primaryimage"},"thumbnailUrl":"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg","keywords":["Frameworks","freecodecamp","Gavin Lon","javascript","John Smilga","React","Replit","Sanjeev Thiyagarajan"],"articleSection":["Scripting and Coding","Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/","url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/","name":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#primaryimage"},"thumbnailUrl":"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg","datePublished":"2022-12-29T05:00:01+00:00","dateModified":"2022-12-30T09:49:29+00:00","description":"Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place ...","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#primaryimage","url":"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg","contentUrl":"https:\/\/i2.ytimg.com\/vi\/u6gSSpfsoOQ\/hqdefault.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-javascript-framework-for-beginners-ndash-project-based-course\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[#Script #Coding] React JavaScript Framework for Beginners &ndash; Project-Based Course"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/36839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=36839"}],"version-history":[{"count":3,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/36839\/revisions"}],"predecessor-version":[{"id":36854,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/36839\/revisions\/36854"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=36839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=36839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=36839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}