The React version of JD.com's mobile component library comes as promised

JD Retail Open Source Project NutUI is a set of JD-style lightweight mobile components library, which develops and serves enterprise-level products for mobile web interface. With the increasing number of NutUI users, the voice of the React version in the community exchange group is also increasing. We responded to the community's call and started planning and launching the development of the React version in June 2021. After a long period of research and development, the React version is finally here!

NutUI is a JD-style multi-terminal unified development component library, which was only available in Vue language before. It also supports the use of Vue3 to write applications that can run on Mini Programs and H5 platforms at the same time, helping developers improve efficiency, improve development experience, and reduce multi-end development costs.

Since its open source in 2018, NutUI has gradually attracted the attention of the industry. Its original intention to create a good development experience and continuous polishing and upgrading have been widely recognized by developers at home and abroad, which is undoubtedly an encouraging thing for us. With the increase of users, the voice of the React version in the community exchange group is also increasing. We actively responded to the voice of the community, and began to plan and start the development of the React version in June 2021. After a long period of development and polishing, NutUI-React is finally going to meet you!

NutUI-React has made great improvements in both technical and visual aspects, making components look more gorgeous and developers more comfortable to use.

Source code first look: https://github.com/jdf2e/nutui-react

Component

The current total of 45 components, including five general categories: basis , layout , navigation , operational feedback , data entry and features a number of Jingdong components to meet the needs of most business scenarios.

Combined with the application in the project, focus on "data interaction" and "behavior interaction" components, such as Toast, Dialog prompt components, PopUp, Picker and other selection panel components, InputNumber, Rate, Address and other e-commerce style components Components, often used with Infinite and BackTop to handle mobile paging and back to the top.

1, based on stable React 17

The positioning of React 17 is to make it easier to upgrade React itself. Compared with the previous version, the changes are more gentle, and there are not many major changes. November 15, 2021 React 18 entered the Beta phase, adopting React 17 in the future-proof React component library will benefit the component library for React 18 or future React versions, and it will cost your current project to upgrade to 17 Lower, which also makes it easier for you to introduce the NutUI-React component library.

2. Load on demand

NutUI-React's JavaScript code supports Tree Shaking based on ES Modules by default, and provides detailed documentation support and simplified configuration options. This is also a technical point that users are very concerned about, which is very helpful for the size of the packaged code in our project.

3. Support theme customization

At present, NutUI-React provides JD-style factory themes, and also provides a complete Sass file, which supports defining personalized themes through Sass additionalData.

4. Fully use TypeScript

NutUI-React introduces TypeScript 4, which strengthens the strict type verification on TypeScript and the rigor of Demo output. We use common code specifications such as react/recommended, react-hooks/recommended, @typescript-eslint/recommended, prettier/recommended to strengthen the verification of StyleLint and ESLint (including TSLint function), so that the component library is in the delivery quality Go a step further, so you can rest assured.

5. Build tool based on Vite

The component library project is based on the Vite construction tool. The use of Rollup's Vite greatly improves the developer's hot update efficiency during the development phase, and the configuration is out of the box.

Visual Experience

Following the visual specification of the Vue 3 version, using the JD APP 10.0 design language, and combining with many application scenarios in JD.com, the existing components are sorted and optimized, which provides a visual specification basis for the development of pages on the site, and further improves the definition of standardized design semantics.

documentation renders

Continue the style and habits of the Vue version for the convenience of old users. Major changes have been made in the implementation. This time, the entire document center has been split from the source code of the component library, and adapted to display documents in multiple languages and versions. From the developer's point of view, the current version needs to focus on NUTUI-Docs codebase. As a user, we have left a little easter egg. Some components are integrated with an "online code editor". You can edit it online, and what you see is what you want. Looking forward to finding these little easter eggs, this feature is planned for the Spring Festival. All will be open later.

started

So far, I believe you have a general understanding of the New Year's Day version of the React component library. Like all component libraries on the market, it hopes to bring you an efficient and friendly development experience. At the same time, I also hope to bring you a more rigorous code experience and richer code examples. I hope TA is like a book for you to read and ponder after dinner. I also hope that TA will be like a partner, creating and solving doubts together during your working hours.

Install

npm i @nutui/nutui-react

Using NutUI-React in the project

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")
)

On-demand loading, there are two ways

Method 1. Install the vite plugin

npm install vite-plugin-style-import --save-dev

Modify the configuration in 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`;
          },
        },
      ],
    }),
  ],
});

Method 2. Use the webpack plugin

npm install babel-plugin-import --save-dev

Add configuration in babel.confi.js

{
  // ...
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-react",
        "libraryDirectory": "dist/esm",
        "style": true,
        "camel2DashComponentName": false
      },
      'nutui-react'
    ]
  ]
}

The above is the on-demand loading of components. At the same time, we also provide the method of , which can be in the documentation center.

release plan

We will release according to the SemVer version control specification. Currently in the 2022Q1 stage, project verification and code optimization of existing components are carried out. During this period, you can join our co-construction plan, put forward your valuable suggestions on Github , and all the problems encountered during use, we will also make a small version iteration on this every week. You can also give us moral support here, order a Star .

• If you are in Jingdong Station, join the Dongdong group: 1025679314
• Welcome to join the WeChat group, add WeChat "hanyuxinting", reply "React" to invite into the group
• Github address: https://github.com/jdf2e/nutui-react
• NPM address: https://www.npmjs.com/package/@nutui/nutui-react