React Js is one of the most popular UI technologies nowadays, alongside Angular and Vue. It is developed by Facebook and has a huge ecosystem and an active community. Also, it has a small learning curve in comparison to other modern UI libraries and frameworks.
There are many reasons why React became so popular among the web developers to build complex User Interfaces-
Component Based
With React, you can build encapsulated components that can manage their own state and compose the components to make complex UIs. The idea is to break a complex UI into logical components which are reusable, maintainable and easy to understand.
Virtual Dom
React maintains a copy of the DOM object called virtual DOM. This serves as a great advantage because it doesn’t just blindly update the real DOM each time there is some change in ‘state’ or ‘props’. It compares the new DOM object with the virtual DOM and updates the original DOM only when there is a change. Internally React uses algorithms to optimize this DOM objects comparison.
JSX
React allows you to write HTML like code in javascript using a syntax called JSX. Though it is similar to HTML, it is not HTML. But it complies to a javascript code which renders similar to HTML. You need to import ‘React’ to write JSX. import React from ‘react’;
Each JSX element compiles to:
React.createElement(component, props, …children)
Here is an example:
<div className=”app”>
<h1> Hi, I’m React App </h1>
</div>
React compiles the above JSX to the following javascript code:
React.createElement(
‘div’,
{ className: ‘app’ },
React.createElement(‘h1’, null, ‘Hi, I\’m React App’)
);JSX is not a pre-requisite for React. But It is generally used in React owing to it’s simple and familiar syntax. Without JSX it could become cumbersome if a component has a nested child element.
One more thing to notice here is that we used ‘className’ instead of the ‘class’ attribute, which is used in HTML. Since ‘class’ is a keyword in javascript, we cannot use it to assign CSS classes to elements. This also proves that JSX only looks like HTML but it’s not the same.
Let's start with components
A Component is a function whose primary job is to render some UI. This UI may contain other components and may be written using JSX. Let’s start with writing our first component.
const Person = props => {
return (
<div className=”person”>
<h1>{props.name}</h1>
<p>Age: {props.age}</p>
</div>
);
};
Here, the Person component returns some JSX. Since it’s a JavaScript, you can execute JavaScript code inside JSX using {} curly-brace syntax. The above component also receives a special parameter called ‘props’ which is used to display some dynamic information about the component. Without ‘props’ this component would only return the same JSX each time. Now, this Person Components can be used at multiple places with different props:
const ManyPersons = props => {
return (
<div>
<Person name=”Rahul” age=”24″ />
<Person name=”Kartik” age=”26″ />
</div>
);
};
The above code will render two Person components with different names and ages, which are passed as props. However, in real-life scenarios, the data might not be pre-known and you may get the data at runtime. In such cases, you may be needed to iterate through a list of objects to render each Person component.
const ManyPersons = props => {
const personsList = [
{ id: 1, name: ‘Rahul’, age: 24 },
{id: 2, name: ‘Kartik’, age: 26 },
{ id: 3, name: ‘Steve’, age: 28 }
];
return (
<div>
{this.personsList.map(person => {
return <Person key={person.id} name={person.name} age={person.age} />;
})}
</div>
);
};
The above code uses javascript’s ‘map’ function to return a Person component for each person object in the list. One strange thing that you would’ve noticed here is we are passing a ‘key’ for each component. React gives a warning if you do not provide a key here because a key is the only thing React uses to identify DOM elements.
There are two types of components
a) Class based Components: Class based components are ES6 classes extending React.Component. Components defined as classes provide features like access to state, implementation of life cycle hooks and other APIs.
class App extends React.Component {
state = {
value: ”
};
inputChangeHandler = event => {
this.setState({ value: event.target.value });
};
render() {
return (
<div>
<h1>Hello, I’m a React Class based Component!</h1>
<input
value={this.state.value}
type=”text”
onChange={this.inputChangeHandler}
/>
<p>{this.state.value}</p>
</div>
);
}
}
In this example, the App component has its own state. State is a javascript object containing one or more properties. You can access state using ‘this.state’ throughout the component. Also, the props passed to a class based component can be accessed using ‘this.props’. What makes ‘state’ and ‘props’’ special is that any change in state or props will cause the re-rendering of the component.
To modify a component’s state you can not directly assign a value to its property like other javascript objects. There is a special method ‘setState’ which should be called to set the state of a component as in the above example.
b) Functional Components: Functional Components are the equivalent of Class based Components but expressed as functions instead of classes. Earlier, it wasn’t possible to use state or side-effects in Function Components. That’s why we call them Functional Stateless Components. However, that’s not the case anymore with React Hooks, which now rebrands to Function Components. The Person component that you saw above is an example of a functional component.
Conclusion
React is a must-try for a new-age UI development project for all the benefits that it provides. Investing in React-based development has helped numerous teams. Also, a lot of material is also available on the technology. Now is the time to React!
Read our blog on Spring Cloud Netflix: Hystrix