京東移動端元件庫 React 版如約而來

京東零售開源專案 nutui 是一套京東風格的輕量級移動端元件庫，開發和服務於移動 web 介面的企業級產品。隨著 nutui 的使用者越來越多，社群***裡對 react 版本的呼聲也越來越高。我們響應社群的呼聲，2021 年 6 月開始規劃並啟動 react 版的開發。經過長時間的研發與打磨，react 版終於要和大家見面了！

nutui 是一款京東風格的多端統一開發元件庫，之前只有 vue 語言版。它也支援使用 vue3 來編寫可以同時在小程式和 h5 平台上執行的應用，幫助開發者提公升效率，改善開發體驗，降低多端開發成本。

2018 年開源以來，nutui 逐漸受到業界關注。其打造開發體驗佳的初心及持續的打磨公升級受到內外開發者的廣泛認可，對於我們來說無疑是一件備受鼓舞的事情。隨著使用者的增多，社群***裡對 react 版本的呼聲也越來越高。我們積極響應社群的呼聲，2021 年 6 月開始規劃並啟動 react 版的開發，經過長時間的開發與打磨，nutui-react 終於要和大家見面了！

nutui-react 在技術和視覺方面都做出了較大改進，讓元件看起來更絢麗，開發者用起來更舒服。

原始碼搶先看：

手機掃碼體驗

元件概覽

本期共計 45 個元件，包含五大通用類別：基礎、布局、導航、操作反饋、資料錄入及若干京東特色元件，滿足大多數業務場景的需求。

結合專案中的應用，重點關注「資料互動」和「行為互動」類元件，如 toast、dialog 提示類的元件，popup、picker 等選擇面板類的元件，inputnumber、rate、address 等電商風格鮮明的元件，經常搭配用來處理移動端分頁和回到頂部的 infinite 和 backtop 等。

技術看點

1、基於穩定的 react 17

react 17 的定位是讓 react 自身公升級變得更加容易，較之前版本的修改較為平和，重大改動不多。2021 年 11月 15日 react 18 進入了 beta 階段，在面向未來的 react 元件庫中採用 react 17 將有利於元件庫對 react 18 或未來的 react 版本進行，對於您當前的專案公升級到 17 來說成本較低，這也方便您引入 nutui-react 元件庫。

2、按需載入

nutui-react 的 j**ascript **預設支援基於 es modules 的 tree shaking，並提供了詳細的文件支援，簡化的配置選項。這一點也是使用者非常關注的一項技術點，對於我們專案中打包**體積有很好的幫助。

3、支援主題定製

目前 nutui-react 提供京東風格的出廠主題，同時也提供了完整的 sass 檔案，支援通過 sass additionaldata 定義個性化主題。

4、全面使用 typescript

nutui-react 引入 typescript 4，加強了在 typescript 上的嚴格的型別校驗，和 demo 輸出的嚴謹性。我們採用常用**規範如 react/recommended、react-hooks/recommended、@typescript-eslint/recommended、prettier/recommended，以此加強了 stylelint 和 eslint （含 tslint 功能）的校驗，使元件庫在交付質量上更進一步，讓您用著放心。

5、基於 vite 構建工具

元件庫工程基於 vite 構建工具，使用 rollup 的 vite 大大提公升了開發者在開發階段的熱更新效率，同時配置開箱即用。

視覺體驗

文件呈現

快速上手

至此，相信您已經對 react 元件庫元旦版已經有了大概的了解，它像市面上所有的元件庫一樣，希望給你帶來高效、友好的開發體驗。同時，也希望給你帶來更嚴謹的**體驗和更豐富的**示例。希望ta像一本書，供你茶餘飯後，品讀玩味。更希望ta像乙個夥伴，在你工作時間，共創解惑。

安裝

npm i @nutui/nutui-react

專案裡使用 nutui-react

import * as react from "react";
import * as reactdom from "react-dom";
import '@nutui/nutui-react/dist/style.css'
import  from '@nutui/nutui-react';
reactdom.render(
,)

按需載入，有兩種方式

方式一、安裝 vite 外掛程式

npm install vite-plugin-style-import --s**e-dev

在 vite config 中修改配置

import  from "vite";
import react from "@vitejs/plugin-react";
import styleimport from "vite-plugin-style-import";
// export default defineconfig(,
},},
plugins: [
react(),
styleimport(/$.scss`;
},},
],}),
],});

方式

二、使用 webpack 外掛程式

npm install babel-plugin-import --s**e-dev

在 babel.confi.js 裡新增配置

,
'nutui-react']]}

以上，即對元件的按需載入。同時，我們還提供 webpack 的方法，可移步文件中心檢視實踐。

發版計畫

我們將按照 semver 版本控制規範進行發版。目前在 2022q1 階段對已有元件進行專案驗證，和**優化。在此期間，您可以加入到我們的共建計畫中，在 github 上提出您的寶貴建議，以及在使用時遇到的一切問題，我們也會對此每週進行一次小版本的迭代。您也可以在這裡給我們精神支援，點上一顆 star。

京東移動端元件庫 React 版如約而來

京東移動端首頁流式布局

京東移動端分類頁面側導航欄實現

京東風格的移動端Vue元件庫NutUI2 0來啦

京東移動端元件庫 React 版如約而來

京東移動端首頁流式布局

京東移動端分類頁面側導航欄實現

京東風格的移動端Vue元件庫NutUI2 0來啦

相關推薦