How to Build Your First React Function

[00:00 - 00:33] Our eventual objective for this part of the course on the client side is to render and display a list of listing items in the UI that's retrieved and obtained from the GraphQL API we set up in the server. Before we concern ourselves with the custom styling and UI of the page, our first attempt is going to basically see if we can have data be available and displayed on the client. First and foremost, we'll begin working on a new component that we'll create called listings. With which we're going to keep in a sections folder within the source folder of our app.

[00:34 - 01:15] So we'll create the sections folder and it will create an index file within folders may sections and an in this sections folder will also have a listings folder that'll have its own index file and a listings.tsx file where the listings component is expected to live. appear unnecessary so let's explain our approach. When we start building the application in more detail, especially in part two of this course, we're going to want to structure and separate all the numerous and large number of components in our app in a neat and structured file format.

[01:16 - 02:02] Our aim is to separate and declare all the parent level components within their own sections. In a module or data to say folder and sections will explicitly name space and contain each module within itself since each section module will contain all the accompanying files for that section such as the styles, the child components, any additional assets relative to this section module alone. The index files are established within the roots of each module to create explicit public interfaces for the ease of importing and exporting between modules. When we start to write more code, this will appear clearer. In the listings.tsx file will import react from the react library.

[02:03 - 02:37] We'll then export a functional component with the same name as that of the folder module, listings. We'll state that the template of this listings component is to simply return a header statement of a message that says tiny house listings. Though we're not directly using the import declared here, we have to import react if we ever want to define JSX in a component file. In the corresponding index file with listings, we'll export the listings component we've just created.

[02:38 - 03:42] Note that this star symbol essentially allows us to re export all exports in a module. If we wanted to be more particular, we're also able to explicitly import the listings components and then explicitly export it as well. Either approach works and it usually comes down to personal preference, we'll stick with the prior approach of using the star syntax to just simply re export whatever has been exported. And now in the index file within the root sections folder, we'll also be able to re export the listings component directly. With the listings component now being exported from sections, in our source index file, we can simply directly import listings from the sections folder and render it in our render function. If everything works, we can start the server and in our UI, instead of seeing the hello world message, we now see a message that says tiny house listings.