reatppt.pptx
Download as PPTX, PDF0 likes14 views
This document provides an overview of React including React components, class components, props, and events. It discusses that React is a JavaScript library created by Facebook for building user interfaces out of components. Components are independent and reusable bits of code that return HTML. There are two types of components: class components and function components, with function components now being preferred with the addition of hooks. Props are arguments passed into components via HTML attributes. Events in React are similar to HTML events and can be used to trigger actions when user events occur.
reatppt.pptx
- 1. React
- 2. Index • React Introduction • React Components • React Class Components • React Props • React Events
- 3. React Introduction React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components. React.JS History Current version of React.JS is V18.0.0 (April 2022). Initial Release to the Public (V0.3.0) was in July 2013. React.JS was first used in 2011 for Facebook's Newsfeed feature. Facebook Software Engineer, Jordan Walke, created it.
- 4. 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. Create Your First Component When creating a React component, the component's name MUST start with an upper case letter. Class Component Function Component Rendering a Component Props Components in Components Components in Files
- 5. React Class Components Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less". With the addition of Hooks, Function components are now almost equivalent to Class components. The differences are so minor that you will probably never need to use a Class component in React. Even though Function components are preferred, there are no current plans on removing Class components from React. This section will give you an overview of how to use Class components 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 via a render() function. Components come in two types, Class components and Function components, in this chapter you will learn about Class components.
- 6. React Props Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes: Example:- import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App name = "JavaTpoint!!" />, document.getElementById('app'));
- 7. React Events Just like HTML DOM events, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc. Passing Arguments To pass an argument to an event handler, use an arrow function. React Event Object Event handlers have access to the React event that triggered the function. In our example the event is the "click" event. 1. onmouseover : The mouse is moved over an element. 2. onmouseup : The mouse button is released. 3. onmouseout : The mouse is moved off an element. 4. onmousemove: The mouse is moved. 5. Onmousedown: mouse button is pressed.