React -js

React-js:

• React is a JavaScript library created by Facebook
• React is a User Interface (UI) library
• React is a tool for building UI components

BULB ON AND OFF USING REACT:

import { useState } from "react";

function Counter() {
const [bulb, setBulb] = useState(
"https://www.w3schools.com/js/pic_bulboff.gif"
);

function ON() {
console.log("ON");
setBulb("https://www.w3schools.com/js/pic_bulbon.gif");
}

function OFF() {
console.log("OFF");
setBulb("https://www.w3schools.com/js/pic_bulboff.gif");
}

return (
<div>
<img src={bulb} alt="Bulb" />

<button onClick={ON}>ON</button>
<button onClick={OFF}>OFF</button>
</div>
);
}

export default Counter;

What is JSX?

• JSX stands for JavaScript XML.

• JSX is an XML/HTML like extension to JavaScript.
  JSX Expressions

• Expressions can be used in JSX by wrapping them in curly {} braces.

Example

<div id="id01">Hello World!</div>

<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    <h1>Hello {name}!</h1>,
    document.getElementById('id01'));
</script>

React Elements

• React applications are usually built around a single HTML element.

• React developers often call this the root node (root element)

• React elements are immutable. They cannot be changed.

• The only way to change a React element is to render a new element every time