Forem: Josh Kuttler

How to Publish React Native Components for Reuse

Josh Kuttler — Sun, 07 Jun 2020 11:59:47 +0000

Publishing and reusing React Native components across applications with Bit.

React Native components, just like ReactJS, are built for reuse.

Reusing React native components across applications speeds up your development, makes it easier to maintain your codebase, and makes sure that your users will enjoy a consistent experience at every touchpoint.

However, publishing many components for reuse can also be a challenge that requires a lot of work, documentation, and teamwork. This work can be streamlined, simplified, and scaled using new tools built for this purpose.

Bit is an open-source tool that helps you develop, publish and manage components across many applications. It is completed by the bit.dev platform, where all your components are organized, documented, and become available to reuse. It streamlines the process of publishing and documenting JS components.

Example: Exploring React components published on Bit

In this post, I’ll show how to use Bit to independently version, publish, and document React Native components from, essentially, any React Native app.

My published components will then be available on a public collection on Bit.dev, where others can read their docs, try them in a live playground, and install them using NPM, Yarn, or Bit. This collection can be gradually expanded to create a fully functional reusable system of components.

The “My Store” app and its published components

Building a React Native Store App: “My Store”

Demo project on GitHub:
JoshK2/mystore
A simple products list store build with React Native components and then shared them to a collection on bit.dev.

npx react-native init mystore

Any store needs some way to present its products. To make that happen, I’ll create 3 components:

Product: Shows the image, title, description and price.
Button: Adds the product to the shopping cart.
Products list: Receive a list of products and displays them vertically.

src
└── components
├── button.js
├── product.js
└── products-list.js

For example, the “Button” component:

I’ve used prop-types for all my components. That will serve two purposes:

As with any other use of prop-types, my components will be safer to use.
Bit will use my prop-types definitions to create documentation for each component. That would also be the case with TypeScipt and JSDocs (alternatively, you can add an .md file to your component).

Publishing the “My Store” Components to Bit

Install Bit globally.

npm install bit-bin --global

Initialize a new “Bit Workspace” (in the project’s root directory).

bit init

Track all components under the components directory (similar to git add ). While doing this, Bit will automatically define each unit as a “component” with all its relevant files, dependencies etc. This is very useful when you seek to develop and publish many components in the same repository.

