Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the traditional DOM structure, and making changes in them was a very challenging task. If any mistake found, it manually searches the entire application and update accordingly. The component-based approach was introduced to overcome an issue. In this approach, the entire application is divided into a small logical group of code, which is known as components.
A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which will be the final UI of your application.
Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.
In ReactJS, we have mainly two types of components. They are
Functional Components
Class Components
Functional Components
In React, function components are a way to write components that only contain a render method and don’t have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example.
function WelcomeMessage(props) {
return <h1>Welcome to the , {props.name}</h1>;
}
The functional component is also known as a stateless component because they do not hold or manage state. It can be explained in the below example.
Example
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<First/>
<Second/>
</div>
);
}
}
class First extends React.Component {
render() {
return (
<div>
<h1>JavaTpoint</h1>
</div>
);
}
}
class Second extends React.Component {
render() {
return (
<div>
<h2>www.javatpoint.com</h2>
<p>This websites contains the great CS tutorial.</p>
</div>
);
}
}
export default App;
Output:
Class Components
Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function. Valid class component is shown in the below example.
class MyComponent extends React.Component {
render() {
return (
<div>This is main component.</div>
);
}
}
The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.
Example
In this example, we are creating the list of unordered elements, where we will dynamically insert StudentName for every object from the data array. Here, we are using ES6 arrow syntax (=>) which looks much cleaner than the old JavaScript syntax. It helps us to create our elements with fewer lines of code. It is especially useful when we need to create a list with a lot of items.
As we have already seen that, all of the React components have a render function. The render function specifies the HTML output of a React component. JSX(JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse.
JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.
Example
Here, we will write JSX syntax in JSX file and see the corresponding JavaScript code which transforms by preprocessor(babel).
The above line creates a react element and passing three arguments inside where the first is the name of the element which is div, second is the attributes passed in the div tag, and last is the content you pass which is the “Hello JavaTpoint.”
Why use JSX?
It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section.
It is type-safe, and most of the errors can be found at compilation time.
It makes easier to create templates.
Nested Elements in JSX
To use more than one element, you need to wrap it with one container element. Here, we use div as a container element which has three nested elements inside it.
App.JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>JavaTpoint</h1>
<h2>Training Institutes</h2>
<p>This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
Output:
JSX Attributes
JSX use attributes with the HTML elements same as regular HTML. JSX uses camelcase naming convention for attributes rather than standard naming convention of HTML such as a class in HTML becomes className in JSX because the class is the reserved keyword in JavaScript. We can also use our own custom attributes in JSX. For custom attributes, we need to use data- prefix. In the below example, we have used a custom attribute data-demoAttribute as an attribute for the <p> tag.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>JavaTpoint</h1>
<h2>Training Institutes</h2>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
In JSX, we can specify attribute values in two ways:
1. As String Literals: We can specify the values of attributes in double quotes:
var element = <h2 className = "firstAttribute">Hello JavaTpoint</h2>;
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >JavaTpoint</h1>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
Output:
JavaTpoint
This website contains the best CS tutorials.
2. As Expressions: We can specify the values of attributes as expressions using curly braces {}:
var element = <h2 className = {varName}>Hello JavaTpoint</h2>;
JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions. Below example shows how to use comments in JSX.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Hello JavaTpoint</h1>
{/* This is a comment in JSX */}
</div>
);
}
}
export default App;
JSX Styling
React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.
NOTE: JSX cannot allow to use if-else statements. Instead of it, you can use conditional (ternary) expressions. It can be seen in the following example.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
var i = 5;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False!'}</h1>
</div>
);
}
}
export default App;
React and Vue is the two most popular JavaScript libraries which are used to build thousands of websites today. Both React and Vue are very powerful frameworks with their own set of pros and cons. Which one you have to pick, depends on the business needs and use cases.
Both React and Vue have a lot of common things like the component-based architecture, usage of virtual DOM, usage of props, chrome Dev tools for debugging, and many more. But, both have some significant differences, which are given below.
React
Vue
Definition
React is a declarative, efficient, flexible, open-source JavaScript library for building reusable UI components.
Vue is an open-source JavaScript library for building reusable user interfaces and single-page applications.
History
It was created by Jordan Walke, a software engineer at Facebook. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram. Facebook developed React in 2011 for the newsfeed section, but it was released to the public on May 2013.
Vue was created by Evan You, a former employee of Google worked on many Angular projects. He wanted to make a better version of Angular, just extracting the part which he liked about Angular and making it lighter. The first release of Vue was introduced in February 2014.
Learning Curve
React is not a complete framework, and the more advanced framework must be looked for the use of third-party libraries. It makes the learning of the core framework not so easy. It adds some complexity to the learning curve as it differs based on the choices you take with additional functionality.
Vue provides higher customizability, which makes it easier to learn than Angular or React. Vue shares some concepts with Angular and React in their functionality. Hence, the transition to Vue from Angular and React is an easy option. Also, the official documentation is well written and covers everything the developer needs to build a Vue app.
Preferred Language
JavaScript/JavaScript XML
HTML/JavaScript
Size
The size of the React library is 100 kilobytes (approx.).
The size of the Vue library is 60 kilobytes (approx.).
Performance
Its performance is slow as compared to Vue.
Its performance is fast as compared to React.
Flexibility
React provides great flexibility to support third-party libraries.
Vue provides limited flexibility as compared to React.
Coding Style
React uses JSX for writing JavaScript Expression instead of regular JavaScript. JSX is similar to HTML code within the JavaScript expressions. React takes everything as Component, and each component has its own lifecycle methods.
Vue coding style is little similar to Angular. It separates HTML, JS, and CSS as like web developers have been used to the web development scenario for years. But, it also allows using JSX if you prefer. Vue’s take of the component lifecycle more intuitive than React’s.
Data Binding
React supports one-way data binding. The one-way data binding refers to a single source of truth. React flows in a single direction, and only the model can change the app’s state.
Vue supports both one-way and two-way data binding. The two-way data binding is a mechanism where UI fields are bound to model dynamically. If the UI components change, model data is also changed accordingly.
Tooling
React has great tooling support. It uses third-party CLI tool (create-react-app), which helps to create new apps and components in React Project. It has excellent support for the major IDEs.
Vue provides limited tooling support as compared to React. It has a Vue CLI tool, which is similar to the create-react-app tool. It gives supports for major IDEs but not as good as React.
ReactJS is an open-source JavaScript library used to build the user interface for Web Applications. It is responsible only for the view layer of the application. It provides developers to compose complex UIs from a small and isolated piece of code called “components.” ReactJS made of two parts first is components, that are the pieces that contain HTML code and what you want to see in the user interface, and the second one is HTML document where all your components will be rendered.
Jordan Walke, who was a software engineer at Facebook, develops it. Initially, it was developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 for the newsfeed section, but it was released to the public in May 2013.
Advantage of ReactJS
Easy to Learn and Use: ReactJS is much easier to learn and use. Any developer who comes from a JavaScript background can easily understand and start creating web apps using React.
Creating Dynamic Web Applications Becomes Easier: To create a dynamic web application specifically with HTML was tricky, which requires complex coding, but React JS solved that issue and makes it easier. It provides less coding and gives more functionality.
Reusable Components: A ReactJS web application is made up of multiple components, and each component has its logic and controls. These components can be reused wherever you need them. The reusable code helps to make your apps easier to develop and maintain.
Performance Enhancement: ReactJS improves performance due to virtual DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser’s DOM. Due to this, when we write a React component, we did not write directly to the DOM. Instead, we are writing virtual components that react will turn into the DOM, leading to smoother and faster performance.
The Support of Handy Tools: ReactJS support a handy set of tools which make the task of the developers understandable and easier. It also allows you to select particular components and examine and edit their current Props and State.
Disadvantage of ReactJS
The high pace of development: As we know, the frameworks continually changes so fast. The developers are not feeling comfortable to re-learn the new ways of doing things regularly. It may be hard for them to adopt all these changes with all the continuous updates.
Poor Documentation: React technologies updating and accelerating so fast that there is no time to make proper documentation. To overcome this, developers write instructions on their own with the evolving of new releases and tools in their current projects.
View Part: ReactJS covers only the UI Layers of the app and nothing else. So you still need to choose some other technologies to get a complete tooling set for development in the project.
Known to be SEO Friendly: Traditional JavaScript frameworks have an issue in dealing with SEO. ReactJS overcomes this problem, which helps developers to be easily navigated on various search engines. It is because ReactJS applications can run on the server, and the virtual DOM will be rendering and returning to the browser as a regular web page.
The Benefit of Having JavaScript Library: Today, ReactJS gaining popularity among web developers. It is offering a very rich JavaScript library which provides more flexibility to the web developers to choose the way they want.
Scope for Testing the Codes: ReactJS applications are easy to test. It offers a scope where the developer can test and debug their codes with the help of native tools.
React Native
React Native is an open-source JavaScript framework used for developing a mobile application for iOS Android, and Windows. It uses only JavaScript to build a cross-platform mobile app. React Native is same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser.
Facebook develops the React Native in 2013 for its internal project Hackathon. In March 2015, Facebook announced that React Native is open and available on GitHub.
React Native was initially developed for the iOS application. However, recently, it also supports the Android operating system.
Advantages of React Native
There are several advantages of React Native for building mobile applications. Some of them are given below:
Cross-Platform Usage: It provides the facility of “Learn once write everywhere.” It works for both platform Android as well as iOS devices.
Class Performance: The code written in React Native are compiled into native code, which enables it for both operating systems as well as it functions in the same way on both the platforms.
JavaScript: JavaScript knowledge is used to build native mobile apps.
Community: The large community of ReactJS and React Native helps us to find any answer we require.
Hot Reloading: Making a few changes in the code of your app will be immediately visible during development. If the business logic is changed, its reflection is live reloaded on screen.
Improving with Time: Some features of iOS and Android are still not supported, and the community is always inventing the best practices.
Native Components: We will need to write some platform specific code if we want to create native functionality, which is not designed yet.
Existence is Uncertain: As Facebook develop this framework, its presence is uncertain since it keeps all the rights to kill off the project anytime. As the popularity of React Native rises, it is unlikely to happen.
Disadvantage of React Native
React Native is Still New and Immature: React Native is a newbie in Android and iOS programming languages and is still in its improvement stage, which can have a negative impact on the apps.
Learning is Tough: React Native is not easy to learn, especially for a fresher in the app development field.
It Lacks the Security Robustness: React Native is a JavaScript library and open-source framework, which creates a gap in the security robustness. When you are creating banking and financial apps where data is highly confidential, experts advice not to choose React Native.
It Takes More Time to Initialize: React Native takes a lot of time for initializing the runtime even for the hi-tech gadgets and devices.
ReactJS Vs React Native
SN
ReactJS
React Native
1.
The ReactJS initial release was in 2013.
The React Native initial release was in 2015.
2.
It is used for developing web applications.
It is used for developing mobile applications.
3.
It can be executed on all platforms.
It is not platform independent. It takes more effort to be executed on all platforms.
4.
It uses a JavaScript library and CSS for animations.
It comes with built-in animation libraries.
5.
It uses React-router for navigating web pages.
It has built-in Navigator library for navigating mobile applications.
6.
It uses HTML tags.
It does not use HTML tags.
7.
It can use code components, which saves a lot of valuable time.
It can reuse React Native UI components & modules which allow hybrid apps to render natively.
8.
It provides high security.
It provides low security in comparison to ReactJS.
9.
In this, the Virtual DOM renders the browser code.
In this, Native uses its API to render code for mobile applications.
AngularJS is an open-source JavaScript framework used to build a dynamic web application. Misko Hevery and Adam Abrons developed AngularJS in 2009, and now Google maintained it. The latest version of Angular is 1.7.8 on March 11, 2019. It is based on HTML and JavaScript and mostly used for building a Single Page Application. It can be included to an HTML page with a <script> tag. It extends HTML by adding built-in attributes with the directive and binds data to HTML with Expressions.
Features of AngularJS
Data-binding: AngularJS follows the two-way data binding. It is the automatic synchronization of data between model and view components.
POJO Model: AngularJS uses POJO (Plain Old JavaScript) model, which provides spontaneous and well-planned objects. The POJO model makes AngularJS self-sufficient and easy to use.
Model View Controller(MVC) Framework: MVC is a software design pattern used for developing web applications. The working model of AngularJS is based on MVC patterns. The MVC Architecture in AngularJS is easy, versatile, and dynamic. MVC makes it easier to build a separate client-side application.
Services: AngularJS has several built-in services such as $http to make an XMLHttpRequest.
User interface with HTML: In AngularJS, User interfaces are built on HTML. It is a declarative language which has shorter tags and easy to comprehend. It provides an organized, smooth, and structured interface.
Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.
Active community on Google: AngularJS provides excellent community support. It is Because Google maintains AngularJS. So, if you have any maintenance issues, there are many forums available where you can get your queries solved.
Routing: Routing is the transition from one view to another view. Routing is the key aspect of single page applications where everything comes in a single page. Here, developers do not want to redirect the users to a new page every time they click the menu. The developers want the content load on the same page with the URL changing.
ReactJS
ReactJS is an open-source JavaScript library used to build a user interface for Single Page Application. It is responsible only for the view layer of the application. It provides developers to compose complex UIs from a small and isolated piece of code called “components.” ReactJS made of two parts first is components, that are the pieces that contain HTML code and what you want to see in the user interface, and the second one is HTML document where all your components will be rendered.
Jordan Walke, who was a software engineer at Facebook, develops it. Initially, it was developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 for the newsfeed section, but it was released to the public in May 2013.
Features of ReactJS
JSX: JSX is a JavaScript syntax extension. The JSX syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript React code.
Components: ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its logic and controls. These components can be reusable, which help you to maintain the code when working on larger scale projects.
One-way Data Binding: ReactJS follows unidirectional data flow or one-way data binding. The one-way data binding gives you better control throughout the application. If the data flow is in another direction, then it requires additional features. It is because components are supposed to be immutable, and the data within them cannot be changed.
Virtual DOM: A virtual DOM object is a representation of the real DOM object. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then, it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that are changed. It makes the application faster, and there is no wastage of memory.
Simplicity: ReactJS uses the JSX file, which makes the application simple and to code as well as understand. Also, ReactJS is a component-based approach which makes the code reusable as your need. It makes it simple to use and learn.
Performance: ReactJS is known to be a great performer. The reason behind this is that it manages a virtual DOM. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual Components that will turn into the DOM, leading to smoother and faster performance.
AngularJS Vs. ReactJS
AngularJS
ReactJS
Author
Google
Facebook Community
Developer
Misko Hevery
Jordan Walke
Initial Release
October 2010
March 2013
Latest Version
Angular 1.7.8 on 11 March 2019.
React 16.8.6 on 27 March 2019
Language
JavaScript, HTML
JSX
Type
Open Source MVC Framework
Open Source JS Framework
Rendering
Client-Side
Server-Side
Packaging
Weak
Strong
Data-Binding
Bi-directional
Uni-directional
DOM
Regular DOM
Virtual DOM
Testing
Unit and Integration Testing
Unit Testing
App Architecture
MVC
Flux
Dependencies
It manages dependencies automatically.
It requires additional tools to manage dependencies.
Routing
It requires a template or controller to its router configuration, which has to be managed manually.
It doesn’t handle routing but has a lot of modules for routing, eg., react-router.
Performance
Slow
Fast, due to virtual DOM.
Best For
It is best for single page applications that update a single view at a time.
It is best for single page applications that update multiple views at a time.
Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following.
JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance
JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript react code. It is not necessary to use JSX, but it is recommended to use in ReactJS.
Components
ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects.
One-way Data Binding
ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. The benefits of one-way data binding give you better control throughout the application. If the data flow is in another direction, then it requires additional features. It is because components are supposed to be immutable and the data within them cannot be changed. Flux is a pattern that helps to keep your data unidirectional. This makes the application more flexible that leads to increase efficiency.
Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. This makes the application faster, and there is no wastage of memory.
Simplicity
ReactJS uses JSX file which makes the application simple and to code as well as understand. We know that ReactJS is a component-based approach which makes the code reusable as your need. This makes it simple to use and learn.
Performance
ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.
Starting a new React project is very complicated, with so many build tools. It uses many dependencies, configuration files, and other requirements such as Babel, Webpack, ESLint before writing a single line of React code. Create React App CLI tool removes all that complexities and makes React app simple. For this, you need to install the package using NPM, and then run a few simple commands to get a new React project.
The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly. It does not take any configuration manually. This tool is wrapping all of the required dependencies like Webpack, Babel for React project itself and then you need to focus on writing React code only. This tool sets up the development environment, provides an excellent developer experience, and optimizes the app for production.
Requirements
The Create React App is maintained by Facebook and can works on any platform, for example, macOS, Windows, Linux, etc. To create a React Project using create-react-app, you need to have installed the following things in your system.
Node version >= 8.10
NPM version >= 5.6
Let us check the current version of Node and NPM in the system.
Run the following command to check the Node version in the command prompt.
$ node -v
Run the following command to check the NPM version in the command prompt.
$ npm -v
Installation
Here, we are going to learn how we can install React using CRA tool. For this, we need to follow the steps as given below.
Install React
We can install React using npm package manager by using the following command. There is no need to worry about the complexity of React installation. The create-react-app npm package manager will manage everything, which needed for React project.
Once the React installation is successful, we can create a new React project using create-react-app command. Here, I choose “reactproject” name for my project.
The above command will take some time to install the React and create a new project with the name “reactproject.” Now, we can see the terminal as like below.
The above screen tells that the React project is created successfully on our system. Now, we need to start the server so that we can access the application on the browser. Type the following command in the terminal window.
$ cd Desktop
$ npm start
NPM is a package manager which starts the server and access the application at default server http://localhost:3000. Now, we will get the following screen.
Next, open the project on Code editor. Here, I am using Visual Studio Code. Our project’s default structure looks like as below image.
In React application, there are several files and folders in the root directory. Some of them are as follows:
node_modules: It contains the React library and any other third party libraries needed.
public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div id=”root”></div> element.
src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.
README.md: It provides the documentation to read about React topics.
React Environment Setup
Now, open the src >> App.js file and make changes which you want to display on the screen. After making desired changes, save the file. As soon as we save the file, Webpack recompiles the code, and the page will refresh automatically, and changes are reflected on the browser screen. Now, we can create as many components as we want, import the newly created component inside the App.js file and that file will be included in our main index.html file after compiling by Webpack.
Next, if we want to make the project for the production mode, type the following command. This command will generate the production build, which is best optimized.
In this section, we will learn how to set up an environment for the successful development of ReactJS application.
Pre-requisite for ReactJS
NodeJS and NPM
React and React DOM
Webpack
Babel
Ways to install ReactJS
There are two ways to set up an environment for successful ReactJS application. They are given below.
Using the npm command
Using the create-react-app command
1. Using the npm command
Install NodeJS and NPM
NodeJS and NPM are the platforms need to develop any ReactJS application. You can install NodeJS and NPM package manager by the link given below.https://www.javatpoint.com/install-nodejs-on-linux-ubuntu-centos
To verify NodeJS and NPM, use the command shown in the below image.
Install React and React DOM
Create a root folder with the name reactApp on the desktop or where you want. Here, we create it on the desktop. You can create the folder directly or using the command given below.
Now, you need to create a package.json file. To create any module, it is required to generate a package.json file in the project folder. To do this, you need to run the following command as shown in the below image.
javatpoint@root:~/Desktop/reactApp> npm init -y
After creating a package.json file, you need to install react and its DOM packages using the following npm command in the terminal window as shown in the below image.
Webpack is used for module packaging, development, and production pipeline automation. We will use webpack-dev-server during development, webpack to create production builds, and webpack CLI provides a set of commands. Webpack compiles these into a single file(bundle). To install webpack use the command shown in the below image.
Babel is a JavaScript compiler and transpiler used to convert one source code to others. It compiles React JSX and ES6 to ES5 JavaScript which can be run on all browsers. We need babel-loader for JSX file types, babel-preset-react makes your browser update automatically when any changes occur to your code without losing the current state of the app. ES6 support requires babel-preset-env Babel preset. To install webpack use the following command shown in the below image.
To complete the installation process, you need to add the following files in your project folder. These files are index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files by manually, or by using the command prompt.
Set Compiler, Loader, and Server for React Application
Configure webpack
You can configure webpack in the webpack.config.js file by adding the following code. It defines your app entry point, build output and the extension which will resolve automatically. It also set the development server to 8080 port. It defines the loaders for processing various file types used within your app and wrap up by adding plugins needed during our development.
Now, open the package.json file and delete “test” “echo \” Error: no test specified\” && exit 1″ inside “scripts” object, then add the start and build commands instead. It is because we will not perform any testing in this app.
We can add a custom template to generate index.html using the HtmlWeb-packPlugin plugin. This enables us to add a viewport tag to support mobile responsive scaling of our app. It also set the div id = “app” as a root element for your app and adding the index_bundle.js script, which is our bundled app file.
Now, import this component and render it to your root App element so that you can see it in the browser.
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
Note: If you want to use something, you need to import it first. To make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.
Create .babelrc file
Create a file with name .babelrc and copy the following code to it.
After completing the installation process and setting up the app, you can start the server by running the following command.
javatpoint@root:~/Desktop/reactApp>npm start
It will show the port number which we need to open in the browser. After we open it, you will see the following output.
Generate the Bundle
Now, generate the bundle for your app. Bundling is the process of following imported files and merging them into a single file: a “bundle.” This bundle can then be included on a webpage to load an entire app at once. To generate this, you need to run the build command in command prompt which can be shown below.
javatpoint@root:~/Desktop/reactApp> npm run build
This command will generate the bundle in the current folder(in which your app belongs) and will be shown as like below image.
2. Using the create-react-app command
If you do not want to install react by using webpack and babel, then you can choose create-react-app to install react. The ‘create-react-app’ is a tool maintained by Facebook itself. This is suitable for beginners without manually having to deal with transpiling tools like webpack and babel. In this section, I will be showing you how to install React using CRA tool.
Install NodeJS and NPM
NodeJS and NPM are the platforms need to develop any ReactJS application. You can install NodeJS and NPM package manager by the link given below.https://www.javatpoint.com/install-nodejs-on-linux-ubuntu-centos
Install React
You can install React using npm package manager by using the below command. There is no need to worry about the complexity of React installation. The create-react-app npm package will take care of it.
The above command will install the react and create a new project with the name jtp-reactapp. This app contains the following sub-folders and files by default which can be shown in the below image.
Now, to get started, open the src folder and make changes in your desired file. By default, the src folder contain the following files shown in below image.
For example, I will open App.js and make changes in its code which are shown below.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Welcome To JavaTpoint.
<p>To get started, edit src/App.js and save to reload.</p>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
NOTE: You can also choose your own favorite code editor for editing your project. But in my case, I choose Eclipse. Using the below link, you can download Eclipse for Ubuntu and install.
Running the Server
After completing the installation process, you can start the server by running the following command.
A complete release history for React is given below. You can also see the full documentation for recent releases on GitHub.
SN
Version
Release Date
Significant Changes
1.
0.3.0
29/05/2013
Initial Public Release
2.
0.4.0
20/07/2013
Support for comment nodes <div>{/* */}</div>, Improved server-side rendering APIs, Removed React.autoBind, Support for the key prop, Improvements to forms, Fixed bugs.
3.
0.5.0
20/10/2013
Improve Memory usage, Support for Selection and Composition events, Support for getInitialState and getDefaultProps in mixins, Added React.version and React.isValidClass, Improved compatibility for Windows.
4.
0.8.0
20/12/2013
Added support for rows & cols, defer & async, loop for <audio> & <video>, autoCorrect attributes. Added onContextMenu events, Upgraded jstransform and esprima-fb tools, Upgraded browserify.
5.
0.9.0
20/02/2014
Added support for crossOrigin, download and hrefLang, mediaGroup and muted, sandbox, seamless, and srcDoc, scope attributes, Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes, Added support for onMouseOver and onMouseOut event, Added support for onLoad and onError on <img> elements.
6.
0.10.0
21-03-2014
Added support for srcSet and textAnchor attributes, add update function for immutable data, Ensure all void elements don’t insert a closing tag.
7.
0.11.0
17/07/2014
Improved SVG support, Normalized e.view event, Update $apply command, Added support for namespaces, Added new transformWithDetails API, includes pre-built packages under dist/, MyComponent() now returns a descriptor, not an instance.
8.
0.12.0
21/11/2014
Added new features Spread operator ({…}) introduced to deprecate this.transferPropsTo, Added support for acceptCharset, classID, manifest HTML attributes, React.addons.batchedUpdates added to API, @jsx React.DOM no longer required, Fixed issues with CSS Transitions.
9.
0.13.0
10/03/2015
Deprecated patterns that warned in 0.12 no longer work, ref resolution order has changed, Removed properties this._pendingState and this._rootNodeID, Support ES6 classes, Added API React.findDOMNode(component), Support for iterators and immutable-js sequences, Added new features React.addons.createFragment, deprecated React.addons.classSet.
10.
0.14.1
29/10/2015
Added support for srcLang, default, kind attributes, and color attribute, Ensured legacy .props access on DOM nodes, Fixed scryRenderedDOMComponentsWithClass, Added react-dom.js.
11.
15.0.0
07/04/2016
Initial render now uses document.createElement instead of generating HTML, No more extra <span>s, Improved SVG support, ReactPerf.getLastMeasurements() is opaque, New deprecations introduced with a warning, Fixed multiple small memory leaks, React DOM now supports the cite and profile HTML attributes and cssFloat, gridRow and gridColumn CSS properties.
12.
15.1.0
20/05/2016
Fix a batching bug, Ensure use of the latest object-assign, Fix regression, Remove use of merge utility, Renamed some modules.
13.
15.2.0
01/07/2016
Include component stack information, Stop validating props at mount time, Add React.PropTypes.symbol, Add onLoad handling to <link> and onError handling to <source> element, Add isRunning() API, Fix performance regression.
14.
15.3.0
30/07/2016
Add React.PureComponent, Fix issue with nested server rendering, Add xmlns, xmlnsXlink to support SVG attributes and referrerPolicy to HTML attributes, updates React Perf Add-on, Fixed issue with ref.
15.
15.3.1
19/08/2016
Improve performance of development builds, Cleanup internal hooks, Upgrade fbjs, Improve startup time of React, Fix memory leak in server rendering, fix React Test Renderer, Change trackedTouchCount invariant into a console.error.
16.
15.4.0
16/11/2016
React package and browser build no longer includes React DOM, Improved development performance, Fixed occasional test failures, update batchedUpdates API, React Perf, and ReactTestRenderer.create().
17.
15.4.1
23/11/2016
Restructure variable assignment, Fixed event handling, Fixed compatibility of browser build with AMD environments.
Added react-dom/test-utils, Removed peerDependencies, Fixed issue with Closure Compiler, Added a deprecation warning for React.createClass and React.PropTypes, Fixed Chrome bug.
20.
15.5.4
11/04/2017
Fix compatibility with Enzyme by exposing batchedUpdates on shallow renderer, Update version of prop-types, Fix react-addons-create-fragment package to include loose-envify transform.
21.
15.6.0
13/06/2017
Add support for CSS variables in style attribute and Grid style properties, Fix AMD support for addons depending on react, Remove unnecessary dependency, Add a deprecation warning for React.createClass and React.DOM factory helpers.
22.
16.0.0
26/09/2017
Improvd error handling with introduction of “error boundaries”, React DOM allows passing non-standard attributes, Minor changes to setState behavior, remove react-with-addons.js build, Add React.createClass as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, changes to the behavior of scheduling and lifecycle methods.
23.
16.1.0
9/11/2017
Discontinuing Bower Releases, Fix an accidental extra global variable in the UMD builds, Fix onMouseEnter and onMouseLeave firing, Fix <textarea> placeholder, Remove unused code, Add a missing package.json dependency, Add support for React DevTools.
24.
16.3.0
29/03/2018
Add a new officially supported context API, Add new packagePrevent an infinite loop when attempting to render portals with SSR, Fix an issue with this.state, Fix an IE/Edge issue.
25.
16.3.1
03/04/2018
Prefix private API, Fix performance regression and error handling bugs in development mode, Add peer dependency, Fix a false positive warning in IE11 when using Fragment.
26.
16.3.2
16/04/2018
Fix an IE crash, Fix labels in User Timing measurements, Add a UMD build, Improve performance of unstable_observedBits API with nesting.
27.
16.4.0
24/05/2018
Add support for Pointer Events specification, Add the ability to specify propTypes, Fix reading context, Fix the getDerivedStateFromProps() support, Fix a testInstance.parent crash, Add React.unstable_Profiler component for measuring performance, Change internal event names.
28.
16.5.0
05/09/2018
Add support for React DevTools Profiler, Handle errors in more edge cases gracefully, Add react-dom/profiling, Add onAuxClick event for browsers, Add movementX and movementY fields to mouse events, Add tangentialPressure and twist fields to pointer event.
29.
16.6.0
23/10/2018
Add support for contextType, Support priority levels, continuations, and wrapped callbacks, Improve the fallback mechanism, Fix gray overlay on iOS Safari, Add React.lazy() for code splitting components.
30.
16.7.0
20/12/2018
Fix performance of React.lazy for lazily-loaded components, Clear fields on unmount to avoid memory leaks, Fix bug with SSR, Fix a performance regression.
31.
16.8.0
06/02/2019
Add Hooks, Add ReactTestRenderer.act() and ReactTestUtils.act() for batching updates, Support synchronous thenables passed to React.lazy(), Improve useReducer Hook lazy initialization API.
32.
16.8.6
27/03/2019
Fix an incorrect bailout in useReducer(), Fix iframe warnings in Safari DevTools, Warn if contextType is set to Context.Consumer instead of Context, Warn if contextType is set to invalid values.
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013.
Today, most of the websites are built using MVC (model view controller) architecture. In MVC architecture, React is the ‘V’ which stands for view, whereas the architecture is provided by the Redux or Flux.
A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code. The components are the heart of all React applications. These Components can be nested with other components to allow complex applications to be built of simple building blocks. ReactJS uses virtual DOM based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time.
To create React app, we write React components that correspond to various elements. We organize these components inside higher level components which define the application structure. For example, we take a form that consists of many elements like input fields, labels, or buttons. We can write each element of the form as React components, and then we combine it into a higher-level component, i.e., the form component itself. The form components would specify the structure of the form along with elements inside of it.
Why learn ReactJS?
Today, many JavaScript frameworks are available in the market(like angular, node), but still, React came into the market and gained popularity amongst them. The previous frameworks follow the traditional data flow structure, which uses the DOM (Document Object Model). DOM is an object which is created by the browser each time a web page is loaded. It dynamically adds or removes the data at the back end and when any modifications were done, then each time a new DOM is created for the same page. This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.
Therefore, a new technology ReactJS framework invented which remove this drawback. ReactJS allows you to divide your entire application into various components. ReactJS still used the same traditional data flow, but it is not directly operating on the browser’s Document Object Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather than manipulating the document in a browser after changes to our data, it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React determines what changes made to the actual browser’s DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser’s DOM. Due to this, when we write a React component, we did not write directly to the DOM; instead, we are writing virtual components that react will turn into the DOM.
