ReactJs is a JavaScript library created by Facebook that lets us build dynamic user interfaces. What this dynamic user interface even means is that we have a web app with three timers on it, we have the ability to create and delete a timer when you click on a button to create a timer. 


A form will pop-up what feels for you to fill out and when you hit enter the app creates that timer for you. When you decide to delete a timer if you click the delete button, the timer will remove itself from the page that is pretty much what you would call a dynamic user interface. 


React was created because the Facebook development team wanted a better way to structure JavaScript applications. 


Why use React.Js? | 


number one is for reusable components 

Components are a huge part of what makes react so understanding them is crucial when programming with react components let you split your code into separate independent reusable pieces. 


You can think of components as functions that can take inputs call props and return elements describing what should appear on the screen. You  also take those already created functions and reuse then in other parts of your app without any problems. 

So, react components are like individual Legos that can build something great and when connect it together and they’re also reusable. 


Number two is for the virtual Dom 

Even though, javascript is fast enough to handle complex web applications. Dom manipulations are still not too fast. 


Updating the Dom is usually the problem when it comes to achieving optimal web performance that’s where the virtual Dom comes in how the virtual Dom works is. 


It keeps a copy of the real Dom in storage and whenever a change is made the update first goes to the virtual Dom. 


The virtual Dom then compares its Dom with the real Dom and applies the changes to the real Dom in the most efficient way possible. 


The number three is for props and skates 


So let’s start off with props short for properties by the wedding preps are used to let components talk with each other. 


That’s pretty much it, props let you pass data to other components for them to use it and another thing to know about props is that you cannot change props. 


And you may be thinking then what can I use for values that change over time what do I need for values that do that that change frequently. That’s  where state comes in. 


So props shouldn’t change but we need inputs that can change its value. The purpose of states is so that components can keep track of information between any renders. 


It does when you change a part of the state it updates the objects and then every renders the component. It’s also important to note that you should have this little state as possible reason being is. 

Let’s say that you have a car, a car has many moving parts and eventually things break. 


And the same thing could happen if you have too much state in your react, that location and for components that don’t need any state. 


We have two types of components stateful and stateless components 


stateful components | stateless components


stateful components are components using state which means they have values that can change stateless components on the other hand are components that don’t use state, which means they don’t have values that change.


One Response

Leave a Reply

Your email address will not be published. Required fields are marked *