7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Components and Props

Components are the building blocks of every React Native app. Almost as essential are props—they make a component configurable. We will learn all about props and components in this lesson.

Related Links

2.1 Components and Props

Hi, and welcome back to Get Started with React Native. In this lesson I want to teach you a core concept of each React Native app, components. In fact, they are also essential for normal React projects. Components are the building blocks of your application to define what the user can see and handle interaction between them and your app. Let's look at the simple Hello World example. You define your component using ES6 syntax by importing the component clause from react and extending it with our Hello World clause. Each component you create much have a random function that uses JSX syntax to return mockup. JSX is a syntax for embedding SML within JavaScript, it uses angle brackets just like html does. Here, we render a text component that contains Hello World. This component also needs to be imported this time from the React Native package. You have created your first component. Great, you can now input within your app and use it. Each app has a root component that nests all other components. This root component is defined by the app registry. You can import it from the React Native package as well and call registerComponent on it. You pass the component name as a string, as well as an anonymous function that returns the class. When you put that into your index.css file, the result will be as shown on the right. You might have also wondered why there are two index files. I just want to address this briefly, since it's more of an advanced topic. Since you are building cross-platform apps,you sometimes have plarform-specific code or components. Whenever this is the case, you can extend the filename with .ios or .android and React Native will automatically load the correct file for you. If you want to learn more about that, check out the React Native sky on platform specific code. Just having a static component is not very useful most of the time. Let us look at an advanced Hello World example, where we greet specific people. In this case we have two components, the greeting one and the advanced Hello World component. The render function of our root component uses two different components as you can see. View, which is a report to lay out and style child components, as well as the one we defined. Greeting. We need the repping component since the root can have only one component on the first letter. As you can see, we are calling greeting with a name attribute, this is called the Prop and React. It allows you to pass data to your components from a higher level. In our case, we are creating Alice and Bob. Let's apply what we learned so far to our class project. I have created a new project called Get Started for the class. You can either call React Native in its or check out the initial commit from the course repository. I'm going to work an index.iOS.js, but you need to choose your platform if you follow along. Everything I sue is platform independent. First of all, let's strip the example code to the bare minimum, we don't need style sheets and we don't need to render content. Let's also clean up the imports we don't use the style sheet clause yet, so let's remove it, everything else can stay. You always need to import React itself, otherwise your code won't compile. Our finished project, displayed a map view, as well as some data about the route we're currently taking. Let's add those components and lay out them roughly. First of all, we need a map view. There is a whole lesson about it later in the course, so for now, I'm using a text component displaying map view. Since we want to display more than just one component, we need to add a few repo to do this, in fact, we're going to create a more complex higher key here. First, let's creat a wrapper view that holds all the data about the run. I'm going to create a new component for this in a second, but let's use it already. The component name will be RunInfo, and it will gather title and the value prop. I'm going to add three data fields, Distance, Speed and Direction. Let's add a new component to show you how you can input custom components from a separate file, I'm going to create one called run-info.js and place it in a folder called Components. Just keeps our project nice and organized. Now, we need to create the Component. First, import the necessary classes from the React and React Native packages. I will need Component Text and View. Then, export the RunInfo class as default and extend it from Component. Finally, we need to run the RunInfo. I'm going to add and wrap a few lec before and within, two text components. One holds the title, the other one the value prop. Back in our index file we have to import the component with the input statement. You can reference the file relatively by adding a dot in front of the path. That's it, even though our app looks extremely ugly at the moment, we created a basic view hierarchy. Let's recap. Components are the building blocks of your react native app, they can be created by extending the component class of direct data package and be use by other components and render function. The root component used to be registered at the App Registry and is the starting point of your application. It can only contain one root level component. Components can be props parameters called props, the change, the look of behaviour of it, to use them in a content within your GSX file surrounded with curly braces. Finally, the view component is used to lay out and style your app. In our next lesson we will clean up the mess we just created by introducing styles and stylesheets to the project. See you there.

Back to the top