Scribd
Upload
17 views

React JS

React JS is an open-source JavaScript library for building user interfaces using reusable components. Components are independent and reusable bits of code that return HTML via a render function. There are two types of components - class components that extend React.Component and functional components that are JavaScript functions. React also uses virtual DOM for performance and features like events, routing, hooks, and conditional rendering.

Uploaded by

aashv143
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

React JS

React JS is an open-source JavaScript library for building user interfaces using reusable components. Components are independent and reusable bits of code that return HTML via a render function. There are two types of components - class components that extend React.Component and functional components that are JavaScript functions. React also uses virtual DOM for performance and features like events, routing, hooks, and conditional rendering.

Uploaded by

aashv143
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

REACT JS

Where Innovation Meets User Experience


What is React.js and Why do we use it

React.js is an open-source JavaScript library for


building user interfaces.
Component-based architecture.
Reusable UI components.
Virtual DOM for performance.
Strong community support.
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 via a
render() function.
Components come in two types, Class components and
Function components.
Class Component :
It's a class that extends the React.Component class and includes a render method.
Class components were the traditional way of creating components in React before
the introduction of functional components with hooks.
eg:
import React, { Component } from 'react';

class MyComponent extends Component {


render() {
return (
<div>
<h1>Hello, Class Component!</h1>
</div>
);
}
}

export default MyComponent;


Functional Component :
Functional components are defined as JavaScript functions and have become the
preferred way to create components in React, especially with the introduction of
React Hooks.

eg:
import React from 'react';

function MyComponent() {
return (
<div>
<h1>Hello, Functional Component!</h1>
</div>
);
}

export default MyComponent;


Events :
In React, event handling involves attaching event handlers to JSX elements using
attributes like onClick to respond to user interactions. Event handlers are regular
JavaScript functions that can be used to update component state, prevent default
behaviors, and access event properties, all within a consistent and cross-browser-
compatible system provided by React's synthetic event system.

eg:

<button onClick={shoot}>Take the Shot!</button>


React Router
React Router is a popular library for handling
routing in React applications. It allows you to
create single-page applications with multiple
views or pages while maintaining a fluid and
responsive user experience. React Router is
typically used for building web applications
with client-side navigation, where the URL
changes, but the page doesn't need to fully
refresh.
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
return (
<Router>
<div>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
.......
</div>
</Router>
);
}
React Hooks :
Hooks allow function components to have access to state and other React
features. Because of this, class components are generally no longer needed.

useState
useEffect
useContext
useReducer
useRef
useMemo and useCallback
useLayoutEffect
Custom Hooks
React Conditional Rendering
If Statements and Ternary Operators
Logical && Operator
Conditional Rendering with Function Components
Conditional Rendering with Class Components
Rendering Lists Conditionally
Conditional Rendering with Ternary Operator
Switch Statements for Conditional Rendering
Rendering Components based on State
Thank You!

You might also like