ReactJS Tutorial Part One (Introduction)

What is ReactJS?

ReactJS is now one of the most popular JavaScript front-end libraries, with a huge community and a solid basis.

ReactJS is a JavaScript library for creating reusable UI components that are declarative, efficient, and versatile. It is a component-based open-source front-end library that exclusively handles the application's view layer. Facebook created and managed it at first, and it was eventually integrated into its products such as WhatsApp and Instagram.

All of the topics that help you understand ReactJS are covered in our ReactJS blog series. ReactJS Introduction, ReactJS Features, ReactJS Installation, ReactJS Pros and Cons, ReactJS JSX, ReactJS Components, ReactJS State, ReactJS Props, ReactJS Forms, ReactJS Events, ReactJS Animation, and many others are among them.

Benefits of Using ReactJS

Speed
Developers may use separate components of their application on both the client-side and the server-side with React, which speeds up the development process. Simply put, various developers can create separate areas of the program, and any modifications made will not affect the application's logic.

Flexibility
React code is easier to maintain and more flexible than other frontend frameworks because of its modular nature. Businesses save a significant amount of time and money as a result of this flexibility.

Performance
React JS was designed with excellent performance in mind. The framework's key features include a virtual DOM program and server-side rendering, allowing complicated projects to execute exceptionally quickly.

Usability
If you have a basic knowledge of JavaScript, deploying React is quite simple. In just a day or two, an experienced JavaScript developer can learn everything there is to know about the React framework.
Reusable Components
One of the key advantages of React JS is the ability to reuse components. Developers save time since they don't have to build many codes for the same functionalities. Furthermore, any modifications made to one section of the program will not affect other portions.

Mobile Application Development
If you think React is exclusively for web development, you're completely incorrect! Facebook has already updated its framework for creating native mobile apps for both Android and iOS.

Easy to Learn
Help to Build Rich User Interfaces
Allow Writing Custom Components
Uplift Developers' Productivity

Offer Fast Rendering
SEO-Friendly
Come with a Useful Developer Toolset
Strong Community Support

Offer Better Code Stability
Used by Many Fortunes 500 Companies

Proficient Data Binding
Extend Your Tools and Capacities
Testing and Functionality
UI-focused Design
Provide a Unique Abstraction Layer
Template Designing Made Easy

Disadvantages of Using ReactJS

The High Pace of Development
The high pace of development has both benefits and drawbacks. In the event of a disadvantage, because the environment is always changing, some developers may not feel comfortable relearning new ways of doing things frequently. With all the constant upgrades, it may be difficult for them to absorb all of these changes. They must keep their abilities up to date and learn new methods of doing things.

Poor Documentation
Another disadvantage of continuously changing technology is this. React technologies are evolving and developing at such a rapid pace that there is no time to make proper documentation. To get around this, developers write their instructions as new versions and tools appear in their existing projects.

View Part
React comes with a variety of tools for developing and designing user interfaces. ReactJS, unlike frameworks, is not an all-in-one app development solution. If you adopt a model-view-controller (MVC) architecture, ReactJS development is just responsible for the user interface. Other tools must be used by the developers to generate the model and controller. To construct a working application, you will need to use additional tools to handle other important aspects like the backend and data storage. Additional tools will be required for app programming interfaces (APIs), routing, and other elements.

JSX as a Barrier
ReactJS uses JavaScript XML (JSX), which is an XML or HTML-like JavaScript syntax extension. It enhances ES6 by being processed into React Framework JavaScript calls. This allows HTML-like text and JavaScript react code to coexist. However, because of the learning curve's intricacy, it also operates as a barrier.

Incomplete Tooling Set
Businesses should be aware that React's scope is limited to the application's UI layer. Everything else linked to the web development project is outside of its scope. As a result, even after applying React web app development, developers must still select a framework to create a fast, attractive and suitable user interface. The developers will have difficulty finishing the project because the whole tools set is not available solely with React.

Limitations of React Being a Library
Creating a Long List Item
Difficult Learning Curve
Excessive Freedom and Verbose Code
Staying Up to Date can be Built
Highly Expensive

Features of ReactJS

JSX (JavaScript Syntax Extension)
HTML and JavaScript are combined in JSX. JavaScript objects can be inserted into HTML elements. Because browsers do not support JSX, the code is trans compiled into JavaScript using the Babel compiler. JSX makes coding simple and straightforward. Knowing HTML and JavaScript makes it simple to learn.

Virtual DOM
Document Object Model stands for Document Object Model. It is the most crucial aspect of the web since it splits the code into modules and executes it. JavaScript Frameworks often update the whole DOM at once, making the online application sluggish. However, react makes use of virtual DOM, which is a carbon replica of actual DOM. When a web application is modified, the virtual DOM is updated first, and the difference between the real DOM and the virtual DOM is determined. When it discovers the difference, DOM just updates the parts that have changed recently, leaving the rest unchanged.

One-way Data Binding
One-way data binding is a one-direction flow, as the name implies. In react, data only travels in one direction: from top to bottom, from parent components to child components. The child component's properties (props) cannot return data to its parent component, but they can communicate with it to change the states based on the inputs. One-way Data Binding operates in this manner. Everything remains modular and quick as a result.

Performance
As previously mentioned, react makes use of a virtual DOM and only updates the portions that have changed. As a result, the DOM runs quicker. Because the DOM runs in memory, we can design independent components that speed up the DOM.
Extension
We can leverage React's extensions to build full-featured UI apps. It allows for the creation of mobile apps and server-side rendering. Flux, Redux, React Native, and other extensions to React allow us to design attractive user interfaces.
Conditional Statements
Component Based Architecture
Simplicity

Declarative UI

React Native

Installation

Prerequisites

NodeJS and NPM
React and React DOM
Webpack
Babel

