Functions as User Interface

Hi, y'all. ✨

My journey in the tech world has been filled with countless lines of code, numerous tools, and multiple languages. I have experience with JavaScript, ReactJS, CraftCMS, Twig, and a few more. As a woman in tech, I understand the challenges of this field. I am dedicated to sharing my knowledge and experiences to help others like me grow and thrive. Let's get started and become experts together!

Functions as UI

In React, functions can be used to define UI components. This allows you to create reusable and modular pieces of your user interface. To illustrate this concept, let's build a simple React component that displays the text "Hello, Khadija."

In standard HTML, we write something like below to display a message:

<h1>Hello JavaScript</h1>

This works fine for static content. right? isn't it? But what if we want to change the message dynamically based on user interaction or some other logic? That’s where React and JavaScript functions come into play.

First, we will create a function component named App. This component will use another function, getLanguage, to get the text "Khadija" and display it within an <h1> element.

import React from 'react';

const Message = () => {
// Without return, the function would return undefined.
  return "Khadija";  }

const App = () => {
  const getName = Message();
  return (
    <div>
      <h1>Hello, {getName}</h1>
    </div>
  );
}

export default App;

In this code snippet, we defined a simple React component called App that uses a function Message to return the string "Khadija". This string is then displayed inside an h1 tag in our component.

By using functions in this way, we can make our UI more dynamic and responsive to changes in data or state. It allows us to create interactive and responsive applications with ease. This example demonstrates how we can use a simple function to dynamically update the content of our components.

Thank you for following along & Happy coding! 💻

The next part is coming soon.📝