A Complete Beginner Guide To Learn and Get Started with React Js.

A Complete Beginner Guide To Learn and Get Started with React Js.

Hemant Joshi's photo
Hemant Joshi
·

13 min read

Hii👋,

React JS is the most popular Javascript library for building blazing fast pages, and here is:- A Complete Beginner's Guide to React Learning Path and Resources

Lately, I had people asking how to learn ReactJs, the time it takes, and resources, and hence I decided to talk about the questions and answer them and will introduce you to my own learning path.

🎉npm start🎉

Table of Content🌱

1. 🔭Topics to Learn

I would recommend you to learn 90-95% of the topics mentioned below to hold a good hand in ReactJs.

In this Topics to Learn section I will be sharing the topics which I learned as a beginner to ReactJs Dev, also I am currently learning but can develop the needs and changes required for me, also these topics are kind of sufficient for me to move in the race and adopt changes or learn new topics/ logics.

a. Basics

This is the Basics Section which holds the must know basics topics to begin with ReactJs and which are really easy to learn too.

  • HTML

  • JSX JSX is a kind of building block of ReactJs and learning JSX is the initial step to begin in the React Race. Don't worry, if you are new JSX, is just like HTML, but with logical differences

  • CSS

  • JavaScript Learning JS would be really helpful but below are some of must-know topics in Javascript to begin with React

    • Classes in JS
    • ES6 JS
    • Array Methods
      • map() .filter() .reduce() and lot
    • Destructuring
    • Promises + Async / Await
    • Let Var Const
  • Npm or Yarn

Done with Basics?

Lets npx create-react-app or yarn create react-app

Npm brought me here and Yarn moves me now.

npm start

b. React

In this React section, we will basically cover the topics in React which are a must to know as a ReactJs Developer. Also, I would not recommend you to skip any of the Topics mentioned over here.

  • Folder Structure 

      ├──  my-app/
  │    ├──  README.md
  │    ├──  node_modules/
  │    └──  package.json
  ├──  public/
  │       ├──  index.html
  │       └──  favicon.ico
  └──  src/
          ├──  App.css
          ├── App.js
          ├──  App.test.js
          ├──  index.css
          ├──  index.js
          └──  logo.svg

  • Components in React

  • Functional VS Class Component
  • How to import/ export Components in React
  • Passing Props in Components
  • Adding Styles/ CSS to React App/ Components
  • State and Lifecycle
  • Event Handler
  • Forms
  • Conditional Rendering

  • List and Keys in React

  • Hooks Hooks are something you call a magical tool to React and will highly recommend diving into the Hooks section with basic knowledge of following Hooks.

    Note Hooks are only used in Functional Components.

    • useState
    • useEffect
    • Custom Hooks

  • HTTP Requests

    • GET
    • POST
  • Working With API's
    • Fetching/ Posting Data
      • Axios Get/ Post
  • Working with UI Learn to use custom UI, just like Bootstrap the React consist of its own Library
    • Material UI
    • Ant Design
  • Routing in React

c. Advanced

This is the Advanced section for the Learning path and would recommend going with topics in Basic and React and here are some of the Advanced Topics.

  • State Management Tools

    • React-Redux
      • React Dev Tools

    • Context API

      As a beginner I would recommend you to go with Redux it will let you explore and learn a lot of different topics in React.

  • Authentication

    • OAuth
    • JWT based Auth
  • Private Routes
  • Client Side Storage
    • Local Storage
    • Redis
    • Cookies
  • Debugging + Performance Optimization

2. ☘️Project Ideas

The best way to learn something is by building relevant stuff to the skill and here are some of the project ideas to build and Learn React.

