Learn Reaction 18: Introduction to Components

Components are the building blocks of a React app. They are somewhat similar to a JavaScript function you might define in a program. They are independent entities that make up the UI of your app and you can reuse them again and again.

In fact, you can define a component using classes or functions. Functional components are the most up-to-date technique, so that’s what I’ll show you in this lesson.

Creating a reaction component

Let’s start by updating our “Hello World” app from the first tutorial to use a React component. We will modify it in a way that allows us to greet someone specific instead of the whole world.

When React components are defined as functions, you can pass them a single called object argument props with all the required data. These functions will return a React element. Our helloElement from the previous tutorial it looked like this:

We can convert it to a function that returns a React element using the following code:

Opening the webpage in the browser will still show us the same old one Hello World! message because the message is hard-coded in the function.

Let’s modify it so that it accepts a prop object as an argument with all the information it needs.

There is another way to create our component as shown below. However, keep in mind that a simple function call like this will only work if the Greeting the component has no hook (in this case it doesn’t). I would suggest sticking to the method above to create components.

Open the web page in a browser and you will see “Hello, Nitish!” instead of “Hello, World!”. We can say hello to anyone now.

Reaction components: Hello greetingReaction components: Hello greeting

Creating more complicated components

The code we have written so far to create the components is manageable. However, we have only defined a very simple component consisting of a single header element. In real life, you will have to create much more complicated layouts and using the above method to create components will no longer be feasible.

The following example creates another component that will demonstrate how cumbersome it can become to create complicated components with multiple children.

After updating the webpage, the markup in the inspection tab will look like the image below:

React to the country component markupReact to the country component markupReact to the country component markup

I used some CSS to make the component more presentable.

React to the rendering of the Country componentReact to the rendering of the Country componentReact to the rendering of the Country component

You can see the final result of executing the above code in a browser in the CodePen below. Try modifying the code to add another element to the component showing the US area.

Final thoughts

We were able to produce our component as we wanted. However, you can see that it required us to write a lot of code. Writing so much code to create simple components is error prone and will reduce productivity.

There are a ton of tools and libraries out there that can help you build a React app while writing a lot less code. The code for our component could also be significantly reduced by using JSX. We will learn this in the next tutorial.

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *