Forem: Jean Santana

Crafting extensible components with React

Jean Santana — Tue, 04 Jul 2023 12:00:36 +0000

Hello! I'm Jean. If you haven't heard of me, you're probably not alone - fame and I are like parallel lines, we never meet! I make a living as a software developer and moonlight as a tech philosopher when the mood strikes. It's been a year since my last article or in developer terms, roughly 500 cups of coffee ago. But, as they say, the code never sleeps! So I'm back with a new tutorial for you, let's take a look.

Often, we design components for a single application with well-defined behaviors, catering to specific functionalities via set props and functions. This works efficiently in many scenarios. However, consider a situation where a component is reusable across multiple front-ends, and these different interfaces sometimes require additional behaviors. What should our approach be? Should we fork the component inside each project and customize it accordingly? Although it's a possible method, it's not the most efficient, as it overlooks the inherent power of React components.

In this article, I'm going to guide you through the process of crafting extensible components, an approach that optimizes reusability without sacrificing the capacity for customization.

Consider a Blog component that includes a TitleSection, ContentSection, and CommentsSection. Each of these sections may have their unique default behavior, but there could be cases where we want to replace these with custom behavior or entirely different layouts without rewriting or altering the entire component. The concept of extensibility steps in here.

Let's first look at the structure of the Blog component.

interface Customizations {
  titleSlot?: React.ReactNode;
  contentSlot?: React.ReactNode;
  commentsSlot?: React.ReactNode;
  titleHandler?: () => void;
  contentHandler?: () => void;
  commentsHandler?: () => void;

}

interface BlogProps {
  customizations: Customizations;
}

Here, the Customizations interface is defined to accept optional ReactNode and handler functions for each section. This interface enables passing custom React components (slots) and custom handler functions, thus providing the component with extensibility.

Let's now create the Blog component.

// Component sections
function TitleSection({ onTitleChange }) {
  return (
    <div>
      <input type="text" onChange={(event) => onTitleChange(event.target.value)} placeholder="Enter Title" />
    </div>
  );
}

function ContentSection({ onContentChange }) {
  return (
    <div>
      <textarea onChange={(event) => onContentChange(event.target.value)} placeholder="Enter Content"></textarea>
    </div>
  );
}

function CommentsSection({ onComment }) {
  return (
    <div>
      <input type="text" onChange={(event) => onComment(event.target.value)} placeholder="Enter Comment" />
    </div>
  );
}

// Blog component
function Blog({ customizations }: BlogProps) {
  const {
    titleSlot,
    contentSlot,
    commentsSlot,
    titleHandler: customTitleHandler,
    contentHandler: customContentHandler,
    commentsHandler: customCommentsHandler,
    ...restProps
  } = customizations;

  const defaultTitleHandler = (newTitle) => {
    console.log(`New title is: ${newTitle}`);
    if (customTitleHandler) {
      customTitleHandler(newTitle);
    }
  };

  const defaultContentHandler = (newContent) => {
    console.log(`New content is: ${newContent}`);
    if (customContentHandler) {
      customContentHandler(newContent);
    }
  };

  const defaultCommentsHandler = (newComment) => {
    console.log(`New comment is: ${newComment}`);
    if (customCommentsHandler) {
      customCommentsHandler(newComment);
    }
  };

  return (
    <div {...restProps}>
      {titleSlot || <TitleSection onTitleChange={defaultTitleHandler} />}
      {contentSlot || <ContentSection onContentChange={defaultContentHandler} />}
      {commentsSlot || <CommentsSection onComment={defaultCommentsHandler} />}
    </div>
  );
}

In this example, when you type in the inputs of the TitleSection, ContentSection, or CommentsSection, it will trigger the respective handlers. If you pass custom handlers or custom sections to the Blog component, those will be used instead of the defaults.

Here's how to use this component with custom slots and handlers in the parent component:

import React from 'react';
import Blog, { Customizations } from 'path-to-blog-component-in-library';

