Initialize react-native application with class components

Question

I have just installed create-react-native-app and created one. I can see that app is a function there

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

I know that both Functional and Class-Components in available in React. Now I want to create app with Class Components. Can somebody suggest how to do it?

There are plenty of quality resources on the internet on how to use class based components. Is there any specific point that you do not understand? If not you may study the docs first. — trixn, Sep 05 '19 at 15:12
I am sorry to be not clear. I am just interested what is the command that creates skeleton of Class component. I tried `create-react-native-app` that creates Functional one. — Ashot, Sep 05 '19 at 20:47
What is the difficulty in taking a random react tutorial and writing the few lines it needs yourself in an editor for your choice? I can't see how you need a command for that. When developing even a small react application you will need to write all of the components yourself anyways including class based components which you will certainly need at some point. There is no command for that. The only reason `create-react-native-app` does this is to help you figure out if your setup is working without having to first create a component. Usually you will delete that one as the next step. — trixn, Sep 05 '19 at 22:09
I assumed that here should be something similar to `ng generate component` from Angular. Now it is clear, there isn't. — Ashot, Sep 05 '19 at 22:20

score 1 · Answer 1 · answered Sep 05 '19 at 15:32

For people who come from heavy object-oriented background, the class-based component will let them jump on reactjs relatively quickly compared to a functional-based component.

Here is some basic skeleton of the class component:

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default class App extends React.PureComponent {
  constructor() {
    // Where you initialize some data
  }


  componentDidMount() {
    // Lifecycle method when your component is mounted
  }

  componentWillUnmount() {
    // Lifecycle method when your component is unmounted
  }

  _handleOnButtonPress = () => {
    // Handler when your button is pressed
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._handleOnButtonPress}>
          <Text>Open up App.tsx to start working on your app!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

And here is a further reference to compare class and functional component. Cheers!

score 1 · Answer 2 · answered Sep 05 '19 at 16:32

Here is code for you :

import React, { Component } from 'react';
import {
  View,
  Text, 
  StyleSheet
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount = () => {
    // initial method
  };

  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

export default App;

score 0 · Answer 3 · answered Sep 05 '19 at 17:16

0

You don't need to make it a class unless you are using state in the class

answered Sep 05 '19 at 17:16

Victor Horton

23
4

Initialize react-native application with class components

3 Answers3