PU$]-[KAR's

… Every drop has ability to survive .


Leave a comment

React … With example!

Hey!

Today, we will go through the one of the basic example of react. In this post we will see how to build a react component and  how they interact and communicate with each other.

In this example we are going to create two buttons and based on the click of the button, we are going to change the state of the label i.e. changing the text of the label.

Example

So to begin with this we example, first we have to create ‘react Components’ for button and label. For button we can create a reusable component which takes the name and click function as the parameter. So we can reuse this button by passing the name and click function as per our requirement and the button will invoked the exact function which we have passes to it. This implementation will explain how the properties (props) can be passed from parent to child.

As you can look into the code, we are accessing the function and name using ‘this.pros.onclick’ & ‘this.props.name’. The props represents the attribute which we have supplied to Button component. And if you observe carefully we have passed different function to each button. In similar way the ‘Label’ has been implemented.

Now we will come to the part about the changing the label text on click. In react the important thing to keep in mind is that every change in UI is get handled through the state change. So in short to change the text on the click, we have to change the state of the application. Basically state is the collection of properties which defines the current state of the application.

The function ‘getInitializeState‘ is the function provided by react to intialize the state once and later on we can change the states. This is what we have done exactly the same with label. We have initialize label with some default value and we are changing the state of the label on click of the button. Behind the scenes when we change the state the ‘Render’ function will get called automatically and the receptive DOM will get re render. This is the example of stateful component. Just keep in mind that this state change approach will force ‘render’ method only in case of ‘stateful’ component. This will not be the case if we used stateless component. In that case we have wrap the stateless component in side stateful component or ‘redux form’ or any other options. We will discuss about the this stateless component in later posts.

That’s  all my friends… 🙂

 

Advertisements


Leave a comment

React … Getting started !!!

Hi folks,

Like angular, again one of the technology is getting evolved and i.e. ReactJS. ReactJS is really a way different from the AngularJS in all the manner but it looks quite good and interesting to me. After all giant ‘Facebook’ is behind it. 😉

So today to begin with ‘React’ I would like to share the key concepts and fundamentals to understand React.

Introduction:

React is a javascript library for building user interfaces. As it’s a library that means it is way all different than AngularJS of course. AngularJS is a framework not a library. Looking towards the react through the perspective of MVC, we may called React as ‘V’. That means React will take a responsibility to create an HTML page i.e. ‘View’ in our application.
React has been developed by Facebook and now lot of big players are using it too like Instagram, PayPal and so on.

Advantages Specifications of React:

Server side Rendering:

One of the good things about the react (unlikely to the previous version of AngularJS) React is supports the server side rendering if controls. So in certain scenarios like loading a heavy page at the beginning, it will perform faster.

Use of JSX:

JSX makes it easy to read the code of your components. It is also really easy to see the layout an how components are plugged with each other.
Combining functionality (JavaScript) directly to markup to create a component which is independent and self contained will make our life easier to maintain the code.

Virtual DOM:

React works of on the mechanism of rendering virtual DOM to the actual ‘DOM’ i.e. actual HTML. That means whatever components we write in react get stored in virtual DOM and before rendering them to HTML DOM, existing HTML DOM gets compared against virtual DOM. This allows react to work faster. Because after comparison between the DOM, virtual DOM allows only changes to get rendered in to HTML (i.e. instead of reloading whole virtual DOM only changes in the DOM will get rendered on to the page.)

Few keywords from the React:

Following are the frequently used key words in React on which react is basically based upon.

Component:

We can say that React is component based architecture. Everything in react is treated as the component. So whatever DOM structure we are going to create will be treated as component only.

Class:

We are using ‘class’ based approach to create DOM. Basics of ES6 can help you in this.

Render:

This is the key method in React. This will be responsible to render a DOM and The markup we return from render() methods in React components is called JSX. The markups in JSX are similar to HTML but finally they get transpiled in to JavaScript functions.
But Yes, there is a bit difference such as we need to us className instead of class just because it ‘class’ is getting referred as object here.

ReactDOM:

This is the object who is going to render our ‘component’ using the ‘render’ method.

That’s All !!!

These are the ‘must required’ points at least one should know before starting with. In upcoming post we will go through the actual example using React.

🙂