This guide was originally published at -> Devintro.com

Delivered by Facebook in 2013, React is a JavaScript library for building present day applications. React is utilized for taking care of the view layer and can be utilized for advancement of both web and mobile applications.

Why you should learn React?

React gets a good deal on advancement since it's segment based. You can separate an interface into reusable parts that permit you to construct dynamic UIs. Also on an average React Devs in US make $100k a year, that’s freaking big.

So you’ve got a brief idea what is react and why you should learn it. This post will cover 200+ Free resources for you to learn React and become a pro. This post will contain various type of resources like YouTube videos, eBook, Courses and MORE.

How to learn React ?

Developers need a system or library which permit them to separate complex segments and reuse the codes to finish their tasks quicker. Here React comes in and tackled this issue.

The coolest thing about React is it depends on parts, you breakdown your mind boggling code into singular pieces i.e segments and that helps developers in getting sorted out their code in a superior manner.

Prerequisites

• Basic of HTML, CSS, JavaScript
• Important ES6 Features to know
  • Class and ‘this’ keyword
  • Arrow Functions
  • Import and Export
  • Let and Const
• Basic use of NPM

Why React Docs?

As this post title says this contains a lot of resources where you can learn React. But don't forget that people creating resources and those materials have learned from the Docs.

Documentation resembles a manual guide, we simply disregard it and begin utilizing the things, at that point we return to them when the things don't function admirably.

Documentation will give you a profound information about the innovation and you will catch on more quickly and in an itemized far in excess of a course or instructional exercise.

So I suggest you all to read docs and build and repeat this process or else there is a second way to read docs and watch courses simultaneously, that will be effective.

DesignStripe - Illustration Maker

Good web design aims to create an expression, have fluid communication, and achieve personalization. If you want to work on all three, then DesignStripe can do just that.
With whatever style or mood you intend to have for your illustrations, website or graphic, DesignStripe is sure to have something for your taste. Versatility is its gift to its users with a vast amount of different themes that it could cater to any field of work out there. If you want to do some customization, it is not a problem with DesignStripe. It has a capable set of tools that allow you to be as creative as you wish to be with your designs.

DesignStripe has a free version with unlimited access to its theme and customization.
The full version starts at $20 per month with unlimited access to all styles, entire scene customization, and downloads in SVG, PNG, and JPG format.

📺 YouTube: React Courses and React Projects

• React JavaScript Crash Course by Traversy Media (1.5 Hours)

• React JS - React Tutorial for Beginner by Mosh (2.25 Hours)

• Full React Course 2020 by FreeCodeCamp (10 Hours)

• React JS tutorial for Beginners by Clever Programmer (12 Hours)

• Code 15 React Projects by FreeCodeCamp (9 Hours)

• ReactJS Crash Course by Hitesh Choudhary (1.2 hours)

• React Crash Course 2020 - Learn React in 1 video + Projects 🔥 by Codedamn

• ReactJS Full Course by Edureka (4 Hours )

• A free, 5-part video course with interactive code examples that will help you learn React

  • Part 1 - Intro to React
  • Part 2 - React Starter
  • Part 3 - React Router
  • Part 4 - React Redux
  • Part 5 - What’s next?

• React Course PlayList by LearnCodeAcdemy

• Beginners guide to React by Colt Steele

• React Redux tutorial by DevEd on Youtube

• React Hooks Playlis t by Ben Awad on Youtube

• Build a COVID-19 Tracker Application - React JS Project by JavaScript Mastery

• Build A Todo App With REACT | React Project For Beginners By DevEd

• React Hooks Playlist by Ben Awad

• 4 Days React Bootcamp

  • Day 1
  • Day 2
  • Day 3
  • Day 4

🕸React Courses

Egghead.io have many react courses covering a lot about React. Most them are free but if you are thinking about going in Depth many are paid too.

• Egghead.io React Courses

• Egghead.io Start learning React small course

  • Beginners guide to React by Kent C Dodds
  • Pluralsight React JS course
  • Scrimba Learn React course

📚Free ReactJS eBooks

• The React handbook by Flavio Copes and also some other eBook for free by Just subscribing

• React Gibooks by Vasanth - This has literally any things to learn about on the web

• React DOCS by FaceBook

• React Enlightment - This online guide is straight to the Point and this is the major thing I love about this guide.

🔰React CheatSheets

• React Cheatsheet by DevHints

• React Cheatsheet with Real World Examples By FreeCodeCamp

• React and TypeScript Cheatsheet website

• React Cheatsheet by Wrappixels

✍React Blogs / Articles / Tutorials

• TutsPlus React Code Tutorials

• Josh Comeau’s Blog - He posts on React topics a lot

• RAHULISM blog - He posts about beginner focused topics on React and JavaScript

• Kent C Dodds Blog - He is the guy behind the best selling course of React (EpicReact.dev)

• Flavio Copes React tutorials - He has posted a lot about React topics, you can check them, they are so easy to understand

• Aman Mittal’s Blog - His tutorials are just way amazing and very easy to understand.

• TutorialsPoint - React tutorials

• Ihatetomatoes - They have an amazing blog as well as an Amazing YouTube channel.

Drawkit

It is a wrong move not to invest in high-quality illustrations and visuals. Luckily, if you need stunning graphics, DrawKit can deliver.

DrawKit can assure high-quality vector illustrations and visuals wherever and however you may need it. With vector capabilities, unique design sets, a vast library filled with different icons and symbols, and templates that can suit any mood you want.

It is one of the few tools that can integrate both 3d and 2d illustrations, so as we said, DrawKit can deliver on many different leagues of demand from the imagination of creatives.
The illustrations come at varying prices; while some are free, prices can range from $15 to $90, depending on bundle size.

RemovalAI

Removal.ai is another background remover that can accurately erase backgrounds to your demand, and with AI integration, it is deserving of every bit of your trust to handle your graphics.

Whether you want transparent, white, or customized backgrounds, Removal.ai has got your back because it will automatically trace and detect the elements of your photo and remove the background impeccably. Moreover, you can do some customization yourself, editing the subject or foreground with available text and symbols. It is also available for free, so this is definitely a steal in the creative automation department.

👀Message

Above are some of the resources that will get to you all with React for Beginners and definitely get you a JOB. There are many resources, but I would ask you to see only those you find easy to understand. If you start with **everything **at some point you’ll get confused.

I’ll also be posting about React Advanced courses resources later😁