I will be moving from Easy to Hard in the project list.

  • Single page portfolio site

    • A single page portfolio site which req CSS, working with React UI library.

  • Todo APP

  • Weather APP

    • Weather APP by using Open weather API.

  • COVID 19 Tracker

    • Using API provided by WHO, build a COVID tracker.

  • Youtube Clone

    • Use Youtube Data V3 API, to display the search query and results.

  • Blog page

    • I have created my own blog page using React-Redux to fetch data from Dev.to API and here is the post about it

dev.to/hemant/i-created-my-blog-using-dev-t..

  • Shopping Cart

    • Add, Update, and /delete featured react shopping cart which will have a Net price and product count.

  • React Based E-Commerce site

    • This will let you learn the advanced topics in React the site will consist of user login/ Signup, the home page, product page and a shopping cart with add edit delete product option.

3. ⚛️Resources

This is the Resources section where we will cover the resources for your help from Learning to Showing, also will request to add some of the awesome resources in the comment Box

a. Learning

This is the Learning part of the Resources section and here I will be sharing some of the relevant resources and how to follow them.

b. Development

This is the Development part of Resources section, where we will cover the sites from where you can get into building Projects and learn.

  • Youtube Videos

    • You can simply visit youtube and search for your project idea/ topic and can follow any video to go with and that is how you will learn about code practices and logic.

  • Blog's

    • Dev.to have a large number of blog posts with the project building and the ideas, also you can scroll on Medium and follow the post and learn the logics and use of the specific element

4. 🌱Common Questions

This Section consist of common questions I see people asking based on Learning ReactJs

1. How much time does it take to learn React?

This is probably the most asked question as I am too a life long learner, and this question makes me laugh each time a get this.

ReactJs is not a kind of problem the real stuff is JavaScript and when the question comes the answer is simple there is no end to JavaScript each Dev across the globe has a different pattern and way to javascript and that makes javascript an endless depth Ocean.

About dealing with the basics and advanced topics mentioned above, I would recommend you take time to enjoy and keep going as it would take you 2-3 months with the following topics.

2. How to develop responsive projects as a Beginner

As a Beginner, I would recommend learning CSS effectively also in my case I rely on UI libraries which include predefined Navbars, containers, footer, etc...

3. How to tackle new Topics

In my case, I love to start with docs and I feel like most of the docs consist of every part you need to know.

4. Fixing Error

This is the best part of Developing an app when you face an unknown error, and sometimes it gets really hard to short it out, and sometimes it takes me a net of 2-3 days.

Fixing the issue

Learning to debug is the most important task in 2020 to begin as a Developer, google chrome has several cool tools to deal with it

  1. Console
  2. Network
  3. Sources

Also, add the Redux Dev tool extension to make it easy to debug.

Unable to Fix?

Never give up on an Error cause those are the most important learning corners, if you are unable to fix the error try reaching Dev Community in Both Dev.to and Twitter and finally search for Stackoverflow, and usually you will get a solution for the issue

5. Learning New Topics?

To win the race the most important thing to do is keep running and the same is to do in the Developer race keep learning trending and latest topics.

How to looks for topics?

Practically talking follow someone who is a good developer or keep yourself sync to #reactjs #javascript tags which will let you know about the topics and this is how you can learn.

6. Is React JS tough?

This was the question asked by most of the people, I would have a simple answer for this "Everything looks tough but when you conquer it you enjoy the pain and hard work"

7. Important Tips?

" Remember We are a Life-Long Beginner and Learner simultaneously "

Hii this is the Useful Links section where I will be sharing some of the links I find important for React JS developer for better performance and time saving too also the learning sources.

Important Blog Posts

Frontend Library's

  • Material UI

  • Chakra UI

  • Ant Design

  • React-Bootstrap

CSS framework

  • Tailwind CSS

ReactJS Interview Question

Full Stack Mindmap

Thank You for reading this and hope you liked the post, and if you have any suggestions please make sure to comment on them below.

In case of issue or help feel free to react me out on twitter🐦

Or GitHub⭐ github.com/bornmay

ReactJavaScriptNode.jsFrontend Developmentfull stack