Forem: Nitsan Cohen

3 Ways to Create React Components with Bit

Nitsan Cohen — Mon, 01 Jan 2024 17:24:22 +0000

Bit breaks down large codebases into easy-to-understand and maintain Bit components. Each Bit component is maintained as an autonomous building block with its own dependencies, dev tools, and even source control.

This blog will explore 3 ways to create a component with Bit. We'll use our framework of choice, though keep in mind Bit is not limited to any specific technology or framework.

Creating a React Component Using a Template

Using Bit Create, you can quickly generate a new React component using a component generator.

Component generators offer the basic boilerplate for the component's source files as well as the default configuration (in this example, the template configures the generated component to use the same reusable React development environment).

Command:

bit create react my-first-react-component

Benefits:

Speeds up the initial setup of React components.
Maintain consistent development standards across developers collaborating on a project.
Allows customization to fit specific project standards.

Practical Example:

Explore available templates by running bit templates:
Choose the React template from the organization's available templates.
Run the command to create a new React component:

bit create react my-first-react-component

The React component template generated these files.

Creating a Bit Component by Tracking an Existing Directory

This method is ideal for those gradually adopting Bit in existing projects. It enables tracking and maintaining existing directories as Bit components.

Command:

bit add <directory-path>

Benefits:

Smooth integration of Bit into existing project structures.
Allows incremental adoption without disrupting the current workflow.
Maintains the modularity and independence of components within a larger project.

Practical Example:

Identify a folder in legacy code to convert into a Bit component.
Ensure there are no relative imports from the same legacy project. If present, convert those to Bit components too.
Use bit add to track the folder as a Bit component:

bit add <path-to-a-scary-legacy-folder>

Creating a Component by Forking an Existing Bit Component

Bit Fork is used when you want to use an existing Bit component as the starting point for your own (new) Bit component.

Command:

bit fork <component-id>

Benefits:

Enables customization of components for specific project needs (when extending the component's API is not enough)
Applicable in scenarios with limited permissions to a scope. i.e, when you have read permissions but no write permissions. - You can clone a component but not suggest changes to the origin component.
Ensures the independence of the forked component, facilitating innovation and adaptation.

Practical Example:

Identify a component dependency that needs modification but is in a scope where you lack permissions.

Flexibility and Control with Bit Fork

When working with components in Bit, you might encounter situations where you need to modify a component but don't have the necessary permissions. Bit offers two approaches for this: using lanes to suggest changes and forking for creating a separate instance.

Using Lanes for Change Requests: If you need to suggest changes to a component, such as the breakpoints component in the design scope, but don't have direct modification permissions, you can use lanes. Lanes in Bit allow you to propose modifications or improvements, which can then be reviewed and potentially merged by those with the appropriate permissions. For more information on using lanes in Bit, check out the Bit Lanes Documentation.
Forking for Independent Instances: If creating a separate instance of a component works for your scenario, such as needing a version of the meet-bit-component with specific alterations, you can use the Bit Fork command. This is particularly useful if you don't need to change the source of truth but require a version tailored to your project's needs.

Forking in Bit is different from Git forking. In Bit, forking a component results in a completely independent instance from the original, not linked for future merges, which is crucial for component-based development that requires customization and flexibility.

2.Fork the dependency to your scope using bit fork, allowing for necessary modifications:

bit fork teambit.design/responsive/breakpoints

Conclusion

Through Bit Create, Bit Add, and Bit Fork, Bit provides a comprehensive approach to managing component-based systems in software development. These tools promote efficient, modular, and collaborative development, streamlining the process of creating, integrating, and customizing components in various project environments.

Using Refs and Hooks to call child function in parent component

Nitsan Cohen — Tue, 17 Jan 2023 19:42:54 +0000

In React, it's generally best practice to pass down functionality to children through props and to pass up notifications from children through events. However, there may be times when you need to expose an imperative method on a child component to be called from the parent component. In these cases, you can use refs.

To use refs in functional components, you'll need to use the forwardRef, useRef, and useImperativeHandle hooks from the React library.

First, you'll need to wrap your child component in the forwardRef function in order to access the ref object that is assigned using the ref prop. The ref is passed as the second parameter to the function component.

Next, you'll need to use the useImperativeHandle hook to extend the component instance with the imperative method you want to expose.

In the parent component, you'll need to use the useRef hook to get a reference to the child component, and then use this reference to call the child's method.

Here's an example of how to use refs to call a child method from a parent component in modern React:

const { forwardRef, useRef, useImperativeHandle } = React;

const Child = forwardRef((props, ref) => {
  const childRef = useRef();
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("You clicked the button!");
    }
  }));

  return <h1>Child</h1>;
});

