NutUI, the open source project of JD retail, is a set of lightweight mobile component library of JD style, developing and serving enterprise-level products of mobile Web interface. As NutUI gained more users, so did the reaction version in the community community. We responded to the community’s call and began planning and launching the React version in June 2021. After a long period of development and polishing, the React version is finally ready for everyone!

NutUI is a jd.com style multi-terminal unified development component library, previously only available in Vue language. It also supports Vue3 to write applications that can run on both applets and H5 platforms, helping developers increase productivity, improve the development experience, and reduce multi-development costs.

NutUI has been gaining industry attention since it became open source in 2018. Its initial intention to create a good development experience and continuous polishing and upgrading are widely recognized by internal and external developers, which is undoubtedly an encouraging thing for us. As the number of users grew, so did the buzz in the community community for the React version. We actively responded to the community’s call and began planning and launching the React version development in June 2021. After a long period of development and polishing, Nutui-React is finally ready to meet everyone!

Nutui-react has made major technical and visual improvements to make components look more beautiful and comfortable for developers.

Source first look: github.com/jdf2e/nutui…

An overview of the components,

There are a total of 45 components in this issue, including five general categories: basic, layout, navigation, operational feedback, data entry and a number of JD.com characteristic components, which 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 select panel components, InputNumber, Rate, Address and other e-commerce style distinct components. Often paired with Infinite and BackTop to handle mobile paging and back to the top.

Technology to watch

1. React 17 based on stability

React 17 is positioned to make it easier to update React itself, with fewer major changes than in previous versions. React 18 goes into Beta. The adoption of React 17 in the future-oriented React component library will benefit the component library from the implementation of React 18 or a future version of React, The cost of upgrading to 17 is low for your current project, which makes it easy 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, with detailed documentation and simplified configuration options. This is also a technical point that users are very concerned about, which is very helpful for packaging code volume in our project.

3, support theme customization

Nutui-react currently offers jingdong style factory themes, as well as a complete Sass file that supports defining personalized themes through Sass additionalData.

4. Fully use TypeScript

Nutui-react introduces TypeScript 4 to enhance the rigor of TypeScript type validation and Demo output. We use common code specifications like react/recommended, react-hooks/recommended, @typescript-eslint/recommended, prettier/recommended, This enhances StyleLint and ESLint validation (including TSLint functionality), making the component library a step further in delivering quality and making you feel at ease with your use.

5. Build tools based on Vite

Component library project is based on Vite construction tool, the use of Rollup Vite greatly improves the efficiency of hot update developers in the development stage, while configuring out of the box.

Visual experience

The visual specification of Vue 3 version is followed, and JD APP 10.0 design language is used to organize and optimize the existing components in combination with many application scenarios in JINGdong website, which provides a visual standard basis for page development in jingdong website and further improves the definition of standardized design semantics.

Documents presented

Continue the Vue version of the style and habit, convenient for old users to use. In the implementation of a big change, this will be the whole document center from the component library source code split, and adapted to multi-language multi-version of the document display. From a developer’s perspective, the current release needs to focus on the Nutui-Docs code base. As a user, we leave a small egg, part of the components integrated with the “code online editor”, you can edit through online, what you see is what you want the effect, look forward to you find these small eggs, this function is planned to be fully open after the Spring Festival.

Quick learning

Now that you have a general idea of the React Library New Year’s Edition, like any other component library on the market, it promises to be an efficient and user-friendly development experience. At the same time, I hope to bring you more rigorous code experience and richer code examples. I hope TA is like a book for you to read and ponder. More hope TA is like a partner, in your working time, together to solve doubts.

The installation

npm i @nutui/nutui-react
Copy the code

Nutui-react is used 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"))Copy the code

There are two ways to load on demand

Method 1: Install the Vite plug-in

npm install vite-plugin-style-import --save-dev
Copy the code

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: {
        // Configure the nutui global SCSS variable
        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`; },},],}),],});Copy the code

2. Use the WebPack plugin

npm install babel-plugin-import --save-dev
Copy the code

Add configuration to babel.confi.js

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

Above, the loading of components on demand. At the same time, we also provide a Method of Webpack, which can be viewed in the document center.

Release plan

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

Contact us

  • If you are in jingdong station, join dongdong Group: 1025679314
  • Welcome to join the wechat group, add wechat “hanyuxinting”, reply “React” invite to join the group
  • Github address: github.com/jdf2e/nutui…
  • NPM address: www.npmjs.com/package/@nu…