Forem: Franca

React children 👶 💭 – why, when, how

Franca — Wed, 10 Feb 2021 15:52:24 +0000

Use Case

React is great for building reusable components. Components often come in multiple variations – most of the time we can pass props to the component and all good.

<Button color="red" text="Click me!" />

However, what if we build a component that doesn’t only change in style but also contains different JSX? This is often the case with complex, nested components like accordions, carousels and tabs or buttons with text and icon.

To keep it simple, imagine a <Post /> component for a blog post. All posts look alike but vary in content.

The plain Post component could look like this:

// Post.js
export const Post = () => {
  return (
    <section>
      <div>...Post content here...</div>
    </section>
  );
};

To use Post in App.js , it's possible to create a property, e.g. content that contains all kind of JSX like this:

// App.js
<Post content={
  <>
    <h1>My first Post</h1>
    <p>Some intro text</p>
    <p>A paragaph</p>
  </>
}/>

Note: the empty <> tag is a Fragment.

See the CodeSandbox example here.

It’s just that this solution doesn’t look simple and clean. It’s not that we want to pass certain properties to the component, it’s more that we want to define what’s inside. In this case, use React children!

React Children In Action 👶

You don’t pass children like a property, you place it inside the component tags as if you'd write plain old HTML.

// App.js
<Post>
  <h1>My first Post</h1>
  <p>Some intro text</p>
  <p>A paragaph</p>
</Post>

This looks so much better! It feels like writing HTML with superpowers! ✨

You created your own component <Post> and filled it with JSX tags. You can insert custom React components as well!

But – we have to tweak the component itself a little. At the moment, the Post component looks like this:

// Post.js
export const Post = () => { ... }

As children are special properties, you don’t have to declare them when using the component, but you have to tell the component itself that children are welcome. The word children is a special word in the React world with a set meaning like function or const.

// Post.js
export const Post = ({children}) => { ... }

In the next step, you have to define the children's location inside the component’s JSX structure:

// Post.js
export const Post = ({ children }) => {
  return (
    <section>
      ...
      <div>{children}</div>
      ...
    </section>
  );
};

See the CodeSandbox example here

⚠️ Caution

Only use children if you can’t control the component’s content. If you know that a component is always going to be based on the same JSX structure, it’s better to pass string props for the heading, etc. Be as strict as possible.

Also, don’t try to style the children. Don’t do this:

// App.js
<Post>
  <h1 className="post__heading">My first Post</h1>
  <p>Some intro text</p>
  <p>A paragaph</p>
</Post>

You don’t have a place to define that CSS class.

There are several options in this case:

1. Create Smaller Components

If the heading is used universally, you could create a Heading component:

// App.js
<Post>
  <Heading>My first Post</Heading>
  <p>Some intro text</p>
  <p>A paragaph</p>
</Post>

2. Use Props Instead

If you want to use a special post__heading class, the Post component itself is the right place to do this. Just pass the heading as a normal prop.

// App.js
<Post heading="My first Post"> // Property
  <p>Some intro text</p> // Children
  <p>A paragaph</p> 
</Post>

// Post.js
export const Post = ({ heading, children }) => {
  return (
    <section>
      <div className="post">
        <h1 className="post__heading">{heading}</h1>
        {children}
      </div>
      <a>See all posts</a>
    </section>
  );
};

3. Split Component Into Smaller Functions

This is my advice if you want to style the children specifically and use more than one JSX tag.

// App.js
<Post heading="My first Post">
  <p>Some intro text</p>
  <p>A paragaph</p>
</Post>

// Post.js
const PostMain = ({ content }) => {
  return <div className="post__main">{content}</div>;
};

export const Post = ({ heading, children }) => {
  return (
    <section>
      <div className="post">
        <h1 className="post__heading">{heading}</h1>
        <PostMain content={children} />
      </div>
      <a>See all posts</a>
    </section>
  );
};

See it in action in this CodeSandbox

Advanced Case: Split Up Your Children

We can go even further and split our Post components into intro, main and outro 😎

// App.js
<Post heading="My first Post">
    <PostIntro>
      <p>Some intro text</p>
      <p>Intro paragaph</p>
    </PostIntro>
    <PostMain>
      ...
    </PostMain>
    <PostOutro>
      ...
    </PostOutro>
</Post>

PostIntro, PostMain and PostOutro are small, separate components that can be used as children inside the Post component.

