NutUI React 版如約而來
京東零售開源專案 NutUI 是一套京東風格的輕量級行動端元件庫，開發和服務於移動 Web 介面的企業級產品。隨著 NutUI 的使用者越來越多，社群交流群裡對 React 版本的呼聲也越來越高。我們響應社群的呼聲，2021 年 6 月開始規劃並啟動 React 版的開發。經過長時間的研發與打磨，React 版終於要和大家見面了！
NutUI 是一款京東風格的多端統一開發元件庫，之前只有 Vue 語言版。它也支援使用 來編寫可以同時在小程式和 H5 平臺上執行的應用，幫助開發者提升效率，改善開發體驗，降低多端開發成本。
2018 年開源以來，NutUI 逐漸受到業界關注。其打造開發體驗佳的初心及持續的打磨升級受到內外開發者的廣泛認可，對於我們來說無疑是一件備受鼓舞的事情。隨著使用者的增多，社群交流群裡對 React 版本的呼聲也越來越高。我們積極響應社群的呼聲，2021 年 6 月開始規劃並啟動 React 版的開發，經過長時間的開發與打磨，NutUI-React 終於要和大家見面了！
NutUI-React 在技術和視覺方面都做出了較大改進，讓元件看起來更絢麗，開發者用起來更舒服。
★原始碼搶先看：
」
手機掃碼體驗
NutUI 體驗二維條碼
元件概覽
本期共計 45 個元件，包含五大通用類別：基礎、佈局、導航、操作反饋、資料錄入及若干京東特色元件，滿足大多數業務場景的需求。
結合專案中的應用，重點關注「資料互動」和「行為互動」類元件，如 Toast、Dialog 提示類的元件，PopUp、Picker 等選擇面板類的元件，InputNumber、Rate、Address 等電商風格鮮明的元件，經常搭配用來處理行動端分頁和回到頂部的 Infinite 和 BackTop 等。
img
技術看點
1、基於穩定的 React 17
React 17 的定位是讓 React 自身升級變得更加容易，較之前版本的修改較為平和，重大改動不多。2021 年 11 月 15 日 React 18 進入了 Beta 階段，在面向未來的 React 元件庫中採用 React 17 將有利於元件庫對 React 18 或未來的 React 版本進行，對於您當前的專案升級到 17 來說成本較低，這也方便您引入 NutUI-React 元件庫。
2、按需載入
NutUI-React 的 JavaScript 程式碼預設支援基於 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 大大提升了開發者在開發階段的熱更新效率，同時設定開箱即用。
視覺體驗
沿用 Vue 3 版本的視覺規範，使用 JD APP 10.0 設計語言，結合京東站內眾多應用場景對已有元件進行了梳理優化，為站內頁面開發提供了視覺規範依據，進一步完善標準化的設計語意的定義。
img
檔案呈現
延續 Vue 版本上的風格和習慣，方便老使用者使用。在實現上做了較大改動，本次將整個檔案中心從元件庫原始碼中進行了拆分，並適配多語言多版本的檔案展示。從開發者的角度上，當前版本需要關注 程式碼庫。作為使用者，我們留有一個小彩蛋，部分元件整合了「程式碼的線上編輯器」，您可以通過線上編輯，所見即所得您想要的效果，期待您找到這些小彩蛋，此功能計劃春節後將全部開放。
快速上手
至此，相信您已經對 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 { Icon } from '@nutui/nutui-react';
ReactDOM.render(
<div className="App">
<Icon name="dongdong"></Icon>
</div>,
document.getElementById("app")
)
按需載入，有兩種方式
方式一、安裝 vite 外掛
npm install vite-plugin-style-import --save-dev
在 vite config 中修改設定
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import styleImport from "vite-plugin-style-import";
// https://vitejs.dev/config/
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
// 設定 nutui 全域性 scss 變數
additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
},
},
},
plugins: [
react(),
styleImport({
libs: [
{
libraryName: "@nutui/nutui-react",
libraryNameChangeCase: "pascalCase",
resolveStyle: (name) => {
return `@nutui/nutui-react/dist/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss`;
},
},
],
}),
],
});
方式二、使用 webpack 外掛
npm install babel-plugin-import --save-dev
在 babel.confi.js 裡新增設定
{
// ...
plugins: [
[
"import",
{
"libraryName": "@nutui/nutui-react",
"libraryDirectory": "dist/esm",
"style": true,
"camel2DashComponentName": false
},
'nutui-react'
]
]
}
以上，即對元件的按需載入。同時，我們還提供 webpack 的方法，可移步檔案中心檢視。
發版計劃
我們將按照 SemVer 版本控制規範進行發版。目前在 2022Q1 階段對已有元件進行專案驗證，和程式碼優化。在此期間，您可以加入到我們的共建計劃中，在 上提出您的寶貴建議，以及在使用時遇到的一切問題，我們也會對此每週進行一次小版本的迭代。您也可以在這裡給我們精神支援，點上一顆 。
聯絡我們
-
Github 地址：
-
NPM 地址：