function ParentComponent() {
  const customTitleHandler = (newTitle) => {
    console.log(`Custom title logic: ${newTitle}`);
  };

  const customContentHandler = (newContent) => {
    console.log(`Custom content logic: ${newContent}`);
  };

  const customCommentsHandler = (newComment) => {
    console.log(`Custom comment logic: ${newComment}`);
  };

  const customTitleSection = (
    <div>
      <h1>This is a custom title section</h1>
    </div>
  );

  const customContentSection = (
    <div>
      <p>This is a custom content section</p>
    </div>
  );

  const customCommentsSection = (
    <div>
      <p>This is a custom comments section</p>
    </div>
  );

  const customizations: Customizations = {
    titleHandler: customTitleHandler,
    contentHandler: customContentHandler,
    commentsHandler: customCommentsHandler,
    titleSlot: customTitleSection,
    contentSlot: customContentSection,
    commentsSlot: customCommentsSection,
    style: { background: 'lightgray' },
  };

  return <Blog customizations={customizations} />;
}

export default ParentComponent;

In this example, the customHandlers will log a message with the new title, content, or comment. The customSections simply display a message indicating they are custom sections.

The custom handlers will be used instead of the default ones if provided, and the custom sections will replace the default sections. The additional props like style will also be applied to the Blog component.

And there we have it - your quick guide to creating extensible React components. I hope you found this helpful, and that you're feeling ready to bring this into your own work. It's all about adaptability and efficiency in our ever-changing tech landscape.

Remember, coding is a journey of constant learning and creativity.

Ah, don't forget to read my most loved article:
The unfair tech hiring processes

See ya!

"Do not comment on your code, it should be self-documented". Well... I don't agree.

Jean Santana — Sun, 17 Apr 2022 19:03:41 +0000

Since I started write my first block of code, I heard from many developers that commenting is useless and it's a type of apology to write a bad code, but after working in a big projects with a big team, the only thing I can say is: Not commenting your code is narcisist and excludes beginners, by the way, who said your code is so good and obvious as you think it is? Yeah, your mind.

During your work, probably you faced a function that you asked yourself: "-What the hell is even that?". Many of us experienced this situation, even with our own code after some weeks far from the project. Now, imagine if instead of you have to waste your time, searching through the houndreds of files for the right function you need to put hands on, you could have just comment your code telling the function purpose, its params and what it should return. Life could be a dream, right?

Also, we cannot asume the everybody think like us and we are being so obvious. People have different ways to analyze things, we have people that are less experienced or even have mental health conditions like, anxiety and ADDH, and that makes the process of understand some pieces of code even harder. Should we just exclude them because we can't use one single minute to comment our complexity? I think we shouldn't.

The question is not about if you should comment your code or not, but is what you need to comment in your code and how it should be done.

