Scribd
Upload
2 views3 pages

ReactJS_Guide (1)

React is an open-source JavaScript library for building user interfaces using reusable components, maintained by Facebook. It allows for functional and class components, data passing through props, local state management with useState, and event handling with synthetic events. The document provides examples for each concept to illustrate their usage in React applications.

Uploaded by

kilaruharika2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
2 views3 pages

ReactJS_Guide (1)

React is an open-source JavaScript library for building user interfaces using reusable components, maintained by Facebook. It allows for functional and class components, data passing through props, local state management with useState, and event handling with synthetic events. The document provides examples for each concept to illustrate their usage in React applications.

Uploaded by

kilaruharika2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 3

ReactJS Guide

1. What is React?
React is an open-source JavaScript library for building user interfaces, primarily through reusable
components. Its maintained by Facebook and is widely used for creating dynamic, single-page
applications.

Example:
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {


return <h1>Hello, React!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

2. Components in React
Components are the building blocks of a React application. They can be functional (stateless) or
class-based (stateful, though less common now with hooks).

Functional Components: Modern, simpler, use hooks for state and side effects.
Class Components: Older approach, use lifecycle methods.

Example (Functional Component):


import React from 'react';

const Greeting = () => {


return <p>Hello World!</p>;
};

export default Greeting;

3. Props (Passing Data Between Components)


Props allow data to flow from a parent component to a child component, making components
reusable and dynamic.

Example:
import React from 'react';

const Fruit = (props) => {


return <p>{props.name} are sweet!</p>;
};

const App = () => {


return <Fruit name='Mangoes' />;
};

export default App;

// Output: 'Mangoes are sweet!'

4. State Management with useState


The useState hook manages local state in functional components, allowing dynamic updates to the
UI.

Example:
import React, { useState } from 'react';

const Counter = () => {


const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};

export default Counter;

5. Event Listeners
React handles events (like clicks) with synthetic events, and you can add/remove logic using hooks
like useEffect.

Example:
import React, { useState } from 'react';

const ButtonClick = () => {


const [message, setMessage] = useState('');

const handleClick = () => {


setMessage('Button clicked!');
};
return (
<div>
<button onClick={handleClick}>Click Me</button>
<p>{message}</p>
</div>
);
};

export default ButtonClick;

You might also like