The React Dev's Balancing Act: Harmonizing Diverse Technologies

When I create React apps, I feel that my code base looks a little messy. No, I'm not talking about having 100 lines of code for my function defs or spaghetti code with goto statements (y'all remember this one :), but having one JS file with a multitude of technologies used inside. Take the example below:

import React from 'react';

import { useQuery, gql } from '@apollo/client';

import styled from 'styled-components';

import ReactMarkdown from 'react-markdown';

import { ReactComponent as Logo } from '../assets/logo.svg';

const GET_DATA = gql`

query GetData {

data {

markdown

}

}

`;

const HeaderWrapper = styled.div`

display: flex;

align-items: center;

padding: 10px;

background-color: #f5f5f5;

`;

export const Header: React.FC = () => {

const { loading, error, data } = useQuery(GET_DATA);

if (loading) return <p>Loading...</p>;

if (error) return <p>Error :(</p>;

const markdownData: string = JSON.parse(data.data.markdown);

return (

<HeaderWrapper>

<Logo />

<ReactMarkdown source={markdownData} />

</HeaderWrapper>

);

};

In this code, it is using TypeScript, GraphQL, JSON, SVG, HTML, CSS, JavaScript and JSX. As devs, we need to understand how each technology can play nice with the others. We need to remember what rules for a specific tech will cause conflicts when used in a certain way and how to create work arounds to resolve these conflicts. Let's take another coding example where this is true.

return (

<>

{show && (<>

<div className={`box ${result}`}>

{children}

</div>

<button onClick={() => setShow(!show)}>Hide</button>

</>)}

</>

)

We all know that a React component must have 1 root element and it can be a fragment. All the other elements are children, grandchildren, etc. to the root element. Cool! That's the rule and the code snippet above has it. However, if you look at the conditional statement that follows the root element, you'll see that I had to define another root element if I want to render the component correctly. Therefore, if you run this code in the browser and view source, you will see two fragments that look like roots.

Luckily, we now have GitHub Copilot as our paired programmer. I have been using GitHub Copilot for around 5 months and I am sooooo loving this tool! I asked GitHub Copilot why did I have to code for 2 fragments and it gave me the answer below.

"The outer fragment doesn't 'count'...". That's a great way to say, yeah... you need to code a work around because there is a technology conflict somewhere.

Anyway, due to the increase complexity and more demanding service levels for web applications and websites, technologies need to be more specialized. However, this means that we dev people now have to juggle a lot more tech in one project. GitHub Copilot is a real big help to make sure that we dev have all these techs straight when using them together. It just takes experience playing with Copilot to get proficient with AI assisted programming. Yeah, I'm working on it!