DEV Community: Nourdine Labib

React Best Practices - Ways To Write Better Code in 2022

Nourdine Labib — Wed, 13 Apr 2022 03:34:52 +0000

Writing Code that is clean, scalable and easy to maintain, is the dream of every programmer, this ability separates a good programmer from a great programmer, The cool part is that there's always something to learn and to improve on, So you must be alert to tune with the React Best Practices.

folder-structure

A good folder structure depends on the size of your application and your team. So there's no general answer to that. Especially because this is a highly opinionated topic and depends also on personal preferences.

Having a clean folder structure when planning or starting your application can make a huge difference on the long run.

There is two main points you should follow when structuring your project, Avoid too much nesting, Don't over-engineer it.

└── /src
  ├── /assets - Contains static assets such as  images, svgs, company logo etc.
  ├── /components - reusable components like navigation bar, buttons, forms
  ├── /store - redux store
  ├── /utils - utilities, helpers, constants.
  ├── /views/pages - majority of the app pages would be here
  ├── index.js
  └── App.js

Code Structure

There's basically no defined structure, but you should have a style to follow throughout the codebase like:

Maintain a structured import order

Make sure all your imports statements are on new lines, as this will make your imports clean and easy to understand for all the components, third-party libraries, etc.

double quotes (" ") or single quotes (' ')

It's easy to get confused about whether to use double quotes (" ") or single quotes (' ') while working with React. The simple answer is: maintain consistency whatever you're using.

Divide the whole app into small components

Dividing the whole app into small components and then working on it on a separate file is a good practice to maintain clean code.

Follow common naming conventions

The meaning behind naming conventions is to easily recognize what type of element you're dealing with and to have something in your code that is common in the community.

Name your file the same as the React component inside that file For example:

❌announcement-bar.jsx

✔️AnnouncementBar.jsx

Use well-descriptive names for your variables so that even a third party or new developer can easily understand you code.

❌

   const message = "Good afternoon, Mr. Jhon";
   const wm = "Good afternoon, Mr. Jhon";
   const m = "Good afternoon, Mr. Jhon";

✔️

   const welcomeMessage = "Good afternoon, Mr. Jhon";

Avoid Repetitive Code

If you notice you are writing duplicated code, convert it into components that can be reused.

Use Object Destructuring For Props

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

❌

  const Button = (props) => {
    return <button disabled={props.isDisabled}>{props.text}</button>;
  };

✔️

  const Button = ({ text, isDisabled }) => {
    return <button disabled={isDisabled}>{text}</button>;
  };

Use a linter

A linter basically observes the JavaScript code you're writing and reminds you of errors you'd more likely catch when executing the code.

When you're using create-react-app, there's already ESLint configured, but you can also set it up completely on your own or extend the rules of a pre-configured ruleset.

Extract reusable logic into custom hooks

Hooks allow us to reuse stateful logic without changing our component hierarchy.

Whenever you find yourself in a situation where you have to reuse the same stateful logic that is already used in another functional component, that's a great time to create a custom hook. Inside it you encapsulate the logic and just have to call the hook as a function inside your components.

Write a fragment when a div is not needed

A React component can only render one single HTML tag at its root. So if you'd like to render two adjacent elements, you need to wrap them in another element.

for example we wrap the <h1> and the <p> in a <div> element, the issue with this approach is the usage of Unnecessary <div> elements.

❌

return (
  <div>
    <h1>Hello!</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio
      odio, tempor non ipsum et, aliquam pharetra urna.
    </p>
  </div>
);

The best way to wrap element in React is to use React fragment <React.Fragment> or the short syntax <></>

✔️

return (
  <>
    <h1>Hello!</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio
      odio, tempor non ipsum et, aliquam pharetra urna.
    </p>
  </>
);

Integrate Typescript

Using TypeScript has many upsides like static type checking, better code completion in your IDE (intellisense), improved developer experience, and catching type errors while you write the code.

There may be reasons you don't want to use TypeScript inside your React application, for example if your project is very small integrating TypeScript can be a waste of time.

Test your code

During the time you're writing tests you're already in the thinking process of how to organize your code in order to pass this test. For me this is always helpful because I recognize what pitfalls might arise and that I have to keep an eye on them.

Tests can also serve as a kind of documentation, because for a new developer who is new to the codebase it can be very helpful to understand the different parts of the software and how they're expected to work.

