Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
34 views

What Is ReactJS

Uploaded by

vinothchintam12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

What Is ReactJS

Uploaded by

vinothchintam12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

What is ReactJS?

➢ ReactJS is an open-source front-end JavaScript library for building user interfaces.


➢ ReactJS is maintained by Facebook and a community of individual developers and companies.
➢ It is widely used as a base in building single-page websites and mobile applications.
➢ It is very easy to use, and it allows users to create reusable UI components.

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

Disadvantages of ReactJS

➢ Most of the code is written in JSX, i.e., Html and css are part of javascript, it can be quite confusing as most other frameworks
prefer keeping Html separate from the javascript code.
➢ The file size of ReactJS is large.

Applications

Few popular websites powered by React library are listed below −

Facebook, popular social media application

Instagram, popular photo sharing application

Netflix, popular media streaming application

Code Academy, popular online training application

Reddit, popular content sharing application

Using ReactJS from CDN

To start working with react, we need to first install reactjs. You can easily get started to use reactjs by using the CDN javascript files, as
shown below.

Go to the official site of reactjs to get the CDN links, i.e., https://reactjs.org/docs/cdn-links.html

For development link following link ur file.

<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>

For Production link following link ur file.

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>


Here is the working ReactJS example using cdn files and 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 Elysium Academy</h1>,

document.getElementById('app')

);

</script>

</body>

</html>

Using NPM Packages

Make sure you have nodejs installed. If not installed install node.js in our system.

Once you have nodejs installed, create a folder reactproj/.

D:\>md reactproj

D:\>cd reactproj

D:\reactproj>

Now we will install the packages that we need.

Here are the list of packages for reactjs:

D:\reactproj>npm install react --save-dev

D:\reactproj>npm install react-dom --save-dev

D:\reactproj>npm install react-scripts --save-dev

Open the command prompt and run above commands inside the folder reactproj/.

After run this above installation it will generate Packages.json libraries.

Create a folder src/ where all the js code will come in that folder. All the code for reactjs project will be available in the src/ folder. Create
a file index.js and add import react and react-dom, as shown below.
index.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<h1>Hello, from Elysium Academy</h1>,

document.getElementById('root')

);

Create a folder public/ and add index.html in that as shown below

Index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>ReactJS Demo</title>

</head>

<body>

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

</body>

</html>

You need to add the command in package.json that will take care of using react-scripts to compile the code and start server as shown
below:

"scripts": {

"start": "react-scripts start"

Like this:-

"dependencies": {

"react": "^18.2.0"

},

"scripts": {

"start": "react-scripts start"

---------------------------------→
To start testing reactjs run the command

D:reactproj>npm run start

> reactproj@1.0.0 start d:\reactproj

> react-scripts start

Sometime ask confirmation to start server by port 3000 Enter your choice ‘y’

Now open your bowser with following url ‘ http://localhost:3000’

Add all your js and .jsx file in src/ folder .The file structure will be as follows:

reactproj/

src/

index.js

node_modules/

public/

index.html

package.json

How to Create Your First React Project Setup?

Step 1) Import the react packages.

1. To start with ReactJS, we need to first import the react packages as follows.

import React from 'react';

import ReactDOM from 'react-dom';

2. Save the file as index.js in src/ folder

Step 2) Write Simple Code.

We will write a simple code in this tutorial React JS, wherein we will display the message “Hello, Elysium Academy!”

ReactDOM.render(

<h1>Hello, from Elysium Academy!</h1>,

document.getElementById('root')

);

ReactDOM.render will add the <h1> tag to the element with id root. Here is the html file we are having:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>ReactJS Demo</title>
</head>

<body>

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

</body>

</html>

Step 3) Compile the Code.

Next in this React.js Tutorial, we need to compile the code to get the output in the browser.

Here is the folder structure:

reactproj/

node_modules/

src/

index.js

package.json

public/

index.html

We have added the commands to compile the final file in package.json as follows:

"scripts": {

"start": "react-scripts start"

},

To compile the final file run following command:

npm run start

When you run above command, it will compile the files and notify you if any error, if all looks good, it will open the browser and the run
the index.html file at http://localhost:3000/index.html

Command: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj

> react-scripts start

Step 4) Check Output.

The URL http://localhost:3000 will open in the browser once the code is compiled as shown below:
ReactJS – Installation

React provides CLI tools for the developer to fast forward the creation, development and deployment of the React based web application.
React CLI tools depends on the Node.js and must be installed in your system.

Hopefully, you have installed Node.js on your machine. We can check it using the below command –

>node –version

If Nodejs is not installed, you can download and install by visiting https://nodejs.org/en/download/.

Toolchain

To develop lightweight features such as form validation, model dialog, etc., React library can be directly included into the web application
through content delivery network (CDN). It is similar to using jQuery library in a web application.

For moderate to big application, it is advised to write the application as multiple files and then use bundler such as webpack, parcel, rollup,
etc., to compile and bundle the application before deploying the code.

React toolchain helps to create, build, run and deploy the React application. React toolchain basically provides a starter project template
with all necessary code to bootstrap the application.

Some of the popular toolchain to develop React applications are −

Create React App − SPA oriented toolchain

Next.js − server-side rendering oriented toolchain

Gatsby − Static content oriented toolchain

Tools required to develop a React application are −

• The serve, a static server to serve our application during development


• Babel compiler
• Create React App CLI

The serve static server

The serve is a lightweight web server. It serves static site and single page application. It loads fast and consume minimum memory. It can
be used to serve a React application.

Let us install the tool using npm package manager in our system

>npm install serve -g

After successfully install to run serve web server your work place like this.
Next, open the browser and enter http://localhost:3000 in the address bar and press enter. serve application will serve our webpage as
shown below.

Hello

The serve will serve the application using default port, 5000. If it is not available, it will pick up a random port and specify it.

Babel compiler

Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all
browsers. React uses JSX, an extension of JavaScript to design the user interface code. Babel is used to compile the JSX code into JavaScript
code.

To install Babel and it’s React companion, run the below command −

npm install babel-cli@6 babel-preset-react-app@3 -g

...

...

+ babel-cli@6.26.0

+ babel-preset-react-app@3.1.2

updated 2 packages in 8.685s

Babel helps us to write our application in next generation of advanced JavaScript syntax.

You might also like