Before writing out the details of the component, you will need to define the Props at the top. Let's break down everything in this CustomImageComponent component. tsx file first.Ĭopy and paste the following code into CustomImageComponent.tsx: Since all avatars on a page are essentially based off of an image, you will need to write out the code for the CustomImageComponent. Get started by creating a new folder within the src folder named components. Perhaps, the only difference is that a profile picture is smaller and displayed as a circular icon than a regular image. Break that idea down further and you might guess that the image component be reused for the profile picture as well. At this point, you might have the idea that an image component must be written. Let's say that you want to display the user's profile picture above an image they share. There are plenty of sites out there that follow this format - social media, personal blogs, forums, etc. To understand the importance of using wrappers and writing custom components, think about a website that allows users to create a profile and share images. Remember that the goal is to simplify the components as much as possible so that you can reuse them throughout the project. Write a component in ReactĪs mentioned above, React uses components and props to make the code cleaner. Feel free to kill the server so that you can focus on the code, otherwise leave the terminal open and running to see the changes as you go. Now, load it in your browser and see that the only thing on your localhost:3000 page is the header. Save your file and enter the command npm start in your terminal to start the server on localhost:3000/. On your command line, run the following lines to create the project folders and change into the my-first-react-app directory. For the sake of simplicity, use the create-react-app utility to create a project structure that you can build on. In React, there are a few different ways to start an application. Let's practice our basic understanding of wrappers by writing a component and using a wrapper on the custom component. This is also known as having children inside a component.Īlternatively, wrappers do not only have to enclose some data, but they can be used to unwrap an object and return another data type. They are also capable of wrapping around a group of components if they are all passed through as a prop. It fundamentally has all the same properties, but with a little extra to give more of an appearance. When you think of using a wrapper, you can think of it as having a new version of an existing object or class. These wrapper classes essentially contain an instance of another class or component and provide a new way to use an object. They are used to create and support basic UI elements based on the data - or prop values - provided. The wrapper is an object that is used to maximize code reuse and consistency. Some prior knowledge in JavaScript and TypeScript, or a willingness to learn.Node version 14.16.0 or above at the time that this article is written.In this article, you'll be exploring how to use wrappers for custom components in a basic TypeScript React project so that you can practice writing clean code and reusing components efficiently. With that said, how can you write code as efficiently and clean as possible while dealing with some components that might differ only slightly from another? In fact, after drawing a mockup of the web application you want to build – using boxes – you might notice some patterns or similarities between the components you create. You might have heard that React allows you to build custom components that can be reused throughout the project. Like, seriously - how can React, a JavaScript UI library be such a challenge when it's widely used in the industry? Learning React for the first time can be unnecessarily difficult.
0 Comments
Leave a Reply. |