DEV Community

Cover image for Free ultimate React resources. Zero to Hero in React
Dev Write Ups
Dev Write Ups

Posted on • Edited on

Free ultimate React resources. Zero to Hero in React

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

Image description

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 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.

📚Free ReactJS eBooks

🔰React CheatSheets

✍React Blogs / Articles / Tutorials


Drawkit

Image description
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

Image description
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😁

Top comments (7)

Collapse
 
jashgopani profile image
Jash Gopani

Don't take my comment in the wrong way but many people who want to learn react or have started learning react will read this post and beginners will get confused after getting so many resources...
My suggestion is that you should have explained how to learn react by reading the docs first and then provide only a few content Rich and updated resources that would be useful in clearing doubts / concepts.
Making an article of all the websites is just like web scraping.
Sites like tutorials point explain everything but they touch only the surface, moreover their content is also not updated. Please please do a proper research and only include those resources which you would have used to learn.

Collapse
 
devwriteups profile image
Dev Write Ups

Thanks for your Comment. Give me some minutes and we'll add it. Thanks for taking your time and commenting.

Collapse
 
devwriteups profile image
Dev Write Ups

Please check now.

Collapse
 
jashgopani profile image
Jash Gopani

Much Better. Thanks for updating the content

Collapse
 
kr4idle profile image
Pete Steven

You can also add Desech Studio to your tools list. This will help you to visually create the html/css code and integrate it with react. Check this github repo

Collapse
 
atif_dev profile image
Atif Iqbal

Thanks for the post🙂

Collapse
 
suraj__ profile image
Suraj

📚

Some comments may only be visible to logged-in visitors. Sign in to view all comments.