How to Install ReactJS on Windows Using the npm Command

Step 1: Install NodeJS and NPM

You can read previous NodeJS blog and can get knowledge how to install NodeJS and NPM.

Step 2: Create the Root Folder

Create a folder with name reactApp on the desktop to install all the required files, using the mkdir command.

C:\Users\HansakaDilshan\Desktop>mkdir reactApp

C:\Users\HansakaDilshan\Desktop>cd reactApp

To create any module, it is required to generate the package.json file. Therefore, after Creating the folder, we need to create a package.json file. To do so you need to run the npm init command from the command prompt.

C:\Users\HansakaDilshan\Desktop\reactApp>npm init

This command asks information about the module such as packagename, description, author etc. you can skip these using the –y option.

C:\Users\HansakaDilshan\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Step 3: Install React and React DOM

Since our main task is to install ReactJS, install it, and its dom packages, using install react and react-dom commands of npm respectively. You can add the packages we install, to package.json file using the --save option.

C:\Users\HansakaDilshan\Desktop\reactApp>npm install react --save

C:\Users\HansakaDilshan\Desktop\reactApp>npm install react-dom --save

Or you can install all of them in single command as –

C:\Users\HansakaDilshan\Desktop\reactApp>npm install react react-dom --save

Step 4: Install Webpack

Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.

C:\Users\HansakaDilshan\Desktop\reactApp>npm install webpack --save

C:\Users\HansakaDilshan\Desktop\reactApp>npm install webpack-dev-server --save

C:\Users\HansakaDilshan\Desktop\reactApp>npm install webpack-cli --save

Or you can install all of them in single command as –

C:\Users\HansakaDilshan\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Step 5: Install Babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin.

C:\Users\HansakaDilshan\Desktop\reactApp>npm install babel-core --save-dev

C:\Users\HansakaDilshan\Desktop\reactApp>npm install babel-loader --save-dev

C:\Users\HansakaDilshan\Desktop\reactApp>npm install babel-preset-env --save-dev

C:\Users\HansakaDilshan\Desktop\reactApp>npm install babel-preset-react --save-dev

C:\Users\HansakaDilshan\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Or you can install all of them in single command as –

C:\Users\HansakaDilshan\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev

Step 6: Create the Files

To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using command prompt.

C:\Users\HansakaDilshan\Desktop\reactApp>type nul > index.html

C:\Users\HansakaDilshan\Desktop\reactApp>type nul > App.js

C:\Users\HansakaDilshan\Desktop\reactApp>type nul > main.js

C:\Users\HansakaDilshan\Desktop\reactApp>type nul > webpack.config.js

C:\Users\HansakaDilshan\Desktop\reactApp>type nul > .babelrc

Step 7: Set Compiler, Server and Loaders

Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8001 port. You can choose any port you want.

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './main.js',

output: {

path: path.join(__dirname, '/bundle'),

filename: 'index_bundle.js'

devServer: {

inline: true,

port: 8001

module: {

rules: [

{

test: /\.jsx?$/,

exclude: /node_modules/,

loader: 'babel-loader',

query: {

presets: ['es2015', 'react']

}

]

plugins:[

new HtmlWebpackPlugin({

template: './index.html'

})

]

}

Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object. We are deleting this line since we will not do any testing in this tutorial. Let's add the start and build commands instead.

"start": "webpack-dev-server --mode development --open --hot",

"build": "webpack --mode production"

Step 8: index.html

This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index_bundle.js script, which is our bundled app file.

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

</body>

</html>

Step 9: App.jsx and main.js

This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World.

App.js

import React, { Component } from 'react';

class App extends Component{

render(){

return(

<div>

<h1>Hello World</h1>

</div>

);

}

export default App;

We need to import this component and render it to our root App element, so we 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 − Whenever you want to use something, you need to import it first. If you want 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 a file with name .babelrc and copy the following content to it.

{
"presets":["env", "react"]
}

Step 10: Run the Server

The setup is complete, and we can start the server by running the following command.It will show the port we need to open in the browser. In our case, it is http://localhost:8001/.

Step 11: Generate the Bundle

Finally, to generate the bundle you need to run the build command in the command prompt as −

C:\Users\HansakaDilshan\Desktop\reactApp>npm run build

How to Install ReactJS on Windows Using the create-react-app Command

Step 1: Install NodeJS and NPM

You can read previous NodeJS blog and can get knowledge how to install NodeJS and NPM.

Step 2: Install create-react-app

Browse through the desktop and install the Create React App using command prompt as shown below −

C:\Users\HansakaDilshan>cd C:\Users\Tutorialspoint\Desktop\

C:\Users\HansakaDilshan\Desktop>npx create-react-app my-app

Step 3: Delete All the Source Files

Browse through the src folder in the generated my-app folder and remove all the files in it as shown below −

C:\Users\HansakaDilshan\Desktop>cd my-app/src

C:\Users\HansakaDilshan\Desktop\my-app\src>del *

C:\Users\HansakaDilshan\Desktop\my-app\src\*, Are you sure (Y/N)? y

Step 4: Add Files

Add files with names index.css and index.js in the src folder as −

C:\Users\HansakaDilshan\Desktop\my-app\src>type nul > index.css
C:\Users\HansakaDilshan\Desktop\my-app\src>type nul > index.js

In the index.js file add the following code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Step 5: Run the Project

Finally, run the project using the start command.

npm start

That concludes part one of this ReactJS tutorial. We've looked at ReactJS briefly in this blog. If you want to learn more about ReactJS, visit its website, find it on Github or check out this repository of facebook.

In the next part of this tutorial, we'll learn more about React and how to build a CRUD application. Leave a comment below if you have any questions or comments.

Tech with HDJ

Search This Blog