Building First Custom Component in React - part 3

 ← Code Explanation and Introducing JSX - Hello World - part -2 

Components are at the heart of React, and this sentence serves as a synopsis of the React library. Although it is not the only feature that React is built around, but it is one of the key reasons why many developers prefer to use react. It allows to develop project from less complicated to more difficult ones.

What are Components?

React is used to create user interfaces that include many blocks such as a header, navbar, footer, and sidebar; instead of building the UI in a single file, React Components allow you to break the UI into several separate pieces of code, creating the structure that holds the shape of the main application. As a result, using react is more simple and convenient.

In simple terms, a component is a JavaScript function or class that includes CSS styling, JSX, and other features.

Types Of Components 

There are two types of components

• Functional Component

• Class Component

Functional Component - We refer to a component that has a function as a functional component. You may pass 'props' as argument and returns JSX or react elements.

Class Component - When we defined component using ES6 JavaScript classes, we named it class component. To use it, we need to extend React.Component and must define render() method in it. We use state and lifecycle method as well.

In modern React applications, developers now choose to use functional components with Hooks. Because react is becoming more functional, I will use functional component examples in my react course.

You can use the ES7 React/Redux/GraphQL/React Native snippets extension if you're using the Visual Studio code editor. It contains a lot of code snippets that can help you construct component and other code for your application. 

But if you're just learning how to use React, I'd advise writing out every piece of code by hand because it makes it easier to grasp how it works and how to deal with issues.

Create Custom Component in React 

The ideal practice is to make a component directory and place all components in it. So, within the src folder, create a new component folder called "component." 

Make a new file in this component folder called "MyComponent.js". It is important to note that we named the component with a capital letter; otherwise, react treats the component as an HTML tag or DOM element, and it is best to put the name in CamelCase.

Because components are JavaScript files, let's write the code as a regular function with the function keyword and the file name as the function name.

function MyComponent () { 
    
  }

Because React is written in ES6 ECMAScript, we can also write this as an arrow function. It enables us to write shorter and simpler function syntax. Let us now return a JSX or React element.

const MyComponent = () => {
   return <h1>Welcome, Elpeeda</h1>
 }

This element will not appear on the screen until we add it to our root App component. Allow us to export this <MyComponent>.

const MyComponent = () => {
   return <h1>Welcome, Elpeeda</h1>
 }
 
 export default MyComponent;

So, in the preceding example, we use JavaScript's export default to export our <MyComponent> for use throughout our programme.

To define our <MyComponent>, first use JavaScript Import to import this into the App component at the top of the file.

import MyComponent from './component/MyComponent';

We use this './component' because "MyComponent" file is in the component folder. Now return the name of the component as an HTML element.

import MyComponent from './component/MyComponent';

const App = () => {
    return <MyComponent />
 }

We can also create a nested component within this custom component, so let's make another component called <ListComponent>. Even though you are free to choose the name of your component, but it must begin with a capital letter and follow the best standard, the camelCase convention.

const ListComponent = () => {
   return <p>Complete the react course.</p>
 }
 
 export default ListComponent;

Now, using the same procedure as before, we can import this component inside the <MyComponent>.

import ListComponent from './ListComponent';

We use this './' because both files are in the same component folder. Now include the name of the component as an HTML element.

import ListComponent from './ListComponent';

const MyComponent = () => {
  return (
	<h1>Welcome, Elpeeda</h1>
	<ListComponent />
      )
 }
 
export default MyComponent;

Components work individual and are reusable. Since it is not control by other, its addition or deletion won't break our code. The element will be output as many times as I added if we use the same <ListComponent> repeatedly. Reusing them saves time and follows to the DRY (Don't Repeat Yourself) principle.

import ListComponent from './ListComponent';

const MyComponent = () => {
  return (
	<h1>Welcome, Elpeeda</h1>
	<ListComponent />
	<ListComponent />
	<ListComponent />
      )
 }

export default MyComponent;

Don't hesitate to divide a component into smaller components if it contains a specified amount of detail, such as a button, form, or dialogue.

Conclusion 

Components are just JavaScript functions that return either JSX or an element. A component is similar to a blueprint, an outline in a react application, or a UI builder. 

Elements are rendered when the component function returns and is displayed on the screen. It is independent; only one component will be updated if it is modified, and we can utilise the same component across the programme, making them reusable.