Simple React Component Walk Through

Introduction:

“I’ve always wondered how images, cards and web page footer designs were kept consistent and uniform with no code repetition. Learning react answered that in the most precise manner ever”

In this walkthrough, we are going to look at a brief summary on the importance of using components in development as well as write some code to make our read easier to remember. This same approach can be used in Web App or Mobile Application development using the javascript library ReactJS for web applications and React Native for mobile applications.

Pre-Requisites:

• Html 5
• JavaScript
• ES6.
• Comfortable with basic command line actions.
• Arrow functions

Installations:

• NodeJS

Requirements:

• Text Editor (your choice of the editor)

Brief Summary Of React

What Is React?

React is a javascript library used for UI-Development through a component-based approach and is used for both Web and Mobile development.

Why React?

Performance: React uses the Virtual DOM. Virtual DOM compares the components’ previous states and updates only those items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.

Component Reusability: in React components are considered the core building blocks of a web application. It simplifies the process of building UIs. Each component is independent of one another and can be embedded inside each other making the final UI of your application.

Unidirectional data flow: In react data moves in one direction, from parent to child component.

Easy to learn: React combines basic HTML and JavaScript concepts with some other beneficial additions. Still, you need some time to get a proper understanding of the library.

React can be used for the development of both web and mobile apps: There is a framework called React Native, derived from React itself, that is very popular and is used for creating beautiful cross-platform mobile applications.

Importance Of Component-Based Development

1. Re-use the same component: As you develop your app, the same components created can be reused in other apps, might be a mobile app with React Native or a web app with ReactJS.
2. Independent Component Update: Each and every react component is independent and thus acts separate from all other components, this enables the component to change without affecting any other component within the app.
3. No Page Reloads-: The biggest advantage of react is the ability to update individual elements on your web page or app without the need to reload the entire page. A good example is Instagram, all the images we see are individual card components that don’t cause page reloads once you click the like icon.

Creating a react app using Vite

• Open (CMD) command line.
• Run yarn create vite

• Select React from the list of frameworks
  - Enter the Project name on prompt.
  - Select React as the Framework of choice.
  - Select react as Variant.

• Upon completion change directory to project name.
• Run Yarn to install all dependencies.
• run Yarn dev to start development Server on port 3000.
• Go to the web page and you will see the following page.

• Open the project in your Text editor. (I’m using VSCode)

Let’s Code!

NOTE:

There are many ways of styling components in this article we are writing css in javaScript

In your project folder navigate to the src folder and create a folder called components, this folder is where we keep all our components.

In the components folder create three files namely Navigation.jsx, Footer.jsx, Button.jsx.

For this article, we are concentrating on the Button.jsx file.

Open Footer.jsx and write the following piece of code.

footer.tsx

Open Navigation.jsx and write the following piece of code.

Open Button.jsx file and write the following pieces of code.

The below screenshot is how a component in react is declared.

Components in react take in parameters called Props short for Properties. From what we have, “text” and “bgColor” are our Props that we are passing to the Button component.

There are so many ways to style your components in react, for us we are creating a javaScript object that we can pass as a value to the buttons style property inside our return statement.

As below, we have a return statement that returns one tag like the button below.

NOTE:

Only one Tag is returned. If you return more than one tag in the return statement like below we get an error which says “JSX expressions must have one parent element.”

After each component is created, for it to be reusable in another component we need the following piece of code.

Export default enables code reusability and we can import this component in any other component and use it there.

Now, let’s go back to our src folder and open the App.jsx.

App.jsx is our Applications parent container (Parent Component), in which we can import other components such as Button.jsx, Navigation.jsx, etc, and we can use the components in the App component and render it on the screen.

Here is our App component.

At the top, we have our imports from our components so that we are able to use them in our parent container (App).

In the return statement, we have one parent element which is the div element.

The div element is encapsulating all our components, Navigation, Button and Footer to render them on the page.

As you can see, the Button component is taking in “text” and “bgColor” which are the Props we had set as parameters for our Button component to take.

When we change the values of bgColor to a valid colour name the background colour of the button changes according to the passed colour name. E.g we pass red

Here is what we have on the page

If we pass orange to the bgColor Button property like below.

We get the following screen.

We can reuse the Button component we created like shown below.

Here is what our page looks like

Here we have four buttons all coming from the Button component we created, due to the presence of Props we are able to alter the text that appears as well as the colour of our button component with ease.

NOTE:

We have one button component and the component reacts according to the value of the props we have given

Conclusion

I hope that this article has given you a better understanding as well as highlighted the importance of using Components in development with React.