REACT pdf.docx

REACT
Index
 Introduction of React
 React Component
 React Class Components
 React Props
 React Events
 React List
 React Forms

React Introduction
What is React?
React, sometimes referred to as a frontend JavaScript framework, is a
JavaScript library created by Facebook.
React is a tool for building UI components.
How does React Work?
Instead of manipulating the browser's DOM directly, React creates a virtual
DOM in memory, where it does all the necessary manipulating, before making
the changes in the browser DOM.
React.JS History
The 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.
The current version of create-react-app is v5.0.1 (April 2022).
create-react-app includes built tools such as Webpack, Babel, and ESLint.

React Components
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
A class component must include the extends React. Component statement. This
statement creates an inheritance to React. Component, and gives your
component access to React. Component's functions.
The component also requires a render() method, this method returns HTML.
Example
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}

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.
Create a Class Component
When creating a React component, the component's name must start with an
upper case letter.
The component has to include the extends React.Component statement, this
statement creates an inheritance to React.Component, and gives your
component access to React.Component's functions.
The component also requires a render() method, this method returns HTML.
Example
Create a Class component called Car

class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
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:
ExampleGet your own React.js Server
Add a "brand" attribute to the Car element:
const myElement = <Car brand="Ford" />;
The component receives the argument as a props object:
Example
Use the brand attribute in the component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;

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.
Adding Events
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onClick="shoot()".
React:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Example:
Put the shoot function inside the Football component:
function Football() {
const shoot = () => {
alert("Great Shot!");
}

return (
<button onClick={shoot}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
React Lists
In React, you will render lists with some type of loop.
The JavaScript map() array method is generally the preferred method.
Example:
Let's render all of the cars from our garage:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>

<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
root.render(<Garage />);
React Forms
Just like in HTML, React uses forms to allow users to interact with the web
page.
Adding Forms in React
You add a form with React like any other element:
Example:Get your own React.js Server
Add a form that allows users to enter their name:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />

</label>
</form>
)
}
root.render(<MyForm />);
Handling Forms
Handling forms is about how you handle the data when it changes value or gets
submitted.
In HTML, form data is usually handled by the DOM.
In React, form data is usually handled by the components.
When the data is handled by the components, all the data is stored in the
component state.
You can control changes by adding event handlers in the onChange attribute.
We can use the useState Hook to keep track of each inputs value and provide a
"single source of truth" for the entire application.

REACT pdf.docx

More Related Content

Similar to REACT pdf.docx (20)

More from PSK Technolgies Pvt. Ltd. IT Company Nagpur (17)

Recently uploaded (20)

REACT pdf.docx