React Components Library In Vanilla JS (2024)

Recently, we decided at LightSpin to transform our vanilla JavaScript application to React.

Our JavaScript Application is robust and generated through templates provided by Django Framework.
Even we selected React as Framework, we couldn’t change the entire frontend in one sprint as result of how big is LightSpin application.😪

We decided to start with Atoms — Building small reusable components that can be used multiple times in our application, like buttons, links, tags, labels.

I encounter a difficulty implementing React Component in Vanilla JS application, after learning it I am happily sharing this information
with you😁

Recommended — follow along with this repository for better understanding

First of all create-react-app, I chose typescript over javascript in react because if we doing it we doing it right 😎
Let’s initialize the React typescript application by running these commands-
(if you don’t want typescript just emit the -template typescript and all the @types)

yarn create react-app component-library – template typescript
cd component-library/
yarn add styled-components
yarn add -D @types/styled-components

the reason we installing styled-components its because later it will be helpful in the final bundle.
We wouldn’t have unnecessary CSS files, and moreover it’s just a delight to style components with.

in component-library directory let initialize Storybook

npx sb init

Add Typescript support and stories future paths to .storybook/main.js

Now the fun begins! 💪
Delete everything from “src” directory and open new folder in it “atoms”.
“atoms” we contains our atoms components and stories, for now I will build “Button” component, for each component create independent folder with the name of the component, in this case it “Button”
src/atoms/Button/Button.tsx :

You can create any component you want as long there is no dependent on something that isn’t props from parent (like state-management or context) Always give it default behavior.

For anyone don’t familiar with Storybook, it give users and designers way to test and follow changes in components and more, for more references I recommend check this great article by Arunoda Susiripala.

After we satisfy with our Atom Component we’ve made, let’s create the story for it.
src/atoms/Button/Button.stories.tsx:

Notice in the export default object on the “title ”key, Atoms/*ComponentName* will arrange later in the Storybook all the atoms in the same category.

Last step in creating atom component it to create index.ts in component folder for better export behavior and visibility.
src/atoms/Button/index.ts:

Open Storybook locally by running

yarn storybook

It Should look something like that(I’ve added “Link” component with the same steps as the “Button”):

After finishing our components library let’s prepare it for bundle.
in “src” directory create index typescript file with atoms components imported.
src/index.tsx:

final src directory tree should look like that :

src
├── atoms
│ ├── Button
│ │ ├── Button.stories.tsx
│ │ ├── Button.tsx
│ │ └── index.ts
│ └── Link
│ ├── Link.stories.tsx
│ ├── Link.tsx
│ └── index.ts
└── index.tsx

Storybook(and create-react-app) by default bundle with Webpack, although it is a good bundler, Vite bundle JS with smaller size and faster time.
Yarn add Vite and support for typescript and react.

yarn add vite @vitejs/plugin-react vite-plugin-dts -D

Configure Vite to bundle code as component library and output to 2 format:
UMD — for the browser support.
ES — for later use in React Single Page Application.
component-library/vite.config.ts:

*IMPORTANT* — External component library demand us to not bundle React and ReactDOM with our code and transfer them in package.json from “dependencies” to “peerDependencies”

Add “vite build” to scripts in “package.json”
package.json — scripts:

"scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject",
 "vite-build": "vite build",
 "storybook": "start-storybook -p 6006",
 "build-storybook": "build-storybook"
}

see magic happen by running-

yarn vite-build

We have done it ! “dist” directory now holds the holy file “ComponentLibrary.umd.js”
Now all we have to do is using it in vanilla JavaScript.
Add React, ReactDOM CDNS and ComponentLibrary.umd.js
early as you can in HTML (Notice this is React Development CDN)

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="./ComponentLibrary.umd.js"></script>

Pick before which element you want load React Component to by giving them unique selectors

<p>
 Implementing Vanilla JS in a web page It's not that hard. 
 <span id="component-link">**Here**</span> is a Component Link to My Github Profile 
 <span id="component-btn">**Here**</span> is a Component Button to my LinkedIn Profile with JSX
</p>

Use Vanilla JavaScript to create ReactDOM Root and Create React Element with props.

• ReactDOM.createRoot(DOM Element)
• React.CreateElement(React Atom Component, Props Object)
• Root.render(Component)

That’s it, You Have React Components in your Vanilla JavaScript👩‍💻

JSX isn’t valid JavaScript and we need adding Babel Compiler.
Add Babel CDN to the head

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Now rendering components feel more comfortable and familiar 😂

Don’t forget to change the “type” of the script to “text/babel”