const Parent = () => {
  const childRef = useRef();
  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

Please keep in mind that using refs in this way is an escape hatch, and usually indicates that a better design is available.

Extendible React Components

Nitsan Cohen — Wed, 26 Jan 2022 13:40:11 +0000

Here's a nice React tip for you.

When creating components using TypeScript (please use TS), always extend the props type with a
React.HTMLAttributes
(you can replace the DivElement with any other element you are returning from your JSX).

That will allow you to have all the properties for that component correctly typed, and you can pass them to the JSX element you are returning.

A handy use case is where we want to create a component with specific styles but make it extendible so that other consumers that install that component in their app will be able to override the styles we defined with their own styles.

According to the CSS specificity rules, for their styles to apply, you have to pass their className as the last one in order (since they are both using the class selector, the latest styles that appear are those who apply).

In the following snippet, you'll notice how we pass the className attribute we destruct from props and use the classNames library to join them nicely:

import React, { ReactNode } from "react";
import { Link } from "@teambit/base-react.navigation.link";
import { Arrow } from "./arrow";
import styles from "./styles.module.scss";
import classNames from "classnames";

export type BackButtonProps = {} & React.HtmlHTMLAttributes<HTMLDivElement>;

export function BackButton({ className, ...rest }: BackButtonProps) {
  return (
    <div
      {...rest}
      className={classNames(styles.backButtonContainer, className)}
    >
      <Link href="/blog">
        <Arrow />
        <span className={styles.backButtonText}>Back to Blog</span>
      </Link>
    </div>
  );
}

As we said, it will allow users to pass their own styles, and if there are any conflicting styles, the consumers' classes will override the default styles.

Always think about who is going to consume your component. You will probably be the first one consuming it, but you never know who else will come after you and install your component—extendible Components FTW.

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

onClick handlers with Currying (React)

Nitsan Cohen — Thu, 20 Jan 2022 10:35:02 +0000

How do you pass a function with an argument to an onClick event in React?

You are probably all familiar with the fact that when passing a function that takes an argument to an onClick event (or any other event), you have to wrap it with an anonymous callback function.

For instance:

<button onClick = { () => myFunction(argument) } />

We do it because we want to have a pointer to a function triggered upon a click. If we pass the function without a callback, it will get fired right when the DOM is mounted.

But there is another option. We can pass an anonymous callback to our handler. This way, our handler itself will serve as a pointer, and we will not have to give an anonymous function to our onClick event. The name of this design pattern is called currying.

const myHandler = (text:string) => () => alert(`${text}`)

When is this useful?

It could be helpful when we intend to use our handler in many events (for example, mapping an array). Instead of creating useless callback functions for each event, we create them only once in the handler.

Two ways to auto focus React input element

Nitsan Cohen — Thu, 13 Jan 2022 10:00:57 +0000

If you want to focus an input element when the DOM mounts, you have to place a ref on your input element and trigger the focus function in the useEffect hook.

Calling that function in the useEffect hook is because the callback that we pass to this hook will be triggered only when the DOM finishes to mount. Otherwise, we risk triggering the focus function before the input element is on the screen.

But there is a more straightforward option. You can pass the autoFocus attribute to that input element.

Nevertheless, it is sometimes helpful to use the first option to focus on an input element. For instance, we want our user to focus on the last input element when refreshing the page or return to that page from another one.

The attached example stores the latest input value in the local storage. We have to use the state as well to cause a new render cycle and keep the newest value. We are also checking if there is a value before setting it to local storage. This is meant to prevent empty strings from being stored.

Live playground:

https://stackblitz.com/edit/react-8arjym?file=src/App.js

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

Components search by Bit

Nitsan Cohen — Wed, 12 Jan 2022 20:36:13 +0000

Components search by Bit is extremely powerful. Being able to search across all your components, narrow it down to just one org but still search across all scopes in that org, find the component you are looking for and then install it in your project

Mind-blowing and it is so fast. Really love what Bit is doing. So many cool things. Make sure you sign up to get access.

Check out the video I made here:

https://www.linkedin.com/posts/nitsan-cohen_webdev-components-javascript-activity-6887018727347367937-PGI3

utilize the power of useState and useCallback hooks in React

Nitsan Cohen — Wed, 12 Jan 2022 07:46:45 +0000

What is the right way of using the useCallback and useState hooks in conjunction?

Sometimes we will want to wrap the useState hook with a useCallback hook.

The simple reason for that is to prevent a render cycle when passing the function as props (when the component receiving that prop is wrapped with React.memo).

We must remember is that the setState function must not be passed to the useCallback dependency array. The React team suggests this:

"React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list."

For example:



const [isOpen, setIsOpen] = useState(false); 

const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen]); // We don't have to pass the setState function.

