To make things clear— this blog post is not about the react-widgets library.
What do I mean by “widgets”, then?
Widgets are reusable components that handle both logic/data-fetching and presentation.
Before you accuse me of blasphemy for suggesting not to separate UI and logic, let me give you a few examples the may convince you there’s a place for nuance in the all-mighty rule/pattern of ‘smart-dumb’, ‘presentational-container’, etc.
Use Cases for Widget Components
- When building a component that’s function is tightly coupled to a specific service (for example, a weather widget).
- When a UI component and data/logic component, are used together more often than not.
A reusable component is a component that is often reused — that should be the top criteria for defining the limits of reusable blocks of code. If component A is used together with component B , 90% of the times — they should be shared/published as a single reusable component (at least, as well as separately). - When building multiple apps/static sites around a single headless CMS. If the data source is constant for all apps, it could make more sense to have reusable components manage both UI and data-fetching. That could also enable low-code compositions that can be done by marketing and content teams (instead of software engineers).
-
When building (public) static websites that fetch data from an organization’s internal data.
Say your organization has both an internal Document Management System, and one or more public websites. These websites often include dynamic data that is managed internally in your organization (e.g, contact info, list of branches/offices, up-coming events, etc). You could have components “connected” to your DMS, and since the data-fetching happens only in build-time, there’s no security risk (for example, usingstaticQuery
in Gatsby websites).
Demo: Sharing and Reusing Widgets with Bit
To demonstrate sharing and reusing React widgets, We’ll create an avatar widget that fetches an image according to the user’s ID (and then displays it).
The backend part will be handled by a serverless function deployed to Firebase.
The widget and the serverless function will be built in the same repository. Both will be published to Bit’s component hub .
Bit is a tool and a component hub that manages the entire process of sharing components between separate projects.
Before your components are published to Bit ( Github ), it tracks them in your project, source-controls them individually, and even builds them isolated from your project.
What all that means is — you don’t need to worry about designing your project in any specific way just so you could share components, as you go. Bit pretty much handles everything.
Setting Up Our Project
We’ll first set up new create-react-app with TypeScript:
$ npx create-react-app avatar --template typescript
We’ll then initialize a new Firebase cloud-functions project in our project’s directory (for more info about installing Firebase tools, see here ):
$ cd avatar $ firebase init// then choose 'cloud functions' and other stuff as well :)
This will be our project’s structure:
|-- functions <-- created by Firebase |-- node_modules |-- index.js |-- package.json |--src |-- components |-- Avatar |-- Avatar.jsx |-- Avatar.module.css |-- image_placeholder.svg |-- index.js |-- node_modules// etc.
Building the Serverless Function
We’ll first build our dummy serverless function. It should handle our Avatar’s requests (remember, this function is only for a very simple demonstration).
We’ll then deploy it to Firebase:
$ firebase deploy// then, choose between several options
We’ll then create our Avatar widget:
Publishing the Widget and the Serverless Function
We’ll start by installing Bit :
$ npm install bit-bin --global
We’ll then initialize a new Bit workspace in our project’s root directory:
$ bit init
We’ll then start by tracking the Avatar component:
$ bit add src/components/Avatar
And, the serverless function. Here, we’ll also name it ‘avatar-serverless-function’ using the --id
flag.
$ bit add functions/index.js --id avatar-serverless-function
To save ourselves from long build configurations, we’ll import one of Bit’s compilers . This one is for React with TypeScript.
bit import bit.envs/compilers/react-typescript --compiler
It’s time to tag both ‘components’ (in the broadest sense of the word), the React widget, and the node serverless function. When we “tag”, Bit builds, tests, and versions components.
bit tag -a
Then, set up a (free) Bit account and create a collection
And… publish!:confetti_ball: :confetti_ball: :confetti_ball:
bit export <username>.<collection-name>
Check out the Avatar widget in my component collection:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
RGB转16进制工具
RGB HEX 互转工具
Markdown 在线编辑器
Markdown 在线编辑器