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