But the example above is but practice. Why? Even though we are not passing the setState function, we must pass the isOpen variable, as it is being used inside the useCallback hook. This will cause the toggle function to be recreated every time the state changes.

You already know the solution, right?

We can use the callback function that receives the previous value and manipulate it. This way, we are not using variables from outside the useCallback function, and we can keep the dependency array nice and clean.



const [isOpen, setIsOpen] = useState(false); 

const toggle = useCallback(() => setIsOpen(prevState =>!prevState), []);

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

What is Webpack? In simple words.

Nitsan Cohen — Thu, 06 Jan 2022 07:27:31 +0000

What is Webpack?

Once upon a time, there was only HTML. HTML was the only building block of the whole web.

Then came JavaScript but its usage was very basic and minimal. You could see websites with a "HUGE" JavaScript bundle of:

<script>
alert("Welcome to my website")
</script>

Today, not only JavaScript is used everywhere, but there are some frameworks (like React), where the user does not get from the server any HTML code (only an empty file)! He gets a bundle of JavaScript which transpile to HTML (and sometimes also CSS) by the users' browser.

Anyhow, we have to deal and manage with a lot of JavaScript code these days and this is where Webpack comes into the picture.

When dealing with a lot of code, we want to split our code into small pieces. It makes our code more readable and maintainable. You are probably already familiar with the import-export syntax. This is code-splitting.

But eventually, we will want to transform all of our files into (usually) one big bundle. This bundle should be optimized and should work (polyfill) on all the browsers we expect our code will run at.

Webpack does exactly that. It will run on build time and create an optimized bundle of your code (-small-sized bundle). For example, it can change the name of your variables from:

const example = 10;

To:

var e = 10;

This is optimized because it takes less memory (fewer letters to store) and runs faster on the browser (the JavaScript engine runs it faster).

Another aspect, as mentioned, is Polyfilling. We can configure our Webpack setup to make our code run on the browsers we define for it. This is actually done with the help of another library (usually Babel).

In the example above, Webpack is changing the const keyword to var, to make it work on more browsers.

Let's go through a basic Webpack configuration for a React app (open the attached picture side by side).

