loading...
Cover image for A Complete Beginner Guide To  React Js

A Complete Beginner Guide To React Js

hemant profile image Hemant Joshi ๐Ÿ˜ผ Updated on ใƒป7 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, 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 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 to dive 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 to go 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

https://dev.to/hemant/i-created-my-blog-using-dev-to-api-and-react-4f61

  • 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, 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 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 the 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 logics.
  • 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 it takes 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 most import task in 2020 to begin as 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 import 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 "

5. ๐Ÿ”—Useful Links

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.

Popular Youtube Links

Important Blog Posts

Frontend Library's

  • Material UI

  • Chakra UI

  • Ant Design

  • React-Bootstrap

CSS framework

  • Tailwind CSS

ReactJS Inerview 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 logo 8bithemant / Dev-Blogs

Hii, This is a blog Designed in React-Js, with Javascript and Love. App Fetches Your Blogs from Dev.to using Dev.to Api


Important

Hi Dev's๐Ÿ‘‹, we are aiming to create a powerful Dev Community where one can Help others and learn or seek for help if you are a Beginner or an Intermediate Developer please make sure to join us on discord : discord.gg/6hHqzja

Posted on by:

Discussion

markdown guide
 

Hii, I recently worked on a Dev Blog In React Redux which uses Dev.to Api to fetch blog from and it displays your all the blog post
Here is the link to the Webspage.

hemant-blog.netlify.app

Also you can view the source code of the Webpage on my GitHub

GitHub logo 8bithemant / Dev-Blogs

Hii, This is a blog Designed in React-Js, with Javascript and Love. App Fetches Your Blogs from Dev.to using Dev.to Api

Dev Blogs

Dev Blogs is built in React Redux which is used to publish your Dev.to Blogs on your custom page.

GitHub pull requests

Deploy Netlify

Preview hemant-blog.netlify.app

To customize the blog according to your Dev user id simply follow the Readme (The Steps Below)

Getting Started?

Star the Repo and click the below button Deploy to Netlify Button

Click on the above button and config with you Github in Netlify.

After succesfull config.

Simply go to your profile which would have new Repo, and clone it to your local system

Visit the follwoing folder after clone.

src/action/homeAction.js

Change the username from Hemant to your Dev.to Username in line 11

Alt Text

In your terminal

Run the following command in you terminal.

npm i && npm start or yarn && yarn start

Cheers You Blog is live on your System.

Now config the blog with github and push it to your github Repo.

git push origin master here you site isโ€ฆ

To publish your own Dev.to Blog page simply follow the readme of the repo which will guide you with complete steps.

 

Thank you, casually I'm starting with react and it comes handy. โœŒ๐ŸปโœŒ๐Ÿป

 

Super coooolll post ๐Ÿ™‚, would agree with the questions section.

 

Glad you found this interesting ๐Ÿ™„๐Ÿ‘‰๐Ÿ‘ˆ