ReactJS – Introduction
ReactJS – Introduction
React is an efficient and flexible JavaScript library for building user interfaces (and React itself is written using JavaScript). It breaks down complex UIs into small, isolated code called “components”. By using these components, React only concerns itself with what you see on the front page of a website.
ReactJS is a simple, feature rich, component-based JavaScript UI library. It can be used to develop small applications as well as big, complex applications. ReactJS provides minimal and solid feature set to kick-start a web application. React community compliments React library by providing large set of ready-made components to develop web application in a record time. React community also provides advanced concept like state management, routing, etc., on top of the React library.
React versions
The initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on October, 2020. The major version introduces breaking changes and the minor version introduces new feature without breaking the existing functionality. Bug fixes are released as and when necessary. React follows the Sematic Versioning (server) principle.
Features
The salient features of React library are as follows −
Solid base architecture
Extensible architecture
Component based library
JSX based design architecture
Declarative UI library
Benefits
Few benefits of using React library are as follows −
Easy to learn
Easy to adept in modern as well as legacy application
Faster way to code a functionality
Availability of large number of ready-made component
Large and active community
Applications
Few popular websites powered by React library are listed below −
Instagram, popular photo sharing application
Netflix, popular media streaming application
Code Academy, popular online training application
Reddit, popular content sharing application
As you see, most popular application in every field is being developed by React Library.
ReactJS Architecture
The React library is built on a solid foundation. It is simple, flexible and extensible. As we learned earlier, React is a library for creating user interfaces in a web application. The primary objective of React is to enable the developer to create user interfaces using pure JavaScript.
Typically, each user interface library introduces a new template language (which we need to learn) for designing user interfaces and provides the option to write logic inside the template or separately.
Instead of introducing a new template language, React introduces three simple concepts as below -
React elements
JavaScript representation of HTML DOM. React provides an API, React.createElement to create React Element.
JSX
A JavaScript extension for designing user interfaces. JSX is an XML based, extensible language that supports HTML syntax with slight modifications. JSX can be compiled for React Elements and used to build user interfaces.
React Component
React components are the primary building block of React applications. It uses React Elements and JSX to design its user interface.
React Component is a JavaScript class (extends the React Component class) or a pure JavaScript function. React components have properties, state management, lifecycle and event handlers. React components can be able to do simple as well as advanced logic.
Let us learn more about components in the React Component chapter.
Workflow of a React application
Let us understand the workflow of a React application in this chapter by creating and analyzing a simple React application.
Open a command prompt and go to your workspace.
cd /go/to/your/workspace
Next, create a folder, static_site, and change the directory to the newly created folder.
mkdir static_site
cd static_site
Example
Next, create a file, hello.html and write a simple React application.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script language="JavaScript">
element = React.createElement('h1', {}, 'Hello React!')
ReactDOM.render(element, document.getElementById('react-app'));
</script>
</body>
</html>
Next, serve the application using the service web server.
serve ./hello.html
Output
Next, open your favorite browser. Enter http://localhost:5000 in the address bar and then press enter.
Let us analyze the code and do a little modification to understand the React application better.
Here, we are using two APIs provided by the React library.
React.createElement
Used to create React elements. It expects three parameters -
Element tag
Element attributes as object
Element content - It can contain nested React elements as well
ReactDOM.render
Used to render the element into the container. It expects two parameters -
React Element OR JSX
Root element of the webpage
Nested React element
As React.createElement allows nested React element, let us add nested element as shown below -
Example
<script language="JavaScript">
element = React.createElement('div', {}, React.createElement('h1', {}, 'Hello React!'));
ReactDOM.render(element, document.getElementById('react-app'));
</script>
Output
It will generate the below content -
<div><h1> Hello React!</h1></div>
Use JSX
Next, let us remove the React element entirely and introduce JSX syntax as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="text/babel">
ReactDOM.render(
<div><h1>Hello React!</h1></div>,
document.getElementById('react-app')
);
</script>
</body>
</html>
Here, we have included babel to convert JSX into JavaScript and added type="text/babel" in the script tag.
<script type="text/babel">
...
...
</script>
Next, run the application and open the browser. The output of the application is as follows -
Next, let us create a new React component, Greeting and then try to use it in the webpage.
<script type="text/babel">
function Greeting() {
return <div><h1>Hello JSX!</h1></div>
}
ReactDOM.render(<Greeting />, document.getElementById('react-app') );
</script>
The result is same and as shown below -
By analyzing the application, we can visualize the workflow of the React application, as shown in the below diagram.
The React app calls the reactdom.render method, bypassing the user interface created using the React component (coded in JSX or React Elementor format) and the container to render the user interface.
ReactDOM.render processes JSX or React Elements and emits virtual DOM.
The virtual DOM will be merged and rendered in the container.
React Application Architecture
The React library is just a UI library, and it doesn't implement any special patterns for writing a complex application. Developers are free to choose the design pattern of their choice. The React community advocates certain design patterns.
One of the patterns is the flux pattern. React library also provides many concepts like higher order components, context, render props, refs etc. to write better code. React Hooks is developing concept to do state management in large projects. Let's try to understand the high-level architecture of a React application.
- React app starts with a single root component.
- The core component is created by using one or more components.
- Each component can be nested with any other component at any level.
- Composition is one of the core concepts of the React library. Therefore, each component is built by composing smaller components rather than inheriting one component from another.
- Most of the components are user interface components.
- React apps may include third-party components for a specific purpose, such as routing, animation, state management, etc.
Comments
Post a Comment