React.
js
A JavaScript Library for Building User
Interfaces
Presented by: Ratnesh Ankit
Introduction to React
• React.js is an open-source JavaScript library
developed by Facebook.
• It is used for building reusable UI components.
• React follows a component-based
architecture.
Why Use React?
• - Fast and efficient rendering
• - Reusable components
• - Strong community support
• - Virtual DOM improves performance
• - Easy to integrate with other libraries
Core Concepts
• - JSX: JavaScript XML syntax extension
• - Components: Functional or Class-based
• - Props: Input to components
• - State: Internal data of a component
• - Lifecycle Methods: Hooks to control behavior
JSX in React
• JSX allows writing HTML-like syntax directly in
JavaScript.
• It makes code more readable and easier to
write.
• Example:
• const element = <h1>Hello, world!</h1>;
Components in React
• React components can be Functional or Class-
based.
• They encapsulate logic and UI.
• Functional Component:
• function Welcome(props) {
• return <h1>Hello, {props.name}</h1>;
• }
Props and State
• Props:
• - Passed from parent to child
• - Read-only
• State:
• - Managed within the component
• - Can be changed using setState() or useState()
React Hooks
• - useState(): For managing state in functional
components
• - useEffect(): For side effects like API calls
• - useContext(), useRef(), useReducer(): Other
useful hooks
React Router
• React Router is used for navigation in single-
page applications.
• It allows routing without reloading the page.
• Example:
• <BrowserRouter>
• <Route path='/home' component={Home} />
• </BrowserRouter>
React and APIs
• - React can fetch data using fetch API or axios
• - Commonly used inside useEffect()
• - State is updated based on the response
Conclusion
• React.js is a powerful and flexible library for
building user interfaces.
• It is widely adopted in the industry and is
supported by a large community.
• Start learning React to build dynamic web
applications!
