What is ReactJs: An Introduction
ReactJS is a front-end JavaScript library for creating user interfaces that is open-source. Facebook and a group of independent developers and businesses manage ReactJS. For online and smartphone applications, it is used to manage the display layer. We can build reusable UI components with ReactJS.
It has a solid base and a huge community behind it, making it one of the most popular JavaScript libraries. ReactJS is a JavaScript library for creating reusable user interface components that are declarative, powerful, and versatile.
It's an open-source, component-based front-end library that's only responsible for the application's display layer.
Since React is only concerned with state management and rendering the state to the DOM, building React apps normally necessitates the use of external libraries for routing and client-side features.
History of ReactJS
Jordan Walke, a Facebook software developer, developed React and launched an early version known as "FaxJS." XHP, a PHP HTML component library, affected him. It was first seen in 2011 on Facebook's News Feed, and then in 2012 on Instagram. In May 2013, it was made open-source at JSConf US.
Features of ReactJS
- JSX: An continuation to JavaScript, Though it is not necessary to use JSX in react, it is a useful function that is also simple to use.
- Components: Components are the building blocks of React code. Components are pure javascript functions that simplify programming by separating logic into interchangeable, separate code. Using the React DOM library, components can be made to a specific entity in the DOM. Components can be used as functions and components can be used as classes. Components have a condition, called props, that makes life easier.
- Virtual DOM: The use of a virtual Document Object Model, or virtual DOM, is another noteworthy aspect. React builds an in-memory data structure cache, calculates the variations, and then quickly updates the browser's displayed DOM. Just the most recent DOM updates have been modified in the browser's DOM.
- Javascript Expressions: Curly brackets, for example, can be used to use JS expressions in the JSX files.
Advantages of ReactJS
- ReactJS makes use of a virtual DOM that uses an in-memory data structure cache, with only the most recent updates being modified in the browser's DOM. This improves the app's efficiency.
- Using the react component element, you can build components of your choosing. The modules are reusable and useful for code maintenance.
- Since Reactjs is an open-source javascript library, it's simple to get started.
- ReactJS has grown in popularity in a limited period of time and is supported by Facebook and Instagram. Many well-known firms, such as Apple and Netflix, use it.
- Since much of the code is performed in Javascript rather than HTML, it's simple to debug and evaluate.
Disadvantages of ReactJS
- The majority of the code is written in JSX, which means that HTML and CSS are used in javascript. This may be misleading since most other implementations tend to keep HTML and javascript code apart.
ReactJS from CDN
To start creating and experimenting with ReactJs, first we gotta install reactJS on your system. The CDN javascript scripts, as seen below, make it simple to get started with ReactJs.
For dev:
<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>
Reactjs code cannot be executed directly in the browser and must be converted to javascript using Babel before being executed in the browser.
The BabelJS script that can be used is as follows:
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
This is a working ReactJS example that uses CDN files and a babeljs script.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, from StudyTonight Tutorials!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Output:
It has been suggested that using the babel script specifically is not a safe idea and that beginners can use it just to study reactjs for the time being. In the output, you'll need to use the npm package to install react.
Summary
- ReactJS is a front-end JavaScript library that can be used to build user interfaces. It is maintained by Facebook and is used for UI creation by several businesses today.
- JSX, modules (functional and class-based), the life cycle of a component, props, and state support for a component, and dealing with javascript expressions are all central features of ReactJS.
- The ReactJS project configuration is discussed using CDN files and npm packages to create the project.
