Scribd
Upload
11 views

React Components Library In Vanilla JS

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

React Components Library In Vanilla JS

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

React Components Library

In Vanilla JS

Elaygelbart
·
Follow
5 min read

18

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

STEP 1: Initialize React typescript application


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.


STEP 2: Initialize Storybook
in component-library directory let initialize Storybook

npx sb init

Add Typescript support and stories future paths

to .storybook/main.js

.storybook/main.js
STEP 3: building components and stories
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:
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:

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”):


Storybook on localhost

STEP 4: Configure Vite


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:

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:
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

STEP 5: Implement Component Library in


Vanilla JS
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

Bonus: Adding JSX


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 😂
JSX in Vanilla Javascript

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

“text/babel”

Give it a try and tell me how it goes, hope you find

this article helpful and informative, for further

questions contact me directly :)

You might also like