Components

    What are components?

    React components are the reusable building blocks we use to create the user interface of our app.

    Components are the type of the React element.

    We've already seen a few built-in components: View, Text, and Button. We can also define custom components.

    This is analagous to classes and instances. View is like a class, while React.createElement(View) instantiates the class.

    Defining components

    There are 2 ways we can define a React component:

    • Function components - A function that takes parameters (called props) as input, and returns a React element
    • Class components - A class that extends React.Component and implements a render method

    Lets take a look at each way we can define a React component.

    The function component API is the one we should use for new code, and the one we'll focus on. The class component API is older, but you'll definitely still see it in examples online.

    Previous:
    Elements
    Next:
    Function Components
    Contents
    1. What are components?
    2. Defining components

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Check it out!

    Community Resources

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!