mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-01 21:32:35 +02:00
Added some new content for React Roadmap (#6416)
This commit is contained in:
Farzad Mohtasham
GitHub
@@ -1 +1,9 @@
|
||||
# Astro
|
||||
# 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)
|
||||
|
||||
@@ -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/)
|
||||
- [@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)
|
||||
|
||||
@@ -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/)
|
||||
|
||||
@@ -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)
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
- [@video@ReactJS Tutorial - Higher Order Components (Part 3)](https://www.youtube.com/watch?v=l8V59zIdBXU)
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user