Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology

Ayes Chinmay
Internet
&
Web Technology
(React.js)

IWT Syllabus:
Module 3:
XML
Introduction to XML, XML vs HTML, Structures of a XML Document, Document Type Declaration (DTD),
XML Validation, Well Formed XML Documents, Valid XML Document, XML DOM, XSL, XSL ransformation,
XML Namespaces, XML Schema.
AJAX
AJAX Introduction, AJAX - The XMLHttpRequest Object, AJAX - Server Response, Ajax XML,
Ajax Database
jQuery
jQuery DOM Selectors, HTML Content, jQuery CSS Styles, jQuery HTML DOM
JSON
Introduction, syntax, Data Types, Parsing, Stringify, Object, Arrays
React.js
Introduction, ES6, Render HTML, JSX, Components , props, state, Lifecycle, Events, forms,
CSS

React.js:
 React is a JavaScript library created by Facebook.
 React is a JavaScript library for building user interfaces.
 React is used to build single page applications and used to create
reusable UI components.
 Released on 29th May, 2013. (7 years ago)
Jordan Walke

Install React.js:
 Install NPM (Node Package Manager)
 Install Sublime.
 Install React from Terminal:
a) npm install –g create-react-app
b) create-react-app --version
c) create-react-app <Project_Name>

React Directly in HTML:
<!DOCTYPE html>
<html>
<script
src="https://unpkg.com/react@16/umd/react.pr
oduction.min.js"></script>
<script src="https://unpkg.com/react-
dom@16/umd/react-
dom.production.min.js"></script>
<script src="https://unpkg.com/babel-
standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
ReactDOM.render(<Hello />,
document.getElementById('mydiv'))
</script>
</body>
</html>
Index.html

React Render HTML:
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>Ayes</td>
</tr>
<tr>
<td>Chinmay</td>
</tr>
</table>
);
ReactDOM.render(myelement,
document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-
scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
 The ReactDOM.render() function
takes two arguments, HTML code
and an HTML element.
 The purpose of the function is to
display the specified HTML code
inside the specified HTML
element.
Index.js
Index.html

React JSX:
const myelement = <h1>TEST!</h1>;
ReactDOM.render(myelement,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-
scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
 JSX stands for JavaScript XML.
 JSX allows us to write HTML in
React.
 JSX makes it easier to write
and add HTML in React.
Index.js
Index.html

Styling React Using CSS:
class MyHeader extends
React.Component {
render() {
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello
Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
ReactDOM.render(<MyHeader />,
Index.js

React Forms:
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { username: '' };
}
myChangeHandler = (event) => {
this.setState({username:
event.target.value});
}
render() {
return (
<form>
<h1>Hello {this.state.username}</h1>
<p>Enter your name:</p>
<input
type='text'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<MyForm />,
Index.js

React Lifecycle:
 Each component in React has a
lifecycle which you can monitor
and manipulate during its three
main phases.
 The three phases are: Mounting,
Updating, and Unmounting.
 componentWillMount is executed before rendering, on both the server and the client
side.
 componentDidMount is executed after the first render only on the client side. This is
where AJAX requests and DOM or state updates should occur. This method is also used
for integration with other JavaScript frameworks and any functions with delayed
execution such as setTimeout or setInterval. We are using it to update the state so we
can trigger the other lifecycle methods.
 componentWillReceiveProps is invoked as soon as the props are updated before
another render is called. We triggered it from setNewNumber when we updated the
state.
 shouldComponentUpdate should return true or false value. This will determine if the
component will be updated or not. This is set to true by default. If you are sure that the
component doesn't need to render after state or props are updated, you can return
false value.
 componentWillUpdate is called just before rendering.
 componentDidUpdate is called just after rendering.
 componentWillUnmount is called after the component is unmounted from the dom.
We are unmounting our component in main.js.

Assignment:
CHECK THE RECORDED VIDEO

Model Questions:
1. The firewall is used for
(a) Sensing the size of the packet.
(b) Isolating intranet from extranet.
(c) Screening packets to/from the network and
filtering of network traffic.
(d) Isolating Internet from virtual LAN.
2. npm stands for ?
(a) Node Package Manager (b) Node Packet Manager
(c) Note Package Manager (d) Net Package Manager

Model Questions: (Cont.)
3. Which of the following inserts a comment in a CSS file?
(a) // this is a comment
(b) /* this is a comment */
(c) * this is a comment*
(d) “this is a comment”
4. How can we change the background colour?
(a) bgcolor:"newcolor"
(b) color=background (colorname)
(c) background-color:
(d) BGCOL="colorname"

Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology

Similar to Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology (20)

More from Ayes Chinmay

More from Ayes Chinmay (8)

Recently uploaded

Recently uploaded (20)

Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology