ReactJS Class Component

By:- Love Kothari

Index...

1. Class component

2. States

3. Prps

4. Class component life cycle

5. Events/Methods

6. Axios Api call

7. Context

8. Error Boundaries
Class Components
Class Components

A functional component is just a plain JavaScript

function that accepts props as an argument and
returns a React element. A class component
requires you to extend from React.
Component and create a render function which
returns a React element. There is no render
method used in functional components

class Test extends React.Component

 State is a JavaScript object that
stores a component's dynamic
data and determines the
component's behaviour. Because

State’s
state is dynamic, it enables a
component to keep track of
changing information in between
renders and for it to be dynamic
and interactive. State can only be
used within a class component.
 Example of State
class Test extends React.Component {
render() {
constructor () { return (
<div>
this.state = {
<p>{this.state.id}</p>
id: 1,
<p>{this.state.name}</p>
name: "test" </div>
);
}; }

} }
Prop’s :
If you're already familiar with how arguments & functions work in JavaScript, understanding props is a
piece of cake! In a nutshell, props are used to pass data from a parent component to a child
component in React and they are the main mechanism for component communication.

class ParentComponent const ChildComponent = (props)

extends Component { => {
render() { return <p>{props.name}</p>;
return (
<ChildComponent };
name="First Child" />
);
}

}
Class component life cycle

Components are created

(mounted on the DOM), grow
by updating, and then die
(unmount on DOM). This is
referred to as a component
lifecycle. There are different
lifecycle methods that React
provides at different phases of a
component's life
Events/Methods
Handling events with React elements is very similar to handling events on DOM elements. There are
some syntax differences:

function Form() { return (

function handleSubmit(e) { <form onSubmit={handleSubmit }>
<button
e.preventDefault(); type="submit">Submit</button>
</form>
console.log('You clicked );
submit.'); }
}
Axios Api call
Below is a quick set of examples to show how to send HTTP GET requests from React to a backend API
using the axios HTTP client which is available on npm

componentDidMount() { // Simple GET request using axios

axios.get('https://api.npms.io/v2/search?q=react')
.then(response =>

this.setState({ totalReactPackages: response.data.total

}));

METHODS:- GET, POST, PUT, DELETE

When to Use Context
Context is designed to share data that can be considered “global” for a tree of React components, such as
the current authenticated user, theme, or preferred language. For example, in the code below we manually
thread through a “theme” prop in order to style the Button component:
class App extends React.Component {
render() {
return <Toolbar theme="dark" />; class ThemedButton extends
} React.Component {
}
render() {
function Toolbar(props) { return <Button
theme={this.props.theme} />;
return ( }
<div> }

<ThemedButton theme={props.theme} />

</div>
);
}
Error Boundaries

In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to
emit cryptic errors on next renders. These errors were always caused by an earlier error in the
application code, but React did not provide a way to handle them gracefully in components, and could
not recover from them.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
1
this.state = { hasError: false }; }

render() {

static getDerivedStateFromError(error) {
if (this.state.hasError) {
// Update state so the next render will show the
// You can render any custom fallback UI
fallback UI.
return <h1>Something went wrong.</h1>;
return { hasError: true };
}
}

return this.props.children;
}
}

componentDidCatch(error, errorInfo) {
3
// You can also log the error to an error reporting service
logErrorToMyService(error, errorInfo);
}
2
 Thank-you :-
Before starting a live demo anyone has any
queries please let me know