From 8ae99e686758ee003fac25533a62ba5ea8db12f0 Mon Sep 17 00:00:00 2001 From: Farzad Mohtasham <48632860+FarzadMohtasham@users.noreply.github.com> Date: Thu, 8 Aug 2024 07:15:36 +0330 Subject: [PATCH] Added some new content for React Roadmap (#6416) --- .../react/content/astro@_HoZkE7FH-v3wI_722ZTF.md | 10 +++++++++- .../conditional-rendering@aE6XBgH23135_9QmD4ff2.md | 3 ++- .../react/content/context@10uL0r388lKh8pWYWqRZD.md | 3 ++- .../creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md | 3 ++- .../react/content/formik@gr1CaLvL7tFOkIRywSsID.md | 3 ++- .../react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md | 1 + .../react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md | 11 +++++++++++ .../high-order-components@zOENl96GUZRw2PP2KxIck.md | 2 +- .../mobile-applications@txARr3lgTvy-vJCj5zAb1.md | 3 +++ 9 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md b/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md index 3f697ed90..5a248c949 100644 --- a/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md +++ b/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md @@ -1 +1,9 @@ -# Astro \ No newline at end of file +# Astro + +Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you. + +Visit the following resources to learn more: + +- [@official@Astro Website](https://astro.build/) +- [@video@Astro Crash Course in 60 Minutes](https://www.youtube.com/watch?v=NniT0vKyn-E) +- [@video@How To: Add/Integrate React.js and TailwindCss into Astro framework](https://www.youtube.com/watch?v=d6CsWTVa42o) diff --git a/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md b/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md index cb59dc593..db3dce474 100644 --- a/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md +++ b/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md @@ -7,4 +7,5 @@ Conditional rendering in React works the same way conditions work in JavaScript. Visit the following resources to learn more: - [@official@Conditional Rendering](https://react.dev/learn/conditional-rendering) -- [@article@Different techniques for conditional rendering in React](https://www.robinwieruch.de/conditional-rendering-react/) \ No newline at end of file +- [@article@Different techniques for conditional rendering in React](https://www.robinwieruch.de/conditional-rendering-react/) +- [@video@Conditional rendering in React](https://www.youtube.com/watch?v=4oCVDkb_EIs) diff --git a/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md b/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md index e84576ae6..cc23ee374 100644 --- a/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md +++ b/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md @@ -6,6 +6,7 @@ In a typical React application, data is passed top-down (parent to child) via pr Visit the following resources to learn more: -- [@article@Basic useContext Guide](https://www.w3schools.com/react/react_usecontext.asp) - [@official@Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) +- [@video@React Context API Crash Course](https://www.youtube.com/watch?v=t9WmZFnE6Hg) +- [@article@Basic useContext Guide](https://www.w3schools.com/react/react_usecontext.asp) - [@article@State with useContext and useState/useReducer](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/) diff --git a/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md b/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md index e80db4951..13b0921e6 100644 --- a/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md +++ b/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md @@ -5,5 +5,6 @@ Building your own Hooks lets you extract component logic into reusable functions Visit the following resources to learn more: - [@official@Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) +- [@video@Custom Hooks in React](https://www.youtube.com/watch?v=I2Bgi0Qcdvc) - [@article@How to create a custom Hook (2) followed by Examples](https://www.robinwieruch.de/react-custom-hook/) -- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) +- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md b/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md index 90baef3c9..4e8e2dae0 100644 --- a/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md +++ b/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md @@ -5,5 +5,6 @@ Formik is another famous opensource form library that helps with getting values Visit the following resources to learn more: - [@official@Official Website — Formik](https://formik.org/) -- [@official@Getting Started](https://formik.org/docs/overview) +- [@video@Formik - Building React Forms easier](https://www.youtube.com/watch?v=khGypss-RJs) +- [@video@React Formik Tutorial with Yup (React Form Validation)](https://www.youtube.com/watch?v=7Ophfq0lEAY) - [@opensource@formik/formik](https://github.com/formik/formik) diff --git a/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md b/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md index 54b194599..6f3b8e5f8 100644 --- a/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md +++ b/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md @@ -5,3 +5,4 @@ Although you can build forms using vanilla React, it normally requires a lot of Visit the following resources to learn more: - [@article@How to use Forms in React](https://www.robinwieruch.de/react-form/) +- [@video@React Forms: the SIMPLEST way](https://www.youtube.com/watch?v=CT-72lTXdPg) diff --git a/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md b/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md index 8124318f3..d0bcf2398 100644 --- a/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md +++ b/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md @@ -4,5 +4,16 @@ Server-side rendering (SSR) is a technique for rendering a JavaScript applicatio There are several frameworks and libraries available for server-side rendering React applications, most common being: +## Next.JS + +Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. + - [@article@Next.js](https://nextjs.org/) +- [@video@Next.js 14 Full Course 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) + +## Remix.JS + +Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. + - [@article@Remix](https://remix.run/) +- [@video@Remix Crash Course](https://www.youtube.com/watch?v=RBYJTop1e-g) diff --git a/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md b/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md index e6f7d4b45..53c410d14 100644 --- a/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md +++ b/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md @@ -13,4 +13,4 @@ Visit the following resources to learn more: - [@video@Learn React Higher Order Component (HOC) in 10 Minutes](https://youtu.be/J5P0q7EROfw?si=-8s5h1b0mZSGVgLt) - [@video@ReactJS Tutorial - Higher Order Components (Part 1)](https://www.youtube.com/watch?v=B6aNv8nkUSw) - [@video@ReactJS Tutorial - Higher Order Components (Part 2)](https://www.youtube.com/watch?v=rsBQj6X7UK8) -- [@video@ReactJS Tutorial - Higher Order Components (Part 3)](https://www.youtube.com/watch?v=l8V59zIdBXU) \ No newline at end of file +- [@video@ReactJS Tutorial - Higher Order Components (Part 3)](https://www.youtube.com/watch?v=l8V59zIdBXU) diff --git a/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md b/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md index ed0661f86..d8e290b67 100644 --- a/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md +++ b/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md @@ -1,3 +1,6 @@ # Mobile React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. + +- [@article@React Native Official website](https://reactnative.dev/) +- [@video@React Native Course for Beginners](https://www.youtube.com/watch?v=ZBCUegTZF7M)