// Post.js
export const PostIntro = ({ children }) => {
  return <div className="post__intro">{children}</div>;
};

export const PostMain = ({ children }) => {
  return <div className="post__main">{children}</div>;
};

export const PostOutro = ({ children }) => {
  return (
    <div className="post__outro">
      {children}
      <a>See all posts</a>
    </div>
  );
};

export const Post = ({ heading, children }) => {
  return (
    <section>
      <div className="post">
        <h1 className="post__heading">{heading}</h1>
        {children}
      </div>
    </section>
  );
};

The Post component itself is "stupid" and doesn't know which children will be passed. This is a simple example, but if your components contain a lot of logic and/or JSX, this is a way to separate concerns.

See the finished example here – feel free to fork and play with it!

Linklist

Modern React: props for Functional Components

Franca — Fri, 15 Jan 2021 15:33:05 +0000

Most websites have recurrent design elements. As a developer, it saves you time and effort to build reusable code snippets for these elements. They are called components and React is perfect for creating them.

Note: For this article, I assume that you are familiar with basic React concepts.

Level 1: A reusable component

Imagine your website has cats all over the place.🐱🐱
Let’s build a Cat component:

// Cat.js
const Cat = () => <div className="cat">🐱</div>

Note: Inside the div we would write our cat JSX.

Let’s look at the code a little closer. There’s no class, because this is a functional component, a modern way to write React. The function is written as an array function, a longer version would be:

// Cat.js
function Cat() {
  return <div className="cat">🐱</div>
}

We can use our component anywhere we want:

// App.js
<Cat />

If we want to change the cat, we only have to change it once in Cat.js and it will be applied everywhere. That’s the idea of components.

Level 2: An adaptive component

Your Cats are fine. But you dream of a website full of different sorts of cats. A first idea might be to create more cat components:

const Cat = () => ...
const ShorthairCat = () => ...
const BengalCat = () => ...
const PersianCat = () => ...

Since the cats only differ in CSS, that’s a lot of JSX repetition. And what’s about your original Cat component? Change every existing <Cat /> in something more descriptive?

The solution: React properties

As all our cats share the same JSX, we can use our Cat component and modify it a little. It would be convenient to specify which type of cat we want when using it:

// App.js
<Cat type="shorthair" />
<Cat type="persian" />

type is a React property we defined ourselves.
It’s inside the JSX tag as would be an attribute in HTML:

<a href="#">link</a>

The href attribute in a specifies the link’s target.
The JSX property specifies the cat’s type: I don’t just want any cat, I want the shorthair cat.

We added a property, but haven’t defined it inside the Cat component yet. As for now, React still doesn’t know what’s so special about the persian type cat.

First, we have to add an invitation for properties in our component. We’ll use JS object restructuring here to be able to specify exactly what we can use as an argument.

// Cat.js
const Cat = ({type}) => <div className="cat">🐱</div>

We now registered that a cat type can be passed to the component.

If we want to display the shorthair cat, we can pass the property typewith the value shorthair:

// App.js
<Cat type="shorthair" />

We registered typeas a valid property. If we log the type, we get the desired value.

// Cat.js
const Cat = ({type}) => {
  console.log(type); // shorthair
  return <div className="cat">🐱</div>
}

Now, the fun begins. We have to add our shorthair cat’s styling. There are several possibilities to do this – a simple solution is to add a modifier class to be able to define the shorthair cat’s styling in our CSS file. In the end, our HTML result loos like this:

<!-- In the browser -->
<div class="cat cat--shorthair">🐱</div>

Every cat has the class cat, but if a type is added we want this type to be an additional modifier class.
To be able to do this, we need to prepare the class to change according to the passed type. With JS template literals, we can add variables to strings. With the ternary operator, we can provide the fallback if no type gets passed.

// Cat.js
const Cat = ({type}) => {
  return (
    <div className={`cat ${type ? `cat--${type}` : ""}`}>
      🐱
    </div>
  );
};

Note: I recommend the React classnames package which makes dynamic classes much more readable.

If we want to pass multiple properties, we can do this as follows:

// App.js
<Cat type="shorthair" name="Leo" />

// Cat.js
const Cat = ({type, name}) => {
  return (
    <div className={`cat ${type ? `cat--${type}` : ""}`}>
      Cat {name} 🐱
    </div>
  );
};

