Hello, Codesigners 👋

This article is to share my React learnings and would be helpful if you are just started learning React and trying to understand how React works (e.g., for designers working with React engineers or someone who just started learning React), especially with Next.js.

Why am I learning React as a designer?

As we can see from the 2022 developer Survey above, React is one of the most popular frameworks and React is one of the core frameworks in many companies. That means, as a designer, there are many possibilities that you will come across React when working with engineers. So understanding React can give us many benefits when working on component-based design.

Setting up for React

You can quickly play with React without any installation/configuration from those online playgrounds.

🛝 CodeSandbox, Stackblitz or Codepen

Structure & Workflow

When I started learning React, I was so confused with how HTML, CSS (SASS), and React are organized altogether and connected to each other.

With pure JavaScript, the structure with HTML, CSS and JS was clear to me because those three languages were written physically separately in the different file structures. Below is the way I usually organized them.

But for React, this is the way I learnt how React is normally structured.

Between pure JS and React, the below is something I usually remember and configure differently.

Below is the visual representation of how React is structured.

What are .tsx, .ts and modules.scss?

Let’s see what those file extensions stand for.

• JSX allows us to write (like) HTML in React components.
• TypeScript ( .tsx, .ts) is a strongly typed programming language that builds on JavaScript.
• CSS Modules are for all class names and animation names scoped locally by default.

If you want to get more information, check out the below links.

📚 React & TypeScript

📚 CSS Modules resources

When the browser reads files in the folder, it automatically finds the file named index at first and reads it.

Usually, the HTML file ( index.html ) is used as an entry point in pure JavaScript, but React uses a JavaScript file ( index.ts ) as an entry point.

I made an index.ts file in each components folder as an entry point. It makes the code easier to read when importing. See the comparison below. This is my personal preference so choose whichever way you like and stick with it. 🤗

Here is the code example of the index.ts file for the Chip component.

import Chip from './Chip';

export default Chip;

Import & Export

When we write React code, we use import and export syntax (ES Module) in almost all react files (.tsx, .ts) to composite components.

I was not familiar with this design pattern at the beginning but I’m getting used to it. 😅

Anatomy of Chip component file

The very first time when I saw React code, I was quite confused about what are HTML elements and what are Javascript functions.

For a simpler example, I took some screenshots of the Chip component and separated it into three languages, JSX (HTML), CSS and React (JS).

Component names start with uppercase letters.

The common practice is that React component names start with an uppercase letter whereas HTML tags start with a lowercase letter.

What is different between <Link> of Next JS component and <a> tag of HTML?

When we use a Link component in Next.js, Next.js takes care of re-rendering with the link so only a certain part is re-rendered rather than reloading the entire page which is how <a> tag in HTML usually works without any JavaScript intervention. It makes rendering a website so fast.

Use built-in components of Next.js

Next.js has many built-in components. Let’s import a Linkcomponent from Next.js like the below image.

Read more about Next.js documentation below.

Three important React concepts to remember

• Props
• States
• Context

Props (Properties)

Props in React are data, an association between a name (or key) and a value, and passed to components to create different UI. We can name Props as we want and the property’s value can be a function.

// App

import Chip from './Chip';

export default function App() {
  return (
     <Chip color="selected"></Chip>
  );
}

// Chip

import classNames from 'classnames';
import styles from './Chip.module.scss';

interface ChipProps {
  color: string;
}

export default function Chip({color = 'default'}: ChipProps) {
  const classList = classNames({
    [styles['chip']]: true,
    [styles[`chip--${color}`]]: true,
  });

  return (
     <div color={classList}>...</div>
  );
}

// Chip.module.scss

.chip {
  border: 1px solid transparent;
}

.chip--default {
  color: white;
  border-color: white;
}

.chip--selected {
  color: pink;
  border-color: pink;
}

For example, we could send different colour data to the Chip component from the example above and we could display different styles depending on the color value by setting a different classname.

If we make the chip component as a design system, we can reuse (import) it anywhere we want, such as in different products.

I omitted the CSS module code here in the above infographic. If you wanted to see the CSS, check it out from the React structure infographic above.

States

The ultimate goal of React is to print UI (data) on the screen more efficiently and quickly. React changes (re-renders) the UI automatically using state. If you want to know more details about states, check out the below links.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. — Reactjs

Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level. –Reactjs

This is the way how I started with React.

🎈 That’s all for now

💌 Any feedback or challenge

I would love to hear your feedback on how I can make this article better for you. Please leave me a comment below or Twitter.

I will be back soon with the article React for Beginners. At the moment, I’m learning React to understand how developers work. Please stay tuned and gives me loves(👏) if you liked it. Thank you. 😃