Always start writing your tests at the beginning of the project especially unit and integration tests, because writing thos tests late in the project can be difficult and takes more time.

Conclusion

Although React is somewhat flexible in terms of how you can use it, following specific practices will help you get the most out of your experience.

Just remember, it's always all about adapting what's useful for you. So, don't take it all for granted and think about what might be helpful in your situation. Then you can just add it to your own stack of best practices.

Also read:
How to Render a 3D Model of You in React Using Three.js
10 JavaScript One-Liners - Ways To Boost Your Productivity

My blog
My website
Find me on Upwork
Find me on twitter
Find me on linkedin
Find me on github

10 JavaScript One-Liners That Will Help You Improve Your Productivity

Nourdine Labib — Fri, 04 Mar 2022 11:45:11 +0000

There are over 10 million Javascript developers around the world and the numbers are increasing every day. Although JavaScript is more famous for its dynamic nature, it also has many other great features. In this blog, we will see 10 useful JavaScript one-liners that you should know to improve your productivity.

1. Generating a Random Number Within a Range

There are lots of cases where we need a random number to be generated within a range. The Math.random function can do the work for us to generate a random number, and then we can transform it to the range we want.

const max = 20;
const min = 10;

const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);

//output: 17
//output: 10

2. Reverse a String

There are a couple different ways to reverse a string. This is one of the most simple ones using the split(), reverse(), and join() methods.

const reverse = (str) => str.split("").reverse().join("");
const str = "hello world";

console.log(reverse(str));

// output: dlrow olleh

3. Generate a Random Hex Code

Does your application rely on random color generation? Look no further, the following snippet got you covered!

const color =
  "#" +
  Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, "0");

console.log(color);

//output: #ed19ed

4. Shuffle an Array

While using algorithms that require some degree of randomization, you will often find shuffling arrays quite a necessary skill, In JavaScript, we don’t have a module as python has random.shuffle() but still, there is a way to shuffle an array in just one line of code.

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log("array: ", arr);
console.log("shuffled array: ", shuffleArray(arr));

//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]

5. Scroll To Top/Scroll To Bottom

Beginners very often find themselves struggling with scrolling elements into view properly. The easiest way to scroll elements is to use the scrollIntoView method.

//Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" });

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" });

6. Check if Someone’s Using Dark Mode

If you want the content you display to respect the color scheme of the person using your website, JavaScript includes a way to detect whether someone is using dark mode so you can adjust colors accordingly.

const isDarkMode1 =
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;

// or if you like to use it as a function
const isDarkMode2 = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode1);
console.log(isDarkMode2());

//output:
// true
// true

7. Copy to Clipboard

Copying text to the clipboard is very useful and also a hard problem to solve. There are various solutions that you can find on the internet, but the one below can be one of the smallest and smartest solutions.

const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

8. Get the Number of Days Between Two Dates

When determining the age of a certain value (like a user’s account), you’ll have to calculate the number of days that have passed since a certain point.

const ageDays = (old, recent) =>
  Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + " Day(s)";

const firstDate = new Date("2021-06-10");
const secondDate = new Date("2022-03-03");

console.log(ageDays(firstDate, secondDate));

// output: 266 Day(s)

9. Get a Random Boolean

TheMath.random function in Javascript can be used to generate a random number between a range. To generate a random boolean we need to get random a number between 0 to 1, then we check whether it is above or below 0.5.

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());

// output: false

10. Check if the current user is on an Apple device

We can use navigator.platform to check the platform on which the browser is running.

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(navigator.platform);
console.log(isAppleDevice);

// output:
// Win32
// false

Note: The recommended alternative to this property is navigator.userAgentData.platform. However, navigator.userAgentData.platform is not yet supported by some major browsers, and the specification which defines it has not yet been adopted by any standards group (specifically, it is not part of any specification published by the W3C or WHATWG).

Also read: How to Use Three.js And React to Render a 3D Model of Your Self

My blog
My website
Find me on Upwork
Find me on twitter
Find me on linkedin
Find me on github

How to Use Three.js And React to Render a 3D Model of Your Self

Nourdine Labib — Fri, 04 Mar 2022 11:15:00 +0000

In this article, we’ll cover how to render and configure 3D assets created in a 3D software program like Blender or Maya in a React project using react-three-fiber. By the end of this article, you’ll be able to render 3D models (gltf / glb) on your website.

