React JS

Why learn JavaScript ❓ #

  • Popularity: React is one of the most popular JavaScript libraries for building user interfaces, and is used by many well-known companies such as Facebook, Netflix, and Airbnb.

  • Job Opportunities: React is in high demand in the job market, and learning it can increase your chances of finding a job as a web developer.

  • Reusability: React allows you to create reusable UI components, which can save you a lot of time and effort when building complex applications.

  • Performance: React uses a virtual DOM, which helps to improve the performance of your application by reducing the number of DOM updates required.

  • Flexibility: React can be used to build a wide range of applications, including single-page applications, mobile apps, and desktop apps.

  • Large Community: React has a large and active community, which means that you can find answers to your questions and get support from other developers.

🎓 Take Away Skills #

After completing this learning path you will be knowledgeable in:

  • Building web applications
  • React Components
  • JSX
  • State Management
  • React Router
  • Redux
  • Testing

🛠️ Prerequisites #

🧑🏻‍💻 Programming Knowledge #

  • JavaScript: React is built on top of JavaScript, so having a good understanding of JavaScript fundamentals is essential. You should be comfortable with concepts like variables, functions, arrays, objects, loops, and conditional statements.

  • HTML: React is used to build user interfaces, so you should have a good understanding of HTML markup.

  • CSS: React also requires a good understanding of CSS styling and layout, as you’ll be using it to style your components.

you can learn javascript here , HTML here , CSS here

📲 Installation and Setup #

You need a code editor,browser and Node.js to follow along this learning path. You can choose the code editor and browser of your choice. The preferred ones are listed below:

  • VS Code

    Light-weight code editor by Microsoft with a large ecosystem of plugins to help your workflow

    Install VS Code

  • Google Chrome

    A browser based on V8 JavaScript engine with developer tools.

    Install Google Chrome

  • Node.js

    JavaScript runtime which helps you run JavaScript programs in your system.

    Install Node

    Note: Install the stable version

💡 Learning Session #

Rapid Review on JS #

🎓 Topics to Learn

- Variables and data types
- Functions
- Conditionals and loops
- Arrays and objects
- DOM manipulation
- Asynchronous JavaScript (AJAX, callbacks, promises)

🧑🏻‍💻 Learn from

Website Tutorials

Video Tutorials

Articles/Blogs

🛠️ Get into action

  • Both of the above mentioned resources include a lot of activities. Try those activities to get a better understanding of JavaScript

Fundamentals in React #

🎓 Topics to Learn

- Create React App
- vite
- Next js
- Function Components
- Class Components
- JSX
- Props and States
- useState and useEffect Hooks
- setState and Component lifecycle methods
- Conditional Rendering
- Lists and keys
- Building simple forms

🧑🏻‍💻 Learn from

Videos

Articles/Blogs

Advanced Topics in React #

🎓 Topics to Learn

- Context
- Higher order components
- Render Props
- Refs
- Error Boundaries
- Portals
- HTTP Requests
    - GET
    - Post
- Hooks
    - useContext
    - useReducer
    - useRef
    - useMemo
    - useCallback
    - Custom Hooks

🧑🏻‍💻 Learn from

Videos

Articles/Blogs

Ecosystem in React JS #

🎓 Topics to Learn

- State Management
    - Redux/Mobx
    - Apollo client
- Routing
    - React Routing
- Styling
    - Styled Components / emotion
    - Tailwind CSS
    - Chakra UI/ Material UI / Ant Design
- Forms
    - Formik
    - React Hook Form
- Testing
    - Jest + React testing library
    - Cypress
- Misc
    - Typescript
    - Storybook
    - React i18Next
    - Firebase
    - Practical React Libraries

🧑🏻‍💻 Learn from

Videos

Articles/Blogs

🛠️ Get into action

A few projects you can build to implement the concepts you have learned above:

  • Todo App - A simple todo list app that allows users to add and delete tasks.
    • This project will help beginners get a grasp of React’s basic concepts such as components, state, and props.
    • Repo for example
  • Weather App - A weather app that displays the current weather conditions and forecast for a specific location.
    • This project will require API integration and intermediate-level knowledge of React.
    • Repo for example
  • E-commerce Website - A full-fledged e-commerce website with features such as product listing, filtering, sorting, cart, and checkout.
    • This project will require advanced-level knowledge of React, state management libraries like Redux or MobX, and backend integration.
    • Repo for example
  • Social Media Platform - A social media platform where users can create profiles, connect with friends, post updates, and comment on each other’s posts.
    • This project will require advanced-level knowledge of React, backend integration, and server-side rendering.
    • Repo for example
  • Real-Time Chat Application - A real-time chat application where users can communicate with each other in real-time.
    • This project will require advanced-level knowledge of React, backend integration, WebSockets, and server-side rendering.
    • Repo for example

🔖 Resource Pool #

You can checkout these additional resources to learn more about React JS

Articles/Blogs #

Videos #

Websites #

🚀 Project Pool #

Here are few project ideas you can try out, these are just an inspiration to get started. Try to learn and build ideas that come to your mind.

  • Recipie App
  • Fitness Tracker
  • Movie streaming platform
  • Online Marketplace
  • Chat Application
  • Music player
  • Interactive map
  • Drawing Application
  • Language Learning App

Created with 💙 by Sandra Rose Antony & TinkerHub