This content originally appeared on Envato Tuts+ Tutorials and was authored by Nitish Kumar
Components are the building blocks of any React app. If you want to learn React, you have to start with components!
In this lesson from our free full-length beginner course on React 18, you'll learn how.
Components are the building blocks of a React app. They are somewhat similar a JavaScript function that 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 React Component
Lets begin by updating our "Hello World" app from the first tutorial so that it uses a React component. We will modify it in a manner that allows us to say hello to someone specific instead of the whole world.
When React components are defined as functions, you can pass them a single object argument called props
with all the required data. These function will return a React element. Our helloElement
from the previous tutorial looked like this:
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
We can convert it to a function that returns a React element by using the code below:
function Greeting() { return React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!'); } let helloElement = React.createElement(Greeting);
Opening the webpage in the browser will still show us the same old Hello World! message because the message is hard-coded into the function.
Lets modify it so that is accepts a prop
object as an argument with all the information that it needs.
function Greeting(props) { return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`); } let helloElement = React.createElement(Greeting, {name: 'Nitish'});
There is another way of creating our component as shown below. However, keep in mind that a simple function call like this will only work if the Greeting
component does not have any hooks (it doesn't in this case). I would suggest that you stick with the above method of creating components.
function Greeting(props) { return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`); } let helloElement = Greeting({name: 'Nitish'});
Open the webpage in a browser and you will see "Hello, Nitish!" instead of "Hello, World!". We can say hello to anyone now.
![React Components: Hello Greeting](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2803/posts/42016/image-upload/react_hello_nitish_heading.png)
![React Components: Hello Greeting](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2803/posts/42016/image-upload/react_hello_nitish_heading.png)
![React Components: Hello Greeting](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2803/posts/42016/image-upload/react_hello_nitish_heading.png)
Creating More Complicated Components
The code we have written so far to create components is manageable. However, we have only defined a very basic component consisting of a single heading element. In real life, you will have to create much more complicated layouts and using the above method for creating components will no longer be feasible.
The following example creates another component that will demonstrate how cumbersome it can get to create complicated components with multiple children.
function Country(props) { return React.createElement('div', { className: "container" }, React.createElement('h2', { className: "country-name" }, `Country Name: ${props.name}`), React.createElement('p', { className: "capital" }, `Capital: ${props.capital}`), React.createElement('p', { className: "population" }, `Population: ${props.population}`)); } let countryElement = React.createElement(Country, {name: 'United States', capital: 'Washington, D.C.', population: '332 million'}); let rootElement = document.getElementById('root'); ReactDOM.createRoot(rootElement).render(countryElement);
Once you refresh the webpage, the markup in the inspector tab will look like the image below:
![React Country Component Markup](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2803/posts/42016/image-upload/react_country_component.png)
![React Country Component Markup](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2803/posts/42016/image-upload/react_country_component.png)
![React Country Component Markup](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2803/posts/42016/image-upload/react_country_component.png)
I used a little CSS to make the component more presentable.
![React Country Component Render](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2803/posts/42016/image-upload/react_country_component_render.png)
![React Country Component Render](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2803/posts/42016/image-upload/react_country_component_render.png)
![React Country Component Render](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2803/posts/42016/image-upload/react_country_component_render.png)
You can see the final result of executing the above code in a browser in the CodePen below. Try modifying the code to add one more element to the component which shows the area of the United States.
Final Thoughts
We were able to output our component the way we wanted. However, you can see that it required us to write a lot of code. Writing so much code for creating simple components is error-prone and will bring down productivity.
There are a bunch of tools and libraries out there that can help you create a React app by writing much less code. The code for our component could also be shortened significantly by using JSX. We will learn about that in the next tutorial.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Nitish Kumar
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
Nitish Kumar | Sciencx (2022-09-11T21:44:18+00:00) Learn React 18: Introducing Components. Retrieved from https://www.scien.cx/2022/09/11/learn-react-18-introducing-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.