Get a 3D model of yourself

To get a customized 3D model, We well use Ready Player Me, a free-to-use 3D avatar creator from Wolf3D that allows anyone to create their own digital representation in a matter of minutes, no 3D modeling experience required. All you need to do is take a quick selfie and wait as the program automatically generates a custom 3D avatar based on your likeness.

You’re then free to make your own adjustments to the character using an okay range of hairstyles, skin tones, facial features, clothing options, and other customizable attributes.

After signing in to Ready Player Me, You need to follow the steps below and you good to go.

Choose a body type

Upload a photo of yourself

Customize your look

Download your model

Render the model in React

To render the model in our React app, We will use react-three-fiber a React renderer for Threejs.

Setting up the project

First, let’s create a new React project with Create React App:

npx create-react-app my-3d-model
#or
yarn create react-app my-3d-model

Afterwards, install @react-three/fiber and @react-three/drei with the command below:

npm install three @react-three/fiber @react-three/drei
#or
yarn add three @react-three/fiber @react-three/drei

Converting the model into a reusable React component

Once you’re done, go ahead and run the command below to create a javascript file using gltfjsx that plots out all of the assets contents in the format of a React functional component.

npx gltfjsx model.glb

The file’s content will look similar to the following code:

import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export default function Model({ ...props }) {
  const group = useRef();
  const { nodes, materials } = useGLTF("/model.glb");
  return (
    <group ref={group} {...props} dispose={null}>
      <primitive object={nodes.Hips} />
      <skinnedMesh
        geometry={nodes.Wolf3D_Body.geometry}
        material={materials.Wolf3D_Body}
        skeleton={nodes.Wolf3D_Body.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Glasses.geometry}
        material={materials.Wolf3D_Glasses}
        skeleton={nodes.Wolf3D_Glasses.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Hair.geometry}
        material={materials.Wolf3D_Hair}
        skeleton={nodes.Wolf3D_Hair.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
        material={materials.Wolf3D_Outfit_Bottom}
        skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
        material={materials.Wolf3D_Outfit_Footwear}
        skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Top.geometry}
        material={materials.Wolf3D_Outfit_Top}
        skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
      />
      <skinnedMesh
        name="EyeLeft"
        geometry={nodes.EyeLeft.geometry}
        material={nodes.EyeLeft.material}
        skeleton={nodes.EyeLeft.skeleton}
        morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
      />
      <skinnedMesh
        name="EyeRight"
        geometry={nodes.EyeRight.geometry}
        material={nodes.EyeRight.material}
        skeleton={nodes.EyeRight.skeleton}
        morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Head"
        geometry={nodes.Wolf3D_Head.geometry}
        material={materials.Wolf3D_Skin}
        skeleton={nodes.Wolf3D_Head.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Teeth"
        geometry={nodes.Wolf3D_Teeth.geometry}
        material={materials.Wolf3D_Teeth}
        skeleton={nodes.Wolf3D_Teeth.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
      />
    </group>
  );
}

useGLTF.preload("/model.glb");

creating the scene

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

export default function App() {
  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: "#111a21",
        width: "100vw",
        height: "100vh",
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>// your model here</Suspense>
      <OrbitControls />
    </Canvas>
  );
}

Adding the model to the scene

First add the model (glb file) to the public folder, For the generated javascript file by gltfjsx you can add it either to the src folder or to the components folder.

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model"; /* highlight-line */

export default function App() {
  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: "#111a21",
        width: "100vw",
        height: "100vh",
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>
        <Model position={[0.025, -0.9, 0]} /> /* highlight-line */
      </Suspense>
      <OrbitControls />
    </Canvas>
  );
}