Now it’s your time to try it out. I’ve built a CodeSandbox for you to fork 👇

Linklist

React-specific

Functional Component
Array function
React logical && operator for conditional rendering
Object destructuring for React props (second example)

Modern JS

Don't Interchange Margin and Padding

Franca — Fri, 13 Nov 2020 17:22:54 +0000

Spacing is one of the core elements of design. It’s something every designer learns early on: Add whitespace. Elements need air to breathe.

As a consequence, I add CSS margins and paddings every day. It’s a magical feeling to see a button come to life with a little ~~margin~~ padding.

It’s one line of CSS that calms the eye immediately.

Everything’s great, CSS is for babies anyway

For a long time, I didn’t really care too much about the differences between margin and padding. Nevertheless, I noticed these basic rules:

padding

An element with a background color or border needs whitespace inside

margin

An element needs air to breathe outside of its body

I applied margins as external properties, padding for introspective. It made sense for me. But often, I couldn’t find a rule and randomly used one of them.

The point where I got confused

One of the cases I struggled with was headlines. Headlines and text often need a good amount of spacing between them. <h1> comes with a default margin, which never seemed to help me in any way.

margin-top: 0.67em; margin-bottom: 0.67em; 🤔

Usually, I would remove this margin (which seemed arbitrarily to me) and applied my own padding-bottom, so it would fit the design perfectly.

Satisfied with the outcome, I would go on. Eventually, when CMS content got in, I noticed a slightly larger spacing between headline and text. Dammit, these stupid default margins! All the paragraphs have them as well!

margin-top: 1em; margin-bottom: 1em; 🤨

What did I do?
I wanted to maintain the spacing between two paragraphs, but not the first one. So I removed it with p:first-of-type. Now, the spacing would sit fine at least. Sigh.

This approach is against the natural behavior of CSS. There’s a reason these elements have default margins – and not paddings. Don't fight it.

Use margins to your advantage!

The key understanding here is to really let sink in what it means that margins can collapse. I read it a lot of times but I never saw the advantage over paddings. But in reality, margins are really powerful and clever! Margins can communicate with each other. They shine when combined. Paddings, on the contrary, are stubborn cats that never change. And sometimes, this is exactly the behavior we want.

This is extremely helpful when building a design system or generally using a component-based approach, e.g. React or Vue.

Imagine a complete component, having padding top and bottom. Now, a second component gets stacked beneath it, containing padding as well. There will be a big gap between the two, too big.

If you use margins instead, only the biggest margin will be applied.

This is true for text layouts as well. Instead of using paddings on typography tags, use margins. If the default margin is too small, overwrite it with a bigger margin. The headings’ margin-bottom and the paragraph’s margin-top won’t add up anymore but instead, flow into each other nicely.

Because HTML was invented for academic papers, it was useful to provide some tags with default styling. Even without any CSS, texts with semantic HTML is still readable. So don’t get angry with the default browser stylings, we have them for a reason! ♥️

For a deeper dive into margins, there's a blog post by Josh Comeau who explained it perfectly.

Hands-on HTML and Why All Programming Languages Look So Cryptic

Franca — Fri, 08 May 2020 15:38:43 +0000

Computers need rules

Computers can read, it's called parsing. They read one character after another, like H-e-l-l-o. It looks like an elementary student. Most of us have learned reading by hiding the following letters with some piece of paper to not get confused, slowly uncovering letter by letter.

We don't want the computer to read everything in the same intonation – there should be headlines, paragraphs, important sections. Even the driest paper needs a line break at some point.

The HTML language concept

HTML isn't about the looks of a website, but it helps to structure it, prioritize, divide content into sections.

To be able to do this, HTML's inventor Tim picked special characters which normally don't occur in texts: angle brackets. Symbols which immediately shut out the non-programmer.

I still remember looking at HTML for the first time and it felt just wrong. Being a designer, it didn't look visually pleasing. It looked scary, not human-readable. It felt like looking at something that I was not supposed to see, almost like looking at organs inside a human body, which is not far away from the truth.

<p>Click <a href="#" target="blank">here</a></p>

So, why do we need these scary brackets again? To section the content. The browser won't read the brackets as normal text. On the contrary, it will stop and look carefully at the character. For everything the computer isn't supposed to just display but to interpret, we need special symbols and keywords. This is the reason for all programming languages looking like somebody just randomly pounded on the keys...

