The Basics of React
Hello, Codesigners 👋
This article is to share my React learnings and would be helpful if you have 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.
🤫 Psst! Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀
Table of contents
- Setting up for React
- Structure & Workflow
- What are
.tsx
,.ts
andmodules.scss
? index.ts
is entry point- Import & Export
- Anatomy of Chip component file
- Component names start with uppercase letters.
- What is different between <Link> of Next JS component and <a> tag of HTML?
- Use built-in components of Next.js
- Three important React concepts to remember: Props, States and Context
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
index.ts
is entry point
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 Link
component 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
📣 Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀
💌 Any feedback or challenge
I’d love to hear your thoughts or say hello 👋 :
• 🤜🤛 Connect with me on LinkedIn or X.
• 👏 Give me a clap if you liked this post.