We are not using a ES6 class based component, because we don’t need state or lifecycle methods in this case. What you see here is a stateless functional component. Next, add the basic structure of a simple functional component: import React from "react" Creating the Contact Componentįor our our Contact component, add a new file src/components/Contact.js In the next sections we will first build the Contact component and then create React list component to render a list of contacts based on our data array. It then renders one Contact component for each of the objects: [ We will pass an array of contact objects to the list component. The ContactList component to render a list of Contact components.A Contact component to show a contact’s name, represented by the grey rectangles in the above screenshot.What you can see above consists of two components: The Conceptīefore we start, here’s what we are going to build today The contact list we’re going to build Now that you’ve got everything prepared, you’re ready to get your hands dirty. If you visit in your browser, you should see the default React app that we create last time. If you don’t have the source code of the previous part ready, you can clone it from GitHub and install the dependencies: git clone Part 3 – How to Connect your React App to a REST API Preparations Part 2 – How to Create a React List Component Part 1 – How to Create a React App with create-react-app Over the whole series of articles, we’re going to build a functional contact list with React: In the previous part of this series you learned how to create a React app with create-react-app. In this post, we are going to create a React List Component to display a list of contacts. You’ll learn how to create functional stateless components and how to pass props from a parent component. Today we’re going to create a React list component, that renders a list of Contact components.
0 kommentar(er)
