So we already had a look at a solid set of basics you need for building React Native apps, for working
with these core building blocks
even though of course a lot of the things are still unclear,
we haven't really had a closer look at styling and layouting and so on
but one thing which we definitely should do now is also explore how you can build your own components
because thus far, we always worked in the app.js file and
you will certainly not build bigger apps in one file
only, that file would get super big after all
and if you have a custom component which you plan on repeating, right now we would have to copy and paste
our code.
So let's create new components and therefore here in the project, I'll add a new folder named components,
the name is up to you but since I plan on storing some components in there, the name make sense to me
and in there, I want to create a component for the list item and also one for our input area.
So let's create two new files in there and I will have a naming convention for the files where I start
with capital case characters and I'll have my GoalItem.js, it's a Javascript file of course
and my GoalInput.js file. Now both will hold normal React component, so let's start with the goal
item and therefore import React from React, just as you need to do it in a React for web project.
Then here, I'll create my functional component, goal item which gets props and which then has to return
some jsx here and I'll export this as a default, just like this.
Now the jsx I want to render there has to use React Native components or other custom components
which then in turn use React Native components
and here I'll go with this content I had in here. So I'll cut it from the app.js file and return it
here.
Now in order to use this here, we have to import view and text,
so these two components, from React Native.
So let's import view and text from React-Native here.
In addition, I'm setting up some styles and I want to use the stylesheet, so I'll import this here as
well and then set up my styles constant which you could name differently of course with stylesheet
create and I'll go back to the app.js file and grab my list item style here,
cut it from there and go to the goal item and add it here to this object I pass to stylesheet.create.
Now this should work but of course what I'm outputting here will no longer be on item data,
instead let's expect that we simply get this as props, so either props children so that it can be passed
between the opening and closing tag of our custom component or maybe props.title, whatever you want, a
prop name of your choice then. Now we can use our custom component, the goal item by going back to the
app.js file and here I'll add import to goal item with a capital G, so that React recognizes this as
a custom component from ./components/GoalItem, you can omit the .js and now we can
use goal item down here in render item as a custom component, in this case a self-closing component because
since I'm using props title and not props children, I don't expect anything between the opening and closing
tags of my custom component. I do expect a title prop though, so let's set this here with title and then
here, we can point at item data, then get access at the item which is an object where we have a value key
and with that, we should still see the same as before if we enter some goals here, learn all about rn,
yes that's looking good, now with our custom component. Now here's a good practice for you to also put
the text input and button or this entire view here actually into our goal input component and of course
for that, you'll also need to wire up communication between the app.js file and the goal input component
to be informed when users press this button in the goal input component and then add data here in the
app.js file.
It's how you would do it in a React for web project too, so if you have experience with that, it should be
no problem, otherwise we'll do it together in the next lecture but if you know how to do it, definitely
try it on your own first
now.