How to start ReactJs for begginers

hello, dev community i am gonna tell you how to start learning Reactjs . this post is only for beginners and for how to start learning react , we will also gonna discuss about Pre-requisites and topics and fundamental to learn before react

Pre-requisites for learning react

we assume that you have clear some below fundaments of this topics before learning react

1) Basics of HTML

2) Basics of CSS

3) Basics of JavaScript(Variables,DOMmanuplation,datatypes,events etc)

Installing ReactJs

-> for installing reactjs in windows click here

-> for installing reactjs in MacOs click here

Learning react

Fundamentals: All the above things we have discussed were the prerequisite of ReactJS. Now once you learn all the above things it’s time to jump into React. Understand the basic concept of React first

the first thing you need to learn about react is state and props and how to use them

State: Basically ‘state’ holds synchronous variables. If you change the value of a state variable then the change is reflected immediately in all the places that particular variable is used.

Props: are just like arguments passed in a function or method. In React props (arguments) are passed into an HTML tag as input arguments.

after learning state and props you can learn the diffrence between functional component and class component
both of the approchs are good for reactJS but i will suggests that if you are newbie in react then first learn the function component as you are familier with the es6 fuinctions and otheer approches of the javascript

after that you can create simple projects like

simple to-do application
https://github.com/kabirbaidhya/react-todo-app
calculator
https://github.com/ahfarmer/calculator

What is state and adding state to the application

The state

Unlike the props, the state data is local and specific to the component that owns it. It is not accessible to any other components unless the owner component chooses to pass it down as props to its child component(s).

Even while the child component receives the data in its props, it wouldn’t know where exactly the data comes from. Maybe it was inputted or comes from the props.

Adding state to the component

Now, once the component receives this input data, we need to pass it to a central location where we can manage it and display in the browser view.

This allows other components to have access to this data.

For instance, the TodosList component will be accessing the data and display its todos items. Also, the TodoItem component (which holds the checkbox and delete button) will be accessing the data to update the checkbox, update edited items and also remove items from the state.

To add a state in a class component, we simply create a state object with key-value pair. The value can be of any data type. In the code below, the value is an array.

state = {

todos: [],

}

The React Developer Tools

If you want to inspect and debug your application, check your components tree or see how React works in real-time, you will need this tool. It is available as a browser extension for Chrome and Firefox.

Let’s go ahead and install it.

Head over to the extension page for your browser of choice (Chrome here and Firefox here) and install it.

Once you install it, you are done. It doesn’t require any other setup.