Write a clean and easily readable code is unegotiable, and you get better on this with experience, but you can also write clean and good comments, so it can be used as a reference for you and the others, and it do not make you a bad programmer, on the contrary!, It makes you a better professional,your code will be easily maintainable, plus, you're ensuring that no matter the level of who enters on your team, they'll get it faster and start working on the project, and if you have to leave your job, the devs that comes after you will be grateful and thanks you everyday before they going to bed. (okay, I'm not so sure about this last part).

“Programs must be written for people to read and only incidentally for machines to execute.” - Hal Abelson - MIT Professor.

Recommended reads:
Best practices for writing code comments

What's the best way to document JavaScript?

Make it work first, split after. Creating components without pain in React

Jean Santana — Sun, 03 Apr 2022 19:11:37 +0000

Create components for your React app is one of the most extensive work you do when coding. Export, import, use props, check many components files at the same time, handle data, functions and so on.

If you're starting creating multiple component files at once and keeps opening them at the same time, you're punishing yourself unnecessarily.

These three points should be your mantra:

1- Have one single block of code and work on it until it works as you expect. So, implement functions, variables, hooks, libs, styles and all you need.

2- Identify the parts of the code that make sense to be a single component. (You can use the Athomic Design methodology to do it:
Read Atomic Design

3- Do not "over-split" your code.

Make it work first.

Before you think about create splitted components, you should focus on make the whole thing work.

I saw many devs creating components without even have clarity what props they should pass trough them and what should be a separate component or not, turning a simple task into a painful activity.

I'll show you what should be the best way to create components in React. (You can use this methodology with other frameworks)

I'll use a simple HTML table as example to make it easy for anyone.

Our main component file:

As you see above, we have a complete table with it's childrens (headers and rows), but what if we want to split it into small components?

We'll do not create any file now, we'll just focus on make everthing works as we expect.

Check the example below:

Now we have our small parts of our table separated on components but they're still on the same file, so we can debug and test our code with ease, without worry about imports and work with multiple files.

Let's finish our example, implementing our functions, props and data:

As you can see, now we have everything we need, so we can just create our component files and export the small parts of our table, import it on our main componet, and everything will work as it have been before the split.

Check it out:

--
If you like these types of article, do not forget to like, comment and follow me. This will give me the feedback I need to keep posting.

If you are starting as developer, read this.

Jean Santana — Sun, 03 Apr 2022 16:29:57 +0000

Before I start, I want to welcome you studant or junior dev, that has started in this wondeful area that for sure will change your life.

I know how you feel right now, I was there when I start too. Maybe you gave up so many times and keeps returning because you know you are capable to make it, and yes, YOU ARE!

Maybe you feel stressed, anxious, maybe you had many bad times thinking that your're not enough and this is not for you, but continue reading this and I'll tell you the secrets that I wish someone could have told me when I was starting.

Save this post to read anytime that you're feeling like loosing your way.

You do not need to be a genius, nerd, young or man to work with tech. If you love technology, if you like to solve problems, and have persistence, you have everything you need.
Do not waste your time trying to learn or memorize everything from a language, it will make you anxious and will make you feel like a looser because you'll not make it.
Focus on learn about how internet and mobile apps works, database types, requests and responses, api concepts, algorithm basis, like variables, functions and statements.
Do not waste your time watching hours and hours of courses, instead, make a basic algorithm course and chose any language to start (do not focus on it), download a code editor like VScode, take a coffee and DO CODE. Create something easy, make some loops, calculate your BMI, create a simple calculator, try to solve a simple problem.

-Each time you see your code running and doing what you told him to do, you'll feel great and it will give you the fuel you need to continue
.

5 . FAIL IS THE SECRET. Yes, you need to fail, and you'll. By failing you'll search for the "why" and you'll find the "because", and doing this you'll be teaching your brain to be a problem solver. This is what we (programmers, engineers, developers) are, Problem Solvers.

6 . Have patience. Do not try to learn everything, do everything, know about everything. I know that the some jobs is asking for an entire dev team to a Junior role, but listen to me... they do not know what they need! Many recruiters do a google search, take the most actual tech skills, languages and do a copy/paste on the job description. So, if you already have the concepts, have small projects on github that you're proud of... don't be afraid! Make a good CV, apply for the starter roles, talk about what you have done, show that you are a good learner and start to put your name on this world as a developer.

-But I do not know so much things, I'll not get a job or I'll be fired soon as they see it.

Let me tell you something... 90% of what you'll learn will be on your job, you'll be faced with tasks that will challenge you, so you'll search for solution, you'll read the docs, you'll have help from seniors, Stackoverflow will save you many times, and at the end you'll find yourself as an experienced developer, working with the most cool projects and companies, and the most important... Living Your Dreams.

Do not give up! Your future is the result of what you learned yesterday and what you're doing today.

The unfair tech hiring processes (a senior dev perspective)

Jean Santana — Fri, 01 Apr 2022 16:36:14 +0000

Recently I did some interviews for companies that call themselves "human focused", but in the time they need to show their humanity and respect they just forget it.

I do understand that in this market we have a lot of dev that are "underqualified" but we too have a lot of jobs that are "overspecified", so we both have problems.

When a company ask a developer to make a live code in 30 minutes of unexpected problem, as a developer you have 90% of chance to fail, not because you can't do what they asking you, but because of the external enviroment, like, engineers watching you, anxiety, impostor sydrom, and much more.

Interviwer: Hi, please share your screen... So... this is the challenge, we expect you finish in 30 minutes, you can start when you're ready.

Developer starts working and see himself being anayzed by two engineers seeing each keystroke he makes, he wants the job, the anxiety starts, the code don't run, the mind get blank and... he fail.

Interviwer: Okay, I think we can stop here. I think you are not qualified for what we want, we expect someone fluent on this, and you're not prepared, maybe in the future. Good Luck, bye.

Now I ask you, fellow devs... Is this fair? Your experience and skills just being throw on trash by a company, just because you can't acomplish something in a stressfull enviroment in 30 minutes? Something that in a daily work situation you could have done it without problems. I find it at least disrespectful.

If you are a tech recruiter, I'll tell you what could be a better (and the right) way of doing an interview.

Put the Tech Lead or engineer to talk with the candidate, and ask questions about his experiences, it will give you about 50% you need to know.
Ask him to show you some project that he's proud of, and ask questions based on it. "The candidate will love tell you about it".
Send home-tests AWAYS based on the experience that the role REALLY needs or based on the candidate experience with at least 2 days to finish. (not a computer science algorithm to calculate the air volume of earth).
Finally, be human. Humans have depression, anxiety, stressful days, humans forget things, humans fail. These types of stressful hiring process can never judge the talent and experience of a professional.

My name is Jean, I'm a senior full-stack developer. I code, I manage, I design, I create, I help the team, but... I'm not perfect! I fail, I still have so much to learn, and... I'M NOT A ROBOT. If your company need a "thing", that code anything besides any human and external enviroment problems in less than 30 minutes, make a bot yourself, or hire me to make it for you.

Being a Dev with ADHD

Jean Santana — Mon, 28 Jun 2021 12:52:09 +0000

Probably many of you here suffer with the ADHD condition, and many of you here don't. Share this maybe make others feel more comfortable and make you that maybe work with a ADHD colegue or manage a Dev that have it, understand how is our day.

Live with ADHD is not easy... You feel lost, you forget your tasks, you don't understand what you have to do, you don't find the best solution, your code sucks, you don't want work, you procrastinate, you give up.Yes, it's a mess... And it can even get worse when you work remotely.

Focus is not the only monster that you have to fight when you are a Dev with ADHD. You still have to deal with not understand simple things of the language or framework, even if you try your best, you still don't understand and this can make you feel dumb, even you know you're not and you are a good developer.

The sensation of losing yourself can make you feel like you are an impostor, that you can't do what you do,that everybody is better than you, that you will lose your job and will not achieve your goals in life, and yet, you have to try make others understand that is not all your fault.

Only who have ADHD knows how being alive feels so bad sometimes. It can even lead you to a depressive condition, and you still try, take your pills and go fight for your place on this earth.

Do you have ADHD?
Do you work with someone that have it?
Do you manage someone with ADHD?

Leave in the comments your experience.

"Sorry if I make some English mistake, it's not my native language."

ReactJS: Component everything or not?

Jean Santana — Wed, 22 Jul 2020 03:15:21 +0000

Hey devs! Since I started learn ReactJS some questions don't let me sleep. When we should create components?
We should component everything or only if we will use it again in future? What is not a good practice put inside App.js?

Sometimes I put a entire Form inside App.js and I don't know if it is a good practice when use React.

Let me know what you think.

ReactJS - tiny projects #1

Jean Santana — Wed, 15 Jul 2020 19:37:12 +0000

I made this pricing page in ReactJS for study!
Tell me what you think :)
Follow-me on Github for this and next projects.
Github: https://github.com/JSsantana
Project: https://codesandbox.io/s/github/JSsantana/react-pricing-page