body {
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

result:

https://codesandbox.io/s/bold-wing-9w9n3i?file=/src/Model.js

Add animations to the model

To be able to add animations to your 3D model, You need to have blender installed in your machine.

Import the model to blender

Blender is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game creation.
learn more

Create a new blender project

Clear the scene from all the objects

Import the glb file to blender

Select your model and click Import glTF 2.0

Convert the model to fbx format

Before adding any animations to our model we need first to convert it into a FBX format.

Select the model

To select your 3D model in blender you only need to click on the letter a or you can use the mouse to do so.

Export the model as FBX

Make sure to set Path Mode to Copy, and check the Embed textures option.

Adding animations with mixamo

Mixamo is a free online service for automatically rigging and animating 3-D characters. It was developed by Mixamo Incorporated, which was purchased by Adobe in 2015. Mixamo allows users to upload FBX, OBJ, or Zip files, and then the website attempts to automatically rig the character in under two minutes. The rigging process works best with humanoid characters.

Upload the model to mixamo

Select an animation and download the animated model

Convert the animated model back to glb format

To use the model in our React app we need to change it back to glb format.

Import the animated model to blender

Export the animated model as glb

Rendering the animated model in React

In the public folder replace the model.glb file with the animated model, and add the changes below to src/Model.js file.

import React, { useRef, useEffect } from "react"; /* highlight-line */
import { useGLTF, useAnimations } from "@react-three/drei"; /* highlight-line */

export default function Model({ ...props }) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF("/model.glb");

  const { actions } = useAnimations(animations, group); /* highlight-line */

  // 'Armature|mixamo.com|Layer0' is the name of the animation we need to run.
  // console.log(actions);

  useEffect(() => {
    /* highlight-line */
    actions["Armature|mixamo.com|Layer0"].play(); /* highlight-line */
  }); /* highlight-line */

  return (
    <group ref={group} {...props} dispose={null}>
      <primitive object={nodes.Hips} />
      <skinnedMesh
        geometry={nodes.Wolf3D_Body.geometry}
        material={materials.Wolf3D_Body}
        skeleton={nodes.Wolf3D_Body.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Glasses.geometry}
        material={materials.Wolf3D_Glasses}
        skeleton={nodes.Wolf3D_Glasses.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Hair.geometry}
        material={materials.Wolf3D_Hair}
        skeleton={nodes.Wolf3D_Hair.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
        material={materials.Wolf3D_Outfit_Bottom}
        skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
        material={materials.Wolf3D_Outfit_Footwear}
        skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Top.geometry}
        material={materials.Wolf3D_Outfit_Top}
        skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
      />
      <skinnedMesh
        name="EyeLeft"
        geometry={nodes.EyeLeft.geometry}
        material={nodes.EyeLeft.material}
        skeleton={nodes.EyeLeft.skeleton}
        morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
      />
      <skinnedMesh
        name="EyeRight"
        geometry={nodes.EyeRight.geometry}
        material={nodes.EyeRight.material}
        skeleton={nodes.EyeRight.skeleton}
        morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Head"
        geometry={nodes.Wolf3D_Head.geometry}
        material={materials.Wolf3D_Skin}
        skeleton={nodes.Wolf3D_Head.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Teeth"
        geometry={nodes.Wolf3D_Teeth.geometry}
        material={materials.Wolf3D_Teeth}
        skeleton={nodes.Wolf3D_Teeth.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
      />
    </group>
  );
}

useGLTF.preload("/model.glb");

result:

https://codesandbox.io/s/3d-model-animation-d41e9u?file=/src/Model.js:271-281

Also read:
React Best Practices - Ways To Write Better Code in 2022
10 JavaScript One-Liners - Ways To Boost Your Productivity

My blog
My website
Find me on Upwork
Find me on twitter
Find me on linkedin
Find me on github

What technologies should you know to become a Front-End Developer in 2022.

Nourdine Labib — Sat, 15 Jan 2022 13:43:57 +0000

In this article, I will show you everything you need to know to start a career as a Front-end developers in 2022, from the common tools to the advance technologies you will need to learn if you are considering becoming a Front-end developers.

The fundamentals.

There are three technologies that every web developer should know, HTML, CSS and JavaScript, and these technologies are the three building blocks that you'll find in any website.

HTML.

The Hyper Text Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser, HTML is essentially the “skeleton” for your website. HTML is how you structure your website.

CSS.

Cascading Style Sheets, or CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML, CSS is responsible for giving HTML documents and webpages a face. In other words, it describes how an HTML page should look.

JavaScript.

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior.

Dive into front-end development.

Git and GitHub.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitHub is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

npm

npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.

Sass

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.

Tailwind CSS

Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

React

React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Next.js

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.

Typescript

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Conclusion

There are more and more technologies out there, and you will use some of them based on your projects needs. Based on my opinion the best skill you should have is the ability to read documentations, because technologies change and gets updated day by day, so as a developer, you never going to stop learning.

If you want a more detailed roadmaps check out roadmap.sh