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 vote431 views2 answers
Jest simulate toggle switch react native
Javascript React
1 vote389 views1 answer
React 360
Javascript React
2 votes405 views2 answers
React native text get number of lines
Javascript React
1 vote396 views1 answer
Google font in react native
Javascript React
3 votes371 views2 answers
React is there a safe area view for android
Javascript React
2 votes353 views1 answer
Function component react form
Javascript React
3 votes362 views3 answers
React portals
Javascript React
0 vote390 views1 answer
User account in react
Javascript React
2 votes351 views6 answers
React font-awesome
Javascript React
0 vote384 views2 answers
'Navbar' is not defined react/jsx-no-undef
Javascript React