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
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
🕸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
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 Cheatsheet by Wrappixels
✍React Blogs / Articles / 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😁
Top comments (6)
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.
Thanks for your Comment. Give me some minutes and we'll add it. Thanks for taking your time and commenting.
Please check now.
Much Better. Thanks for updating the content
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
Thanks for the post🙂
Some comments may only be visible to logged-in visitors. Sign in to view all comments.