A Complete Beginner Guide To React Js

Hemant Joshi — Mon, 19 Oct 2020 03:07:26 +0000

Hii👋,

Originally posted on my other account, which is inactive so I will be posting here.

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

You can also follow me on github

dermayj / mayHemant

Awesome Github ReadME, Dynamic nature Built with Love. Please consider to follow and star, Contribution are accepted, Free Fell To Fork

Hi there, I'm Hemant

🙎 Hemant Joshi | 💻 Full Stack Developer | 🛸 India , UK

I'm 18 years old Self-taught Full-Stack developer from India.

🥀 Learning GraphQl NextJs &Typescript
with Javascript, React and 69 others.
🔭 SpaceX FanBoi, Vanilla in Space😼
🛸 Into High Energy Physics and Astrophysics, i love shotting stars too.
I do ReactJS and JavaScript with Redux - Context - Hooks and a lot of love ❤️
MERN stack Developer

System Design | Web Development | Micro Services | Competitive Programming | Machine Learning

💬 Connect? lets get social 👉🏼

- Languages and Tools...

- Blogs 🌱

- Podcast ⚡️

Stay awesome!

View on GitHub

🎉npm start🎉
Table of Content🌱

🔭 Topics to Learn
- Basics
- React
- Advanced
Project Ideas
Resources
- Learning
- Development
🌱 Common Questions
🔗 Useful Links

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.

The ultimate source for React is the React JS official Docs which covers the full methods for learning and updates in React.
- https://reactjs.org/docs/getting-started.html
The other I would recommend
- CodeEvolution Tutorials which are also good to Begin.
  - https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw
- Web Dev Simplified
  - https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
- Traversy Media
  - https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA
- Javascript Mastery
  - https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A

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

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

Important Blog Posts

Frontend Library's

Material UI
Chakra UI
Ant Design
React-Bootstrap

CSS framework

Tailwind CSS

ReactJS Inerview Question

https://github.com/sudheerj/reactjs-interview-questions

Full Stack Mindmap

https://github.com/8bithemant/Mindmap-Full-Stack

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⭐

Forem: Hemant Joshi