Rules for the browser #1

normal letters: continue reading
numbers: continue reading
angle bracket: STOP!!

It would look like this:

Hello bla bla bla < Oh! Hold on. That's a special character. We aren't supposed to read this out loud.

Rules for the browser #2

special character < : Don't read it, start listening.
special character > : Ok, continue reading...

Let's try to add a heading to our text.

Bla bla bla <Now a heading, please> My glorious heading ✨

The browser doesn't really understand English, it reads the characters bluntly one by one. But it knows that angle brackets do have a special meaning and it is not supposed to display them on the page.

Tim had to think about what to write inside the brackets. How could we label a heading? He decided on h1 for an important heading: h for heading and 1 for important.

The three puzzle pieces of HTML

It's always the same:

open the bracket <
add the abbreviation for the content h1
close the bracket >

The brackets hug the content. You always need them both. It's like a little family: 👩‍👩‍👧

Bla bla bla <h1> My glorious heading ✨

<h1> won't be read out loud, only what follows afterward.

That's very short. Tim, as every smart person, loves abbreviations. His train of thought is so complex that it needs quick tools in order to not forget his thoughts.

For people that know the English language (like Tim), h1 is simple to remember. Others have to get used to the fact that the world of programming is based on the English language and western culture. But we can still shape the future, my friends!

Let's look at our heading again. If we continue writing, everything after h1 will be part of the heading – that's what we told the browser.

Look at the black and white rectangle below. It's a small website preview.

On the left side, you see the HTML. It's the representation of a .html document.
On the right side, you find the visual result which is displayed by the browser. It's like an opened .html document.

We don't want the paragraph to belong to the heading. Our heading should look more like this:

Bla bla bla <h1> My glorious heading ✨ <Ok, now STOP IT!> This is a paragraph again.

You have to tell the browser in some way to stop thinking everything that follows should be read the same way. Like a good story, it needs a beginning and an end.

Almost done! The last step to write valid HTML

As always, the end needed to be nice and short. Tim had the idea to use h1 again, but this time with a slash /:

These brackets and the abbreviations inside it are called tags. Don't get confused with the tags on Instagram. <h1> is the OG tag, my friend.

Every tag consists of 3 elements, remember the family. 👩‍👩‍👧
To create a heading, you need two of them:

The opening tag <h1>
The closing tag </h1>

Inside these two tags, you add the content. Look at the result:

Here's a flock of sheep. The sheep is our content. They graze inside a fence, which has an entry and an exit. You always need both: entry and exit.

Tags are not visible on websites but they are all over the place. Everything you read is put into tags that get interpreted by the browser.

Silent instructions to the browser how to display our websites.

But, as said before, secret writing. There are many tags: paragraphs, quotes, line breaks and so much more. The browser obediently reads them all.

A heading with a paragraph would look like this:

<h1>My glorious heading ✨</h1>
<p>I don't know what I'm doing here</p>

Here's a new tag, the <p>, which stands for paragraph. We use it all the time.

In my previous article, we learned about HTML meaning HyperText Markup Language. Every language that consists of tags is called Markup Language. HTML is not the only one, for example in React you need XML.

Now it's your turn! 💪🏽

You can practice below, simply add something! ↓
Click "Edit on Codepen" in the top right corner. You don't need an account to edit.

Interesting links about this topic

An introduction to markup languages
https://www.lifewire.com/what-are-markup-languages-3468655

Who is Tim?
https://www.britannica.com/biography/Tim-Berners-Lee

HTML intro at Mozilla Web Docs
https://developer.mozilla.org/en-US/docs/Web/HTML

If you have any questions or feedback, feel free to comment! 💙

The Internet's Most Important Language

Franca — Fri, 08 May 2020 12:23:18 +0000

Don't know much about HTML? Here's a starter.

Think of a cake. There are some basic ingredients you need – eggs, milk, flour. You mix everything, put it into a baking tin, place it in the oven. I don't know what's happening inside, but in the end, you get a tasty cake.

In reality, cooking is a process that begins way before the supermarket. Somebody produces the butter, the flour, feeds the chicken. We buy these ready to use products and prepare our food.

Nobody codes a website from beginning to end these days. We take products from shelves just like in the supermarket. In a digital oven, our code will get transformed in a mysterious way until others can see our website. You can even use a platform like Wordpress which is even easier.

