React Component

How to create component in reactjs

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

React native class component constructor

import React from 'react';  
import { View, TextInput } from "react-native";

class App extends React.Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         name: "" 
      }  
    this.handleChange = this.handleChange.bind(this);  
  }
  handleChange(text){
    this.setState({ name: text })
    console.log(this.props);  
  }  
  render() {  
    return (  
    <View>
      <TextInput 
      	value={this.state.name} 
  		onChangeText={(text) =>this.handleChange(text)}
      />
    </View>  
  }  
}  
export default App;

Source: reactjs.org

Lifecycles if reactjs

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {  }
  componentWillUnmount() {  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Source: reactjs.org

Shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Source: reactjs.org

ComponentDidUpdate

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}

Source: dev.to

React Component

A React Component is one of the core building blocks of React Apps. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier

-2

Source: reactjs.org

Similar codes

0 vote146 views1 answer
React native shadow maker
Javascript React
0 vote146 views1 answer
Discord.js TypeError: Reactedmsg.delete message using id
Javascript React
11 votes144 views2 answers
'React' must be in scope when using JSX react/react-in-jsx-scope
Javascript React
2 votes148 views2 answers
How to add multiple classes to a ReactJS Component
Javascript React
0 vote157 views1 answer
How to add carsoul to react project
Javascript React
2 votes147 views3 answers
React cdn link
Javascript React
0 vote174 views1 answer
Remove console messages of react-i18next
Javascript React
0 vote156 views2 answers
Get selected value on componentdidmount reactjs
Javascript React
36 votes132 views2 answers
How to install react router dom version 5
Javascript React
0 vote150 views1 answer
Detecting change in animated value react native
Javascript React