Entry - the entry destination is the main file we want Webpack to start its bundling. We only have to specify one file and Webpack will figure out the rest by looking for its dependencies. Here we specify the index.js file which is the place where we render our App in React (and all other files are just siblings of it).
Output - is the path where we want our bundle to be. We specify directory name (here it's dist) and we can also specify the file name we want to output.
Loaders - Webpack is not very smart. It understands only JS and JSON files. If we want Wepback to understand JSX, for example, we have to specify loaders that will translate it for Webpack. Here we specify the babel-loader and set its options to work with JSX (React).
Plugins - These help us to make our code more optimized and handle assets. In our example, we use the HtmlWebpackPlugin. This plugin will generate an HTML file and will automatically inject our JS bundle into it.

Don't be afraid of your Webpack. It's a great tool and you should be comfortable enough with it so you can make config changes to it.
I encourage you to go and play with Webpack.

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

Cascading what? Explanation about CSS Cascading rules

Nitsan Cohen — Wed, 05 Jan 2022 06:40:28 +0000

CSS stands for Cascading Style Sheets

I want to talk with you about the cascading part today.

You probably already know that CSS is not a programming language. Instead, CSS is all about declaring rules to the elements in our DOM.

We have all kinds of ways to declare those rules.
For example, inline styles:

<div style="backgroundColor:red" class="my_div">Hi </div>

Or class selectors:

.my_div {
background-color:green;
}

But how do these rules apply? Which one is more powerful?

That is where the cascading rules come into action. The inline style will rule out the class selector in the example above.

I sometimes see people struggling with the cascading rules, but actually, it is straightforward.

When conflicting styles appear, the first thing your browser will check is the origin of the stylesheet.

We have two main types of origins:

-user-agent styles, which in simple words means browsers' default.
-Author styles, which in simple terms means - your custom styles.

The author styles will always override the user-agent styles.

So far, so good. But what if we have conflicts in the author styles themselves?

Well, it's effortless to remember that the winner is always inline styles.

After that, we get to the scary (and problematic to pronounce) word specificity.

Just memorize it: IDs, Classes, attributes, pseudo-classes, elements, pseudo-elements.

Or in symbols:

#id (avoid using them!)
.class (Classes).
h1[lang="pt"] (attributes).
h1: hover (pseudo-classes).
h1 (elements).
h1:: first-letter (pseudo-elements).

Lastly, if no specificity rules apply, the browser will use the rule that appears later in the source.

I've created a nice diagram to help you with that. Please learn it by heart if you dare call yourself a frontend developer :)

0h, and don't use !important (unless you have a significant reason).

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

Code splitting (bundle-split) in React

Nitsan Cohen — Tue, 04 Jan 2022 07:56:04 +0000

As you probably already know, when you build your React app (npm run build), Webpack will bundle all of your files into one big chunk.

If your app is not that big that's usually just fine. But what happens when your app grows dramatically? You can end up with a really big JS file and that can hurt your UX, especially the initial loading time.

Luckily there is a simple solution we can implement. Its name is code-splitting. By splitting our bundle, we can tell React (or Webpack) to load only the code that is absolutely necessary for the initial load (-for the current page, for example).

Later, we can "lazy load" the rest of our code upon request (when navigating or scrolling down).

One of the easiest ways to implement code splitting is by using a dynamic import. As the name suggests, the dynamic import will asynchronously import our file and will return a promise.

It looks like this:

export default (numA, numB) => numA * numB

async function loadModule() {

 const dynamicImport = await import('./file1')

 dynamicImport.default(10, 10)
}

loadModule() //output: 100

But what if we want to dynamically import a component?
Let's assume we have a component that is used by our app only on page B. We don't want to import it when we are on page A. Well, with React.lazy it's a breeze!

Have a look at the attached image. All we have to do is use React.lazy to import our component. This component will now be excluded from our bundle and imported only on runtime when we load that specific page.
We are also using the Suspense component to render a fallback while the user is retrieving the bundle.

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

Use TypeScript Generics to enhance your React components and make them reusable

Nitsan Cohen — Mon, 03 Jan 2022 06:50:01 +0000

Use TypeScript Generics to enhance your React components and make them reusable!

What is TypeScript Generics?

Generics allow us to have a dynamic type for our components. It gives us more flexibility when building components and allows better reusability for the consumers of the components.

Let's have a look at a simple example of Generics:

function returnWhatItGets<Type>(arg: Type): Type => arg;

The part where we write < Type> tells typescript that when we use this function, we will be able to insert a dynamic type that will serve as the Type of our argument (arg) and the Type of the return value of this function.

That is how it looks:

const numberOutput = returnWhatItGets<number>(5);

const stringOutput = returnWhatItGets<string>("hi");

Now that we're all on the same page with Generics, let's implement generics in our React component!

1 import React from 'react';
2
3 export type GenericComponentProps<Type> = {
4 data: Type[];
5 };
6
7 export function GenericComponent<Type>({ data }: 8GenericComponentProps<Type>) {
9 return (
10 <>
11 {data?.map((item: Type, index: number) => (
12 <ul key={index}>
13 {(Object.keys(data[0]) as Array<keyof Type>).map((key) => (
14 <li key={key.toString()}>{item[key]}</li>
15 ))}
16 </ul>
17 ))}
</>
);
}

It might not look very clear at first glance, but it's really straightforward. Let's go through the code line by line:

On line number 3, we define a Generic type for our component's props (Type).

In line 4, we assume that our props object will have the "data" property. Our data type will be an array of the dynamic Type we will initiate our component.

Moving forward to line 7, we define our functional component with the generic Type that will be passed down to the props object's Type.

Our data is an array with our custom Type, so in line 11, we begin mapping that array. For each object, we output an<ul> attribute.

Now we want to output all the properties values of the given object, so we turn our object to an array of its keys using the Object.keys method and map it to print the value for each property. Notice how we define the type for this array dynamically with the keyof syntax.

Now let's test our component:

  <GenericComponent
   data={[
    { name: 'Nitsan', city: 'Harish' },
    { name: 'Abraham', city: 'Beer Sheva' },
   ]}
  />

That's it! We get all the benefits of typescript, such as auto-completion and type checking, while creating flexible and reusable components.

Using tools to keep track and build independent components, such as Bit, our users benefit significantly from such a flexible setup.

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

pnpm - The Best Package Manager

Nitsan Cohen — Sun, 02 Jan 2022 09:24:19 +0000

What package manager do you use in your projects?

npm? yarn?

If none of the above is true, you must be using pnpm, and let me say - that's a great choice.

Haven't you heard about pnpm? Let's have a short review.

pnpm is fast. How fast? In most cases, it’s quicker than npm and yarn. It can even get to three times faster than npm on a fresh install!

But not only that. pnpm will save you LOTS of gigabytes on your computer.

The magic behind pnpm is with how it handles your packages.

Let's say you have installed the famous node.js framework express using pnpm.

npm i -g pnpm  // If you’re using Node.js version 16.13 or higher, you get pnpm out-of-the-box. All you have to do is enable it using “corepack enable” command.

pnpm init && pnpm i express

Express has a bunch of dependencies itself, as you can examine in its package.json (array-flatten, body-parser, and many more).

Where do we store the dependencies of Express (sub-dependencies)?

npm will have to create another node_modules folder in the express folder, but this is not the case with pnpm.

Actually, this is not the case with npm either. Historically (from npm version 2 and below), npm was using nested node_modules, but due to a limitation on windows (windows allows only up to 256 chars for directories paths) and some more reasons, they changed to the way it works.

They now use an algorithm to hoist all sub-dependencies to the root directory of the node_modules.

But this method has a disadvantage:

There could be a situation where I use one of the sub dependencies in my project, but I didn’t install them.

For example:

const parser = require('body-parser');

I didn't install this package (it's not in my package.json dependencies, only in Express package.json), but I can use it since npm hoisted it to my root node_modules.

There's no problem as long as the maintainers of Express decide that body-parser stays part of its dependencies.

However, if they decide to remove it on a later version, this will break my project (I'm trying to import from a package that does not exist).

pnpm approach is more intelligent. It stores all the packages in a folder called .pnpm in your node_modules folder. It will then use a symbolic link (symlink) to point to that folder.

This way, we avoid deeply nested folders while preventing the possibility of importing packages that we didn't install in our project.

Lastly and most importantly, as we mentioned, pnpm will save you tons of storage in your computer.

How? pretty simple. Let's continue with the Express example. When installing Express in our project, pnpm will first save all of its files in a global store (using hashes). This way, the next time we install Express (in another project), pnpm will hard link to the files that exist in the global store.

That's also the reason that in Bit we use pnpm as the default package manager to manage your components dependencies.

For more posts like this follow me on LinkedIn
I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).