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 vote389 views1 answer
Bottom shadow in react native
Javascript React
0 vote407 views1 answer
How to redirect a form to another page when we submitted a form in react js
Javascript React
3 votes390 views1 answer
Navigation react pass props
Javascript React
1 vote395 views1 answer
Webpack-bundle-analyzer react
Javascript React
1 vote385 views6 answers
React-native build debug apk
Javascript React
1 vote425 views1 answer
React check if string is mail
Javascript React
-3 votes409 views2 answers
Generate android folder in react native
Javascript React
0 vote410 views1 answer
Usehistory v6 go back to previous route in react
Javascript React
0 vote436 views1 answer
React flip move
Javascript React
0 vote534 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React