preface

This article will share the following:

  1. Easy to develop a React component
  2. Write a component template template by hand and use Yeoman to develop scaffolding

The source address paste will be used as follows:

Component-template: react-component-template

Yoeman scaffolding source code address: generator-react-component-magic

Easy to develop a React component

Damujiangr’s Yeoman scaffolding is used to build the React component. If you’re not sure what to do with it, use Damujiangr’s Yeoman scaffolding to build the React component

It is recommended that you create the project on Github or GitLab, clone it locally, and perform the following operations to ensure that the project is not generatedpackage.jsonAutomatic fillingrepository,bugs,homepageGit repository information field

  • The first is tool installation
[sudo] npm install -g yo                                 # Yo tool installation
[sudo] npm install -g generator-react-component-magic    # template installation

yo react-component-magic                                 # Project initialization
Copy the code

8. X is recommended for Node. js. Windows may have compatibility problems with WebPack Plugin

  • The following directory structure is generated under the working directory
├─ ├─ package.json ├─ download.config.js ├─ SRC // Source Code ├─ style // Source code style ├─ webpack.config.jsCopy the code

  • SRC directory structure

    ├ ─ ─ __tests__ / / test directory ├ ─ ─ the components / / component │ ├ ─ ─ Block. The js / / single component │ └ ─ ─ __tests__ / / test directory └ ─ ─ index. The js / / the main entryCopy the code

    This structure supports the development and export of a single component, such as block. js in the legend, or the simultaneous development and export of multiple components, creating folders or new files under Component, as long as export is organized in index.js

    Example of a single file export

    import Block from './components/Block';

export default Block;
Copy the code

    Multiple component export examples

    export { default as Block } from './components/Block';
export { default as Other } from './components/Other';
export { default as More } from './components/More';
Copy the code

    Eslint, which is bound by the code specification, follows the Airbnb code specification

  • A rollup. Config. Js

    Export an external chained version of the component for import in HTML via srcipt: SRC

    In configuration, you can specify the name of the variable exposed by the component by modifying output.name

  • webpack.config.js

    NPM start is used to run some configuration from local development

    Resolve. Alias specifies the NPM package name in the configuration

  • Executing NPM run build builds the component code for uploading the NPM, as shown below, and the other style source code is also production code

    ├ ─ ─ dist / / product chain version ├ ─ ─ the esm/product/version ES6 ├ ─ ─ lib/product/ES5 version └ ─ ─ style / / the source code styleCopy the code

    The entry has been configured in package.json:

    "main": "lib/index.js"// The main entrance in general"module": "esm/index.js"// Proposal, used to import the ES Module entryCopy the code

  • Local development tests and test script tests are essential for component development. In this case, you can import the component under development directly in Example, and import the component in Example /app.js for local testing

    import 'react-component-template/style/component.css'; // eslint-disable-line import Block from'react-component-template/src'; // eslint-disable-line
Copy the code

    Run the NPM start command to automatically open the browser and enable the hot update function, which facilitates local development tests

    The test framework uses Jest, you can write the test files in the __test__ directory of each level, execute the NPM run test command to get the test results, and report the code coverage using codecov. If you upload your project to Github and configure Travis CI, Test reports can be uploaded via Codecov

  • Upload the NPM

    Start with an NPM account

    npm version patch[|minor|major]		# control version number
npm publish				# release
Copy the code

    At this point, you’ll have fun developing your own React component and Posting it to NPM to share with others

Write a component template template by hand and use Yeoman to develop scaffolding

A few points to note when writing a component:

  • The final output code, preferably including lib[Babel compiled code], ESM [ES Module format code], dist[external chain version] three formats, to provide a variety of ways for users to reference, of course, ESM and DIST are not necessary

    • It is worth noting that never will rely onreactLibrary packed in

  • Example to have, not only can help their own test, but also can let others refer to faster use

  • Jest is recommended for component test cases, Codecov is recommended for code coverage, and Travis CI is recommended if your code is on Github

  • When publishing an NPM package, you can specify the files field in package.json, which contains folders and files that will be published to NPM

Yeoman scaffolding

The official scaffolding for React is the Create React App, which is highly recommended when developing React projects. For developing React components, it would be overused and complicated. Besides, modifying webpack configuration is a headache for every FE, so I wrote a scaffolding based on Yeoman. Entry is very simple and quick, the main writing process is as follows:

  • Initialize the project directory using yeoman’s officially recommended Generator

    [sudo] npm install -g generator-generator
yo generator
Copy the code

  • Use async/await in conjunction with Promise to control the flow

    1. Download the template from Githubreact-component-templateTo the local temporary directory, with the help ofdownload-git-repo
    2. Copy the required template file to the working directory and delete the temporary directory
    3. In combination withinit-package-json, merge the package.json field information according to the results of the q&A
    4. Replace specific placeholders in the template. A custom complete react component development project is initialized

    The source code can be found at the first link in this article. Welcome Star, PR

    The react – component – the template, the generator – the react – component – magic

At this point, you should be ready to develop your React component and understand the basic concepts of developing component templates. Scaffolding can be based on Yeoman, or you can write one yourself, all to improve engineering and reduce rework

In the last part, advertise to the team, the team size is 20+, mainly responsible for the front-end development of 58 recruitment ecology, various popular technology stack waiting for you to challenge React, Vue, node.js…… Resume please hit over –>[email protected]

I am a pioneer craftsman