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 vote123 views1 answer
Show and Hide element in react
Javascript React
9 votes125 views3 answers
React import font awesome
Javascript React
4 votes87 views1 answer
Get width of screen react
Javascript React
0 vote122 views1 answer
Setting up react on visual studio code
Javascript React
0 vote114 views1 answer
Install reactivesearch
Javascript React
0 vote120 views1 answer
Express react docker container example
Javascript React
0 vote146 views1 answer
Navigate between files in react js
Javascript React
22 votes138 views3 answers
How to use if else inside jsx in react
Javascript React
0 vote126 views1 answer
Get call log in react native android
Javascript React
1 vote122 views1 answer
React material ui input max length
Javascript React