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 vote223 views1 answer
Make image circle css react
Javascript React
0 vote249 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React
0 vote238 views1 answer
Get rid of header bar react native
Javascript React
0 vote223 views1 answer
React native scrollbar position issue
Javascript React
2 votes230 views1 answer
How to get current URL with Javascript or React
Javascript React
1 vote238 views1 answer
React native get numeric random string length of 5 characters
Javascript React
6 votes263 views1 answer
React native loading
Javascript React
0 vote242 views1 answer
How to link a photo in expo react native
Javascript React
0 vote246 views1 answer
How to add autoserial number in react js
Javascript React
3 votes243 views3 answers
Adding donet chart text center in react
Javascript React