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.
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.
This is the Basics Section which holds the must know basics topics to begin with ReactJs and which are really easy to learn too.
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
- Classes in JS
- ES6 JS
- Array Methods
- map() .filter() .reduce() and lot
- Promises + Async / Await
- Let Var Const
Npm or Yarn
Done with Basics?
npx create-react-app or
yarn create react-app
Npm brought me here and Yarn moves me now.
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.
├── 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
List and Keys in React
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.
- Custom Hooks
Working With API's
- Fetching/ Posting Data
- Axios Get/ Post
- Fetching/ Posting Data
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
State Management Tools
- 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.
- JWT based Auth
Client Side Storage
- Local Storage
Debugging + Performance Optimization
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.
- Weather APP by using Open weather API.
COVID 19 Tracker
- Using API provided by WHO, build a COVID tracker.
- Use Youtube Data V3 API, to display the search query and results.
- I have created my own blog page using React-Redux to fetch data from Dev.to API and here is the post about it
- 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.
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
The ultimate source for React is the React JS official Docs which covers the full methods for learning and updates in React.
The other I would recommend
- CodeEvolution Tutorials which are also good to Begin.
- Web Dev Simplified
- Traversy Media
- 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.
- 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
This Section consist of common questions I see people asking based on Learning ReactJs
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.
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.
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...
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.
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
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
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?
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"
" 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.
- Tailwind CSS
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.
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