Marina Yamaoto

Posted on Apr 19, 2021 • Edited on Apr 23, 2021

Why Designers Should Learn To React?

#design #react

Hi everyone.
If you are a designer, how do you work with front-end developers?
In this article, I will show you how to use react to solve the problems that arise between the designer and the front-end developer.

The process of creating a website

I work in the following order when creating websites for my company.

branding with the client. Determine the purpose of the website.
Create a design using design tools such as AdobeXD, Sketch, Figma. and get confirmation from the client. Create instructions for the design system, etc., and pass the design to the front-end developer.
The front-end developer reviews the code and implements it. Repeat design check.
production environment

I am mainly in charge of steps 1 and 2.
However, the most important part of the website, the coding part, is always under pressure due to deadlines, and if there is a problem with the design, the code becomes more complicated, or if there are design changes, it may take longer than usual.
In other words, there is a gap between the design part and the coding part of website production.
I believe that designers and front-end developers should always work together to solve problems.

The gap between designers and front-end developers

There is a gap between designers and front-end developers when creating websites.
How can we solve this problem?
First of all, there is no better way than communication between the designer and the front-end developer, and the designer's understanding of coding.

Understand React

At first, what is React?
React is a JavaScript library developed by Facebook for building UI parts on websites.

React distinction.
In React, the DOM (Document Object Model) operations for manipulating web pages use a virtual DOM to display the difference from the actual DOM, which makes it difficult to increase rendering costs even in large-scale development.

Also, React.js for web development and React Native for native application development are available, and one of the appealing features of React.js is that both web applications and native smartphone applications can be developed using almost the same writing style.

There are more basic distinctions from React official site.

Declarative.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.

Component-Based.
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere.
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

Tha’s its high levels of performance and development efficiency, This library is used all over the world, including Netflix, Airbnb, Wix, and Reddit.

Why designer should learn to React?

React is mainly for creating UI parts (components), and is said to be an effective framework for web applications that use a lot of buttons and text boxes.
A lot of designers must be using Atomic Design for their web and app designs. Atomic design is one way of thinking about design systems. They are similar to Atomic Design.
Components are the Atoms and Molecules of Atomic Design.
Because components can not have more than one element.
If designers know about the components, they can help close the gap by reducing the amount of redesign work involved in creating a design system.

A better understanding of React components

As mentioned earlier, React is a library of components. Every part can have its own state and data. For similar 　areas, only the data of the parts can be changed and reused many times.
In React, you can create components in several ways depending on their roles. The first thing to keep in mind is the following two components.

Class components

A class component is a classic method of defining components, using the class keyword to define components. A class component can have a state and lifecycle, which allows for flexible changes in content.

Function components

Function components are very simple, have no state, and have no control. It is just a placeholder that draws a specific fixed element according to the value passed to it. In short, it is just a "function".

Hmmmmm, sounds like class components are better than function components. because they can have a state. But function components can not have any state.
Don't worry, we have "Hooks"!

Hooks

A hook is a function that "hooks into" a function component with React features such as state and lifecycle. Hooks are a feature for using React without classes, so they do not work within classes.
Yay! Now we can use function components like class components!!

At last, what difference between class components and function components?

Pros of hooks

At first, coding will be clear.
Because hooks can make shorter code than classic components.
So it looks brevity and easy to read.

For Example,
this is class component that wrote a counter system.

class Example extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <>
       <p>You clicked {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click me
       </button>
     </>
   );
 }
}

Function component

import React, { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 return (
   <>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </>
 );
}

This function component is less than 6 line class component!

Cons of hooks

Components areas are different for each developer. So before you make components you have to communicate and find common ground with them.

should we use function components for everything?

The official site said you should use function components at first.
But depends on the situation. Hooks also have rules.

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.) Rules of Hooks

Material UI

At last, I'd like to introduce a popular React UI framework
"Material UI".
It is a UI component framework developed based on Google's Material Design.
There are a lot of component types so it helps make your design system faster.

Conclusion

Today, I show you "Why Designers Should Learn To React?".
Designers think that the designs they come up with work quickly and as a matter of course. But if you understood front-end development, you will realize what is the design problems in development. It will help the project going faster.
I'm happy if some designers are a bit interested in React by this article!
Happy Coding!

DEV Community