React JS
Uploaded by
YokeshReact JS
Uploaded by
YokeshUNIT - 4
REACT JS
Definition of React-JS:
React is a front-end, open-source JavaScript library that is used to create interactive UI. It is developed and
maintained by Facebook. It can be used for the development of single-page and mobile applications.
Initial Setup:
Node package Execute(npx)
The npx is a CLI tool used to install and manage dependencies in the npm registry. NPX comes pre-bundled with npm
5.2+, else we can install it using the following command:
npm i -g npx
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app counter
Step 2: After creating your project folder i.e. counter, move to it using the following command:
cd counter
Project Structure: It will look like the following.
HOOKS – On the go some changes happening in the sense, when we use normal variables we don’t able to render it.
Virtual DOM
For easy faster rendering, react will use ReactDOM
Filename : App.js
import React from "react";
// Importing app.css is css file to add styling
import "./App.css";
//Creating the component App()
function App()
{
// Counter is a state initialized to 0
const [counter, setCounter] = React.useState(0)
// Function is called everytime increment button is clicked
function handleClick1()
{
// Counter state is incremented
setCounter(counter + 1)
}
// Function is called everytime decrement button is clicked
function handleClick2()
{
// Counter state is decremented
setCounter(counter - 1)
}
return (
<div className="contain">
<h1>Counter App</h1>
<div>
<h1>{counter}</h1>
</div>
<div>
<button className="button1" onClick={handleClick1}>Increment</button>
<button className="button2" onClick={handleClick2}>Decrement</button>
</div>
</div>
)
}
export default App
App.css
.button1
{
background-color: blue;
margin-left: 30%;
margin-right: 15%;
margin-top:4%;
margin-bottom: 3%;
}
h1{
text-align:center;
margin-top:6%;
}
.contain
{
background-color:aqua;
margin:0 28%;
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App /> ,document.getElementById("root"))
What is ReactDOM?
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to
enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an
API containing the following methods and a few more:
render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()
What is JSX?
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions,
but work in isolation and return HTML.
Components come in two types, Class components and Function components, in this tutorial we will concentrate on
Function components.
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Rendering a Component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
React Props:
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
React Props are like function arguments in JavaScript and attributes in HTML.
Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the component as attributes
