How to build application using ReactJS and ES6?
Overview:
Built by Facebook as a JavaScript library for building user interfaces, React has come a long way over the last couple of years. In fact, its popularity is not just restricted to developers but also that of contributors. React happens to be the third most starred library on Github, only behind the more popular Bootstrap and TensorFlow. And so, there is surely no doubt as to whether learning React is a good decision.
In this article, we shall take a look at how to build an application using React and ES6.
What is ECMA Script and ES6?
The European Computer Manufacturers Association, now ECMA, is an organization for standards in communication and information systems.
ES6, also known as ECMA Script, is a standardized form of JavaScript. Being the sixth version of ECMA Script, it is named ES6. ECMA Script is popular with client-side scripting, but is also gaining relevance in server side application of late.
Features of ES6
ES6, published in 2015, brought about a number of new features. We shall take a look at them here on.
- Constants – With ES6, constants have finally been introduced to JavaScript. As programmers would already know, constants are values that can be defined only once for a scope.
- Block-Scope for functions and variables – Earlier versions of JavaScript followed function scoping, where the need of a variable meant that you had to declare it within the function. However now, with the use of block scoping, variables have their values within the block.
- Arrow Functions – This is primarily syntax for defining functions with the use of an arrow.
- Default Function Parameters – Function parameters can be defined with their default values.
- Rest Function Parameters – This feature allows one to pass an arbitrary number of arguments and also process them within the function, when invoking it.
- String Templating – The interpolation of variables and expressions into strings, making use of syntax like the Perl or the shell, is known as string templating. A string template is generally enclosed with the use of backtick characters (`).
- Object Properties – With ES6, the syntax for object creation has been rather simplified.
- Formal Class Definition Syntax – Besides the features that have been stated above, ES6 has also simplified Class Definition, Declaring Methods, Inheritance, and Getters and Setters.
Must Read – Is React JS overtaking AngularJS – The finest front web framework?
What is ReactJS?
As stated earlier, ReactJS happens to be an open-source JavaScript library largely used for making user interfaces for applications that use a single page. It is meant for the view layer and was created by Facebook. It has since been used for Facebook’s News feed and also on Instagram.
The use of React allows one to create large web applications that can change data, without the need to reload the page. The core idea is to be fast, scalable and simple.
Why ReactJS?
Considering the availability of several open-source platforms for the development of front-end applications, why should one opt for ReactJS. Let us look into the advantages that ReactJS offers over other frameworks.
Simplicity – ReactJS is very easy to grasp. Making use of a special syntax called JSX, one that mixes JavaScript and HTML, it makes things easier. Besides, it also employs a component based approach making building and support of web applications easy.
Native Approach – Mobile applications can be created with ReactJS. It also supports re-usability of code. Thus, one may use ReactJS for making Web, Android and iOS applications.
Data Binding – Making use of one-way data binding and the use of application architecture called Flux allows flow of data via a single control point. This makes debugging of large applications easier.
Performance – There is no built-in container for dependency in ReactJS. One has many options when it comes to injecting dependencies.
Testability – ReactJS applications are very easy when it comes to testing.
Must Read – Steps to integrate Spring MVC and AngularJS
Features of ReactJS
Let us now take a look at some of the features that ReactJS offers.
- JSX – Rather than use JavaScript for templating, React uses JSX for the purpose. All one needs to know is HTML, since JSX makes use of HTML tag syntax for rendering sub components.
- React Native – React has native libraries and these provide an architecture for native applications like iOS, Android, etc. It is basically a mobile apps building framework that uses JavaScript only.
- Single-way Data Flow – ReactJS allows a set of immutable values to be passed to components rendered as properties in HTML tags. This means that the component cannot modify anything but can pass a call back function which does the modifications.
- Virtual DOM – ReactJS creates a data structure cache in memory and computes the changes made before updating it to the browser. This allows the programmer to code as if the entire page is rendered on every change, while React only renders components that actually change.
Must Read – Tips for Working with Angular Components
Sample application
In this section will create a simple HTML file to show the React and ES6 scripts. This sample application can be run in browser directly. We have shown the usage of class function and Arrow function introduced in ES6 script. The application can be modified as per your requirement. More ES6 script can also be added for advanced functionalities.
Listing 1: Sample code of React and ES6 script
[code]
<!DOCTYPE html>
<html>
<script src=”https://unpkg.com/react@16/umd/react.production.min.js”></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.production.min.js”></script>
<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script>
<body>
<div id=”samplediv”></div>
<!– ES6 script–>
<script>
class Student {
constructor(name) {
this.subject = name + ” – Learns React and ES6″;
}
<!– Using Arrow function of ES6–>
hello = name => “Hello ” + name;
}
student = new Student(“John”);
document.write(student.hello(“Students!!!!”));
document.write(student.subject);
</script>
<!– React code–>
<script type=”text/babel”>
class Sample extends React.Component {
render() {
return <h1>Welcome to TechAlpine</h1>
}
}
ReactDOM.render(<Sample />, document.getElementById(‘samplediv’))
</script>
</body>
</html>
[/code]
Now run the HTML file in a browser and the following output will be displayed.
Image 1: Output of the sample program
Conclusion
ReactJS and ES6 is a popular combination for the development of front-end in applications. This tutorial has been designed in a way that enables one to get a clear idea about its implementation and usage.
