Header Ads

ad728

React JS



ReactJS is a very popular JavaScript library which is maintained by the equally famous Facebook. It is a robust, quick and highly customizable JavaScript user interface (UI) library. It is primarily used as a tool for building user interfaces and UI components. This article intends to fully introduce React JS and how to code in it.


React was created by Jordan Walke, a software engineer working at Facebook. He was inspired and influenced by XHP, which is an HTML component framework for designed for PHP. React was initially deployed on Facebook's newsfeed in 2011. It was later also implemented on Facbook’s sister concern, Instagram.com in 2012. It was given the open-source status at the JSConf US, in May 2013.


It is also named as either React.js or ReactJS. Besides Facebook other communities of individual developers and companies are also involved in its maintenance and development.


Developers can use React as a base while developing single-page or mobile applications. Although, it is optimal only for its intended use of fetching rapidly changing, data that needs to be recorded. React is the quickest method to achieve this target. However, fetching such data is only the first step of what usually happens on a web page. Due to this, complex React applications usually require the help and use of additional libraries for actions, including but not limited to, interaction with an API, state management and routing.


ARCHITECTURE OF REACT JS BEYOND HTML

The basic architecture of React JS is not just limited to rendering HTML in the browser. It goes beyond that, for example, Facebook has dynamic charts which render to <canvas> tags. Besides this services such as Netflix and PayPal utilize universal loading to render the same type of HTML code at both the server side and client side.


CUSTOMIZING REACT JS

React does not endeavour to offer a complete 'application framework' as such. It is in fact designed specifically for creating user interfaces. Therefore, many tools essential for developers to build an application, are not included. This gives the developers the choice to utilize whichever libraries they prefer to accomplish tasks which may include performing network access or local data storage.
Following are various examples of how to use React JS:


ADDING REACT TO AN HTML PAGE
Example 01
<!DOCTYPE html>
<html lang="en">
<title>Bootstrap guru React JS Test</title>

<!-- Load the React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load the React Virtual DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load Babel Compiler -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>

<script type="text/babel">
    
//  Insert JSX Babel code here
</script>

</body>
</html>


Please note that <script type="text/babel"> is needed for using Babel.


WHAT ARE BABEL AND JSX?
Babel is another JavaScript compiler which can translate markup or programming languages into JavaScript. Babel is used for different conversions. React JS incorporates Babel to convert JSX into JavaScript.


JSX stands for JavaScript XML. It is an XML/HTML like extension for JavaScript.


CONSIDER THE EXAMPLE:
const element = <h1>Hello World!</h1>
The above example shows that JSX is not actually JavaScript or HTML markup. JSX is actually an XML syntax extension to JavaScript which includes the full power of ES6 (ECMAScript 2015).
Similar to HTML, JSX tags can define tag names, attributes, and children. If in syntax an attribute is wrapped in curly braces, then it is considered a JavaScript expression. It should be noted that, JSX does not use quotes around the HTML text string.


REACT JS VIRTUAL DOM
One of the really cool and notable features of React is its Virtual DOM. Usually, when developing an app which features a lot of user interaction and data updates, you have to carefully consider and measure the impact of the app structure on the performance of the app. Even when utilizing fast client platforms and JavaScript engines, extensive DOM manipulation can deteriorate performance and annoy end-users. Also because the DOM is tree-structured, simple changes made at the top level can cause a negative impact on the user interface.




React solved this problem by introducing a virtual DOM. This is actually a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which resides in the system memory and not on your screen. An efficient algorithm then chooses which changes made to the virtual DOM need to be made to the real DOM as well. Only the required changes are then applied to the real DOM, in the most effective way possible. This ensures that minimum time is spent to update the real DOM. This provides higher performance and a pristine user experience.


The ReactDom.render() method is used to render HTML elements. Consider the following example:




<div id="id01">Bootstrap Guru</div>

<script type="text/babel">
ReactDOM.render(
    <h1> Bootstrap Guru React JS!</h1>,
    document.getElementById(
'id01'));
</script>


JSX EXPRESSIONS
In JSX expressions are created by wrapping them in curly { } braces. For example:
<div id="id01">Hello World!</div>

<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    <h1>Hello {name}!</h1>,
    document.getElementById(
'id01'));
</script>


REACT ELEMENTS
React applications are usually built around a single HTML element which is called the root node (root element) by developers. For example:


<div id="root"></div>


REACT ELEMENTS ARE WRITTEN AS FOLLOWS:


const element = <h1> Bootstrap Guru React!</h1>
These Elements are rendered with the ReactDOM.render() method:
ReactDOM.render(element, document.getElementById('root'));
React elements are immutable and cannot be changed. If required, the only way to change them is to render a new element every time:


EXAMPLE OF AN REACT ELEMENT:
function tick() {
    
const element = (<h1>{new Date().toLocaleTimeString()}</h1>);
    ReactDOM.render(element, document.getElementById(
'root'));
}
setInterval(tick, 
1000);


REACT COMPONENTS
React is based on Components which can be really wonderful and useful for developers. React components are JavaScript functions. You can start off with small things, which you use to build bigger things, and ultimately use the bigger things to build full apps. Each component can have its own logic and control of its own rendering. These can easily be reused wherever you need them. Code re-use allows developers to easily develop and maintain their apps.
The following example creates a React component named "Guru":
Function Guru() {
    
return <h1>Hello React JS!</h1>;
}
ReactDOM.render(<Guru />, document.getElementById(
'root'));
React can also use ES6 classes to create components.
The below example creates a React component named “World” with a render method:
class World extends React.Component {
    render() { 
return(<h1>Hello World!</h1>); }
}
ReactDOM.render(<World />, document.getElementById(
'root'));


REACT COMPONENT PROPERTIES
This next example creates a React component named "Welcome" and has property arguments:


function Welcome(props) {
    
return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name=
"Thomas D. Harry"/>, document.getElementById('root'));
The below example also creates a React component named "Welcome" having property arguments:
class Welcome extends React.Component {
    render() { 
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name=
"Thomas D. Harry"/>, document.getElementById('root'));


No comments

Post Bottom Ad

ad728