Although baking for several years, only recently I became interested in the basics of ingredients. What happens before I buy them? I finally understood the word "buttermilk" when I made some butter myself. Oh my, that took a long time.

Chances are high that you spend a lot of time on the web, especially at this point in time. Maybe you upload content as well. Of course, nobody has to code anymore to do this, you can simply get yourself an account on a platform and start. Even if you're not familiar with code or just began to dive into the code world, you may be curious how web pages are constructed at their core. Maybe you'll experience an aha moment just like me. Let's go!

The Tower of Babel

File formats are annoying for every one of us. A .doc file can only be opened by a program like Word. Only Word can understand what's inside the file. To our mail program, it's pure gibberish. When Word gets a .doc file, it thinks: Thank god. FINALLY someone I can understand. Totally HATE this rubbish .pdf and .mp3 files populating the desktop of this stupid person.

For opening Websites, you need a different program: Firefox or something similar.

Firefox is a program, like Word.

For this program, everybody knows the term browser. The browser can read special files. Not .doc files, of course. But what kind of files exactly?

In the end, websites are only files.

Actually, there are files with a .html extension. If you click on one of those files, the Browser will open just like Word will open for .doc files.

An .html file is the base of every(!) website.

Keep in mind that these files don't exist on your computer, but on servers (big computers). That's why you haven't seen any files with this extension. They are sent to you via the internet as soon as you type the website's name in the address bar. You are basically telling the internet: give me the file of this website! That's why your browser has to be connected to the internet and Word doesn't.

HTML is the old internet grandma

HTML is really basic website stuff. It's holding everything together. Nonetheless, nobody cares. It's there, don't care, old dinosaur.
We call a document with an .html extension an HTML document. HTML stands for HyperText Markup Language. What does this mean? It's a document written in a language that can be understood by a browser. But what's meant with language?

HTML is a language.

If you want to create a layout in Word, it provides you with a visual interface that you can interact with: buttons, menus, windows. What you see when opening Word is called graphical user interface (GUI).

I didn't know what other programmers meant with GUI for the longest time, haha.

Developers distinguish themselves from the common mob by using programs without a graphical user interface. It's very important to only use black obscure windows with unreadable small cryptic text. Only then, you're a real programmer.

Just kidding. It's not Matrix out there. But back to HTML.

You create an HTML document without a graphical user interface. Not by drag and drop or selecting stuff, but by writing what you wanna do. You program the document, literally. It's the highest level of freedom, congratulations! You write the language which can be understood by the browser manually. You are communicating with machines.

Tip: never start talking more to machines than to humans.

HTML is not a programming language, developers always emphasize this quite clearly. But even if it's not a programming language, it still consists of cryptic characters, incomprehensible for most of us.

<p>Click <a href="#" target="blank">here</a></p>

HTML consists of many brackets, as you can see. Most people will be scared off by this, except the French. Their quotation marks look similar.

Brackets played a big role in my teenage years. Imported from Japan, they were the first opportunity to express emotions visually, without describing them in words: ^^ >.< >_< ...
Our parents laughed at us, but look at them now: using smileys way too much! The brackets < and > are called angle brackets, used in mathematics as well. But don't worry – this word will never appear again in this text!

A short journey to... Switzerland!🇨🇭

The internet and with it HTML was invented by scientists, mainly from a clever person named Tim, who wanted to share his papers more easily. A common person would think: Well, it will never be possible to show my fancy new paper to my scientist friends all over the world in seconds. What a shame. But Tim was really smart and invented the Internet and started, as an aside, a new era and we are all now addicted.

Of course, Tim didn't think his idea would blow up this much, because then he would have thought of a more beautiful way to write HTML. Well, now we have angle brackets that don't compare anything or less describe emotional states.

In the next article, we'll explore HTML in a much more practical way.

Interesting links about this topic

Who is Tim?
https://www.britannica.com/biography/Tim-Berners-Lee

A short history of the web
https://home.cern/science/computing/birth-web/short-history-web

HTML intro at Mozilla Web Docs
https://developer.mozilla.org/en-US/docs/Web/HTML

Basic cake recipe (german)
https://www.chefkoch.de/rezepte/773171180182809/Grundrezept-fuer-Kuchen-und-Muffins.html

By the way: since this is my first article, please give me some feedback! 💙