bit add src/components/*

Configure my tracked components to use the React Native compiler available in Bit’s “ENVs” collection.

Wit hBit, we configure a compiler to decouple the soon-to-be-published components from the app’s build setup. This way, we make sure they’ll work in other future environments.

That’s done by importing the compiler as I would with any other published component and adding the -c flag to set it as a compiler (this will be added to Bit’s configurations in package.json )

bit import bit.envs/compilers/react-native -c

Bit lets you version each component independently, which is great for reuse at a slightly larger scale. Tag all components to record all changes and lock versions. The -a flag marks all tracked components. We could also specify the new version number but, here, I’ve left that to Bit.

bit tag -a

Now if you run bit status, you’ll see that each component got its own version. Remember that Bit tracks every component’s dependencies as well as changes to its code, so from now on when you make a change, Bit will help you tag and bump the version of all components impacted by the change.

Publish all tracked components.

For this, I’ll first head over to Bit.dev, open a free account, and create a new component collection. I’ll name this collection “mystore-app-components”. Once done, I’ll continue to publish them to my new collection.

bit export joshk.mystore-app-components

My components are now published on Bit! 🎉
mystore-app-components by joshk · Bit
A demo store components build with React Native - 3 Javascript components. Examples: product , products-list , button

https://bit.dev/joshk/mystore-app-components

All my components are now reusable, and I can share them between the different applications that I or my team are building.

You can browse through the component pages, see each component rendered in Bit’splayground (using an example code I’ve written).

You can choose to either install components like any other package using NPM/Yarn or to “clone” components into your project using bit import .

Imported or “cloned” components (bit import) can be modified in any codebase using them and pushed back with a bumped version. That makes collaboration possible even across repositories.

Happy coding and sharing!

A new version of React Native compiler for Bit

Josh Kuttler — Thu, 23 Jan 2020 17:00:46 +0000

I just published a new version of React Native compiler for Bit
and I would appreciate some feedback.

You can write in the comments section, links to React Native components you exported.

To Install and use the compiler:
https://bit.dev/bit/envs/compilers/react-native

Stars to the repository will be welcome 😉💫

teambit / envs

Component development environments for the Bit community

Envs - Development environments for components

A curated list of Extensions maintained by Bit's maintainers to use as dev tools for components. These extensions implement best practices for distributing components and setting them up to be reused across projects.

Quick links

Browse Envs • Implementing Envs

Compiler/Tester collection • Docs

Usage

Which compiler to use?

Flavor	Env	Import Command
React JS	react	`bit import bit.envs/compilers/react -c`
React TS	react-typescript	`bit import bit.envs/compilers/react-typescript -c`
React Native JS	react-native	`bit import bit.envs/compilers/react-native -c`
Vue	vue	`bit import bit.envs/bundlers/vue -c`
Angular	angular	`bit import bit.envs/compilers/angular -c`
Typescript Vanilla	typescript	`bit import bit.envs/compilers/typescript -c`
Javascript Vanilla	babel	`bit import bit.envs/compilers/babel -c`
Stencil	stencil	`bit import bit.envs/compilers/stencil -c`

Which tester to use?

Flavor	Env	Import Command
Mocha	mocha	`bit import bit.envs/testers/mocha -t`

What is Bit?

Bit makes it easy to share and manage components between projects and apps at any scale.

It lets you…

View on GitHub

How to comma-separate your number in JavaScript

Josh Kuttler — Thu, 19 Dec 2019 10:56:15 +0000

I created a simple function that does the trick with a regex expression.

The function receives either a string or a number and returns the formatted number with correct commas:

formatNumber(number) {
    number = number.toString()
    return number.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}

I wrote this function in TypeScript and added tests.

I've exported it to bit.dev with a live demo and docs.

Also, it can be easily consumed with NPM/Yarn/Bit.
https://bit.dev/joshk/jotils/format-number

If you have a better way to write this function, please write a comment.

Build a Tic Tac Toe App with TypeScript, React and Mocha

Josh Kuttler — Tue, 10 Sep 2019 21:16:08 +0000

Learn how to compose a tic-tac-toe app with React and TypeScript components.

A simple Tic-Tac-Toe game built with modularity in mind and shared on Bit. After sharing, my game’s components can be tweaked and tested on Bit’s live PlayGround. Go to my components collection on Bit to test or consume the entire game or just some of its components, using NPM, Yarn or Bit.

JoshK2 / tic-tac-toe-game-using-bit

Simple Tic Tac Toe game built with react-typescript components

Modular Tic Tac Toe Game built with TypeScript and tested with Mocha

A simple Tic Tac Toe game build with TypeScript components and test with Mocha tester then shared them to bit for testing in the live PlayGround and see the result of tests runnig in bit.
Allow users to consume the entire game or just a part of the game components using NPM and Yarn or using bit to consume and modify the component directly inside the project.

The game has multiple options to modify the game rules, like the dynamic dimension of the table, and the number of matching value to win the game.

Try the game in live PlayGround in the project collection

Tutorial

See the full tutorial- build your own modular application with React TypeScript components.

Build a Tic Tac Toe App with TypeScript, React and Mocha.

Import and use the entire game component in

…

View on GitHub

When building a game like Tic-Tac-Toe “with modularity in mind”, it's hard to think of a reason for the UI components to be reused ever again, so I kept my focus primarily on the game’s utility functions.

I chose TypeScript as my coding language of choice — compiled by Bit’s TypeScript compiler and used Mocha for testing.

To install components from my project, first configure bit.dev as a scoped registry (copy and paste to your terminal) — this is done only once! later uses of bit do not require you to configure again.

npm config set '@bit:registry' [https://node.bit.dev](https://node.bit.dev)

and then install the component using Yarn or NPM:

npm i [@bit/joshk](http://twitter.com/bit/joshk).tic-tac-toe-game.game
yarn add [@bit/joshk](http://twitter.com/bit/joshk).tic-tac-toe-game.game

Game Component

The ‘game’ component is my app’s main component — composed using one component from ‘Board’ and two components from ‘Prime React’.

I used the button and the input-text for the configuration screen — test and see the code here.

Install PrimeReact components in your project:

yarn add @bit/primefaces.primereact.inputtext
yarn add @bit/primefaces.primereact.button

After setting the parameters, you can click ‘Play’ and… Play!

Board Component

The board component creates a dynamic table by props, manage player turn and check for the winner. Test and see the code here.

Square Component

The square component is a simple cell that receives value with optional color and sends an event to the board component when the value changes. Test and see the code here.

Empty cell function

‘Empty cell function’ Is a helper function to winner-calc function that checks if there are any empty cells in the game’s table.

Bit lets you see the docs for the component and the results of the tests:

The code of the function:

Winner Calculation

Winner calculation is a function that checks for the winner in horizontal, vertical and diagonal cases.

Bit let you see the docs for the component and the results of the tests:

The code for the function:

The project is available in my bit collection and in my GitHub repository:

JoshK2 / tic-tac-toe-game-using-bit

Simple Tic Tac Toe game built with react-typescript components

Modular Tic Tac Toe Game built with TypeScript and tested with Mocha

The game has multiple options to modify the game rules, like the dynamic dimension of the table, and the number of matching value to win the game.

Try the game in live PlayGround in the project collection

Tutorial

See the full tutorial- build your own modular application with React TypeScript components.

Build a Tic Tac Toe App with TypeScript, React and Mocha.

Import and use the entire game component in

…

View on GitHub

Feel free to comment below and follow me on Twitter 😃

How to Build a Super-Modular Todo App with React and Bit Components

Josh Kuttler — Thu, 05 Sep 2019 16:37:54 +0000

How to compose a highly modular React application with reusable components from 5 different libraries.

The final todo app composition with Bit

Modular programming has been around since the 60s, and the term itself was set at 1968 by Larry Constantine and extended ever since.

Today, in the technological world of component-based libraries like React and with tools like Bit, application modularity can be taken to a whole new level.

We will compose a simple React Todo application using reusable components from 5 popular libraries like Material-UI, Grommet and Semantic-UI. Thanks to Bit, we can quickly isolate and compose these components into an app.

When done, not only we will compose a highly-modular app from reusable components, but we will have a collection of components we can reuse to build more apps. The entire app is shared as a reusable component, which can be extended and composed with other components to build larger apps.

This is very exciting, as it’s a live implementation of full-blown modular application composition with a Lego-like experience.

This is the result of the todo list app:

And here’s the app’s GitHub repo:

JoshK2 / basic-todo-app-using-bit

A highly-modular React todo application composed of reusable components from 5 different collections. Full-blown software modularity.

Highly-modular React Todo application built of reusable Bit components

A basic React todo aplication composed of bit componnets shared from 5 different popular React UI libraries inlcuding Grommet, Semantic-UI React, Primereact and Lodash.

All the reusable components used to build this app are availabe in this collection The final todo application is also available as a reusbale bit component, which can be extended and composed with other components to build larger applications.

Motivation

Demonstrating software modularity in the age of components with React and Bit.

Tutorial

See the full tutorial- build your own modular application with reusable components.

Build a Super Modular Todo App with React and Bit Components.

Wich components I used?

3 Components

For creating the app I decided to divide the App’s code into 3 components:

TodoItem component, text with remove option.
AddItem component, input text area with add button and remove all button.
TodoApp component, this is the main code of the app that includes the TodoItem and the AddItem, so there will be a List with simple code to manage all the components options like remove, remove all and add.

Components 1+2 are modularly composed of components isolated and shared from different libraries- using Bit which helps us isolate, share and manage reusable components to build modular applications.

TodoItem

This component receives a simple text and id for removing the right todo item from the main list as props, and uses a remove icon from the semantic-ui-react component collection.

To install the component, firsy configure bit.dev as a scoped registry (one time action) and then install the component using Yarn:

npm config set '@bit:registry' [https://node.bit.dev](https://node.bit.dev)

yarn add @bit/semantic-org.semantic-ui-react.icon

This is the code of the component, after adding some helping-code to show the remove icon and send remove as an event to the main component when remove is clicked.

Here’s the final TodoItem component with live editing and playground in Bit.

AddItem

This component shows an input text area with auto resize and two buttons, one to add an item to the list, and the second to remove all items from the list. The remove all button work with props to show or hide this button.

So for this, I use input text area and button from primereact, a button from grommet, and icon from grommet-icons.

Install it:

yarn add @bit/primefaces.primereact.inputtextarea
yarn add @bit/primefaces.primereact.button
yarn add @bit/primefaces.primereact.internal.stylelinks
yarn add @bit/grommet.grommet.button
yarn add @bit/grommet.grommet-icons.add

This is the code of the component after adding some helping code to use the Add button and the Remove All button.

AddItem component with live editing and playground in Bit.

TodoApp

This component is the main component that uses the TodoItem and the AddItem components. The component has a list of item and allow to send an initial list as a prop, and receives all the event from the other components to manage the list. Like the add item, the remove item and the remove all item.

So I use List component from semantic-ui-react, and a unique id function from lodash to avoid key error in map function.

Install it:

yarn add @bit/semantic-org.semantic-ui-react.list
yarn add @bit/semantic-org.semantic-ui-react.internal.style-links
yarn add @bit/lodash.lodash.unique-id

This is the main code of the app, it receives and manages all the events that come from AddItem and TodoItem components.

Then all that’s left is to export the components with Bit- and the final TodoApp is now a modular and reusable component, check out the live demo!

All the reusable components we built are available in this collection, including the final todo app

Check the GitHub repo to see all the project’s code:

JoshK2 / basic-todo-app-using-bit

A highly-modular React todo application composed of reusable components from 5 different collections. Full-blown software modularity.

Highly-modular React Todo application built of reusable Bit components

A basic React todo aplication composed of bit componnets shared from 5 different popular React UI libraries inlcuding Grommet, Semantic-UI React, Primereact and Lodash.

Motivation

Demonstrating software modularity in the age of components with React and Bit.

Tutorial

See the full tutorial- build your own modular application with reusable components.

Build a Super Modular Todo App with React and Bit Components.

Wich components I used?

Semantic UI React

semantic-ui-react list component
semantic-ui-react icon component
semantic-ui-react css link component

PrimeReact

primereact inputtextarea component
primereact button component
primereact css link component

Grommet

grommet button component

grommet-icons

grommet-icons add…

View on GitHub

Conclusion

In this post, we’ve seen a very real example of modular software composition with reusable React components and Bit.

When we base our software design on modularity of smaller focused components, we build a better application which is easier to develop, maintain, test and extend. Today, building modular apps becomes more practical- and more fun- than ever before in history.

The same can be done not only with React and not only with frontEnd components. In my next posts, I’ll play with a modular composition for a verity of different technologies and architectures. Thanks for reading and feel free to ask anything! Cheers 🚀

How I Created My Own React Spinners Library

Josh Kuttler — Tue, 03 Sep 2019 16:00:02 +0000

I’ve created an application that uses Airtable as a database. I’ve used a spinner to take the place of a dull blank page which would otherwise be presented to the user in the time that it takes for the requested data to arrive and for the page to get rendered accordingly.

I could have used an existing react spinners library, but instead, I decided to use this chance to learn how to build my own spinners and my own React component library. So, in this post, I’ll show you my library, and an example of how to use a spinner.

React Spinners Library

So, without further ado, here’s my react spinners library (GitHub, Bit). It’s based on loading.io CSS loaders. I’ve added the option to send color and size as props of the component so that it’s easier to customize the spinners. I’ve exported the spinners (twelve in total) to bit.dev so you may easily view and tweak them in Bit’s live playground, and install them as packages with NPM or Yarn (or get their source code using Bit import).

JoshK2 / react-spinners-css

Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular)

Amazing collection of React spinners components with pure css.
The React spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the contributing guidelines.

💅No extra CSS imports
✂️Zero dependencies
📦Spinners can be installing separately

Live Demo

Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

🚀 List of Spinners - PropTypes and Default Props

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinner	color: string	size: number	className: string	style: object
`<Circle/>`	`#7f58af`	`64`	`""`	`{}`
`<Default/>`	`#7f58af`	`80`	`""`	`{}`
`<Ellipsis/>`	`#7f58af`	`80`

…

View on GitHub

For example, this is the circle loader and the component can receive color and size props:

and the code import a very simple CSS code, exactly the same from loading.io CSS loader:

How to use Loader animation in your React.js application?

So, you have a component that sends a request and stores the received data in an array inside your state object. The obvious thing to do is check if the array is empty and if so, display the spinner.

For this example, I used a Facebook spinner with a very simple page that waiting 5 seconds until to show a list of cars.

It’s very simple to use and allows you to show a nice animation loader until the data is loaded.

Also, you can use a custom color in any spinner, just send a color inside the color property, like this:

<Facebook color="red" />
<Facebook color="#cecece" />

Or be crazy and use a random color with my random color generator component.

<Facebook color={getRandomColor()} />

You can see the result with random color in this live demo facebook react spinner.

If you want to see more react spinners examples, check out my react spinners components collection in bit.dev.

For any issue or missing features, please open an issue on GitHub and I’ll do my best.

And of course, if you like it, star it!

JoshK2 / react-spinners-css

Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular)

💅No extra CSS imports
✂️Zero dependencies
📦Spinners can be installing separately

Live Demo

Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

🚀 List of Spinners - PropTypes and Default Props

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinner	color: string	size: number	className: string	style: object
`<Circle/>`	`#7f58af`	`64`	`""`	`{}`
`<Default/>`	`#7f58af`	`80`	`""`	`{}`
`<Ellipsis/>`	`#7f58af`	`80`

…

View on GitHub

And follow me on Twitter to get features updates.