Developers Journal
Published in

Developers Journal

The Effective Way Of Learning React

In this journal we will try to have a look at Effective ways of Learning React if you are starting as a fresher.

Before we start learning anything new the first question which we should ask are:

“What is ????”

“Are there any Pre-Requisites for learning ????”

What is React?

React is one of the popular and fastest-growing JavaScript Library. This library is maintained by Facebook and a community of developers. “Community of Developers”, yes you are thinking in the right direction of Open Source Community. This library is Free and Open Source which is being used for building User Interfaces, whether Simple or Complex. Complex Interfaces can be easily created by dividing the application into smaller components.

Pre-Requisites For Learning React

Whenever you decide to start learning React, make sure that you are familiar with:

HTML & CSS

  • Can be learned in 2–3 weeks
  • Used for creating layouts of the application

JavaScript

JavaScript also known as JS, is a programming language for the web and this will take up some of your time to learn. You don’t have to be a master programmer of this language. You just need to learn enough so that you can create basic projects using Vanilla JS. Here are some of the main topics while learning JS and understand them thoroughly as they will be used extensively while working on React.

  • Types of Variables (var, let, and const)
  • Conditional Statements (if/else and switch)
  • Looping Statements (for, forEach, while)
  • Functions
  • Arrays
  • Filter, map, reduce, etc (Array Methods).
  • ES6 Concepts
  • Promises
  • Callbacks
  • Async/await
  • Classes and OOPs Concepts
  • Working with APIs

Dive Into React

Perfect, now that you are familiar with HTML, CSS, and JS, it is time to dive into learning React. To start learning React, you should start by taking a look at the official React Docs or tutorials to get some idea on how this library works. React docs covers the fundamentals and are very well written. Go through the mentioned topics to cover the React fundamentally.

  • JSX
  • Components (Class and Functional)
  • State
  • Props
  • Lifecycle Methods
  • Event Handling
  • Forms
  • Rendering of Components based on Conditions
  • Third Party API’s implementation.

Once you have attained a basic knowledge on the above mentioned points, we would suggest to go ahead and build some basic projects, like TODO Lists or you can even try to remake the existing projects which you created while learning JavaScript (JS).

While learning you might get stuck at problem or error or even the worst you might write in the bad code. Don’t worry about those problems/errors. You should make Google, StackOverflow, Blogs and Articles your best friend. If you got stuck at any point, just Google that question. There is a very high probability that someone has already encountered the same problem and found a solution to it.

React — Advanced

Alright, once you have build up some basic projects using React it is the time when you dive more deeper into React by learning the advanced concepts.

  • React Routers
  • Context
  • Hooks
  • Code Splitting
  • Error Boundaries
  • Refs
  • Forwarding Refs
  • Render Props

REACT ROUTERS: A ROUTING LIBRARY WHICH HELPS YOU NAVIGATE THROUGH YOUR DIFFERENT PAGES IN YOUR APPLICATION.

Extra Cool Stuff!!!

There are some extra cool libraries to learn like:

  • Material UI
  • reactstrap
  • tailwindcss
  • Semantic UI etc.

It is not compulsory to learn everything. Try and learn them once you are confident with React basics and started developing your projects. These libraries will help you develop your React App more beautiful and robust.

Congratulations

You are a React Developer and now just have to hone you skills by creating projects. Don’t forget to visit React Docs often and learn new things.

--

--

--

Journal for developers who are looking for all the latest information’s, tutorials, what’s new, how-to, and so much more.

Recommended from Medium

Integrating Apollo and Express to build a Node.js GraphQL API

All About React Hooks — useEffect

location robe de soirée paris instagram

Difference between Terms Denoting Pre-written Code

Webpack: Zero To Production (Part 1)

Is Deno Meant to Replace NodeJS?

Kilikya Palace Goynuk

React native Firebase native authentication new version

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
DJ

DJ

Journal for developers who are looking for all the latest information’s, tutorials, what’s new, how-to, and so much more.

More from Medium

Reactjs: useEffect and lifecycle

Starting My Software Engineering Journey from Data Analyst

passion led us here

Components of React in 1 minute

Getting Started with React