preface

Today, the space may be short, mainly introduces the recent development of a scaffolding – FastReactApp. This is a scaffolding for the React. Js project based on Parcel2. It’s not as hot as Vite and createreAct, which is a solid presence in the front-end world, but the basic project development is ok.

Here are some features of FastReactApp:

  • Off-the-shelf support for JS, CSS, HTML, file assets, and more – no plug-ins required.
  • usedynamic import()Syntax, which splits the output package so that you only load what you need at initial load.
  • When you make changes during development, it automatically updates the modules in the browser without configuration.
  • It uses worker processes to support multi-core compilation, and has a file system cache that can be quickly rebuilt even after a reboot.
  • The tree now vibrates the packet’s source map and displays a friendly error message when referencing unknown symbols.
  • It has onReact Fast RefreshFirst-class support. It is (in most cases) able to maintain state between reloads (even after errors occur).

Let’s define the name FastReactApp, and you’ll see the word Fast, which means “Fast” in Chinese, so how Fast is it? So let’s check that out.

Let’s take a look at how long it takes to install dependencies during initialization.

Only 4.80s was used.

So, let’s look at the time of thermal overload.

It only used 499ms, so it seems very fast.

This is all thanks to Parcel2, which uses worker processes to support multicore compilation and has a file system cache that can be quickly rebuilt even after a reboot. In addition, the dynamic import() syntax is used to split the output package.

Here’s the official website for Parcel2, where you can check out its other features.

https://v2.parceljs.org/
Copy the code

Build FastReactApp project

We first need to install FastReactApp. Here you need to install globally a FastReactCli command scaffolding for FastReactApp, which will generate a FastReactApp project for you faster.

Before installing, you need to make sure your Node version >=12.0.0.

Global installation

npm install fast-react-cli -g
Copy the code

Initialize the project

fast-react-cli init <projectName>
Copy the code

Example: Here, I initialize a project named myreact2 and select [email protected] project template.

Then enter, the project initialization is complete.

Test version

fast-react-cli -v
Copy the code

Our current version of fast-React-CLI is 1.1.7.

Installation project dependencies

We installed FastReactApp using fast-react-CLI. Next we need to install the dependencies for the project. Before installing, you need to pay attention to the following points:

If your project needs to import images, you need to use the @Parcel/Transformer -image dependency, which can resize and change the format and quality of the image. To do these image transformations, it relies on the image transformation library Sharp, so several specific files need to be imported into specific folders under the NPM cache path.

  1. Access to the file

Open the url:

https://github.com/lovell/sharp-libvips/
Copy the code

Find two files that match your computer environment. Here are two files, XXX for computer environment.

1. Libvips 8.9.0 - XXX. Tar. Gz 2. Libvips 8.10.5 - XXX. Tar. BrCopy the code

Darwin x64 generally refers to Mac OS environments and Win32-x64 generally refers to Windows environments.

  1. Find folders

Type the following command to get the NPM cache path:

npm config get cache
Copy the code

Once you have the path, in the _libvips folder, place the two files that fit your computer environment in this folder.

And we’re done.

If your project doesn’t include images, you don’t have to look at this. In addition, you need to remove the @parcel/ Transformer -image dependency from the “devDependencies” property in package.json. You also need to remove the code that introduces images by default, since the dependencies are installed by default.

We tacitly assumed that our project needed it, and then we did all the work above. So now you can install the dependencies.

npm install
Copy the code

Run the project

npm run serve
Copy the code

A disclaimer here is that the project installs mocker-API by default. Mocker-api creates the mock API for the REST API. It can be useful when you are trying to test your application without an actual REST API server. Therefore, use CONCURRENTLY to run multiple commands (both front-end and back-end services). The Mocker-API here is available only in a development environment.

The default port number of the project is 3000, although you can change the default configuration in package.json.

  "scripts": {
    "start": "parcel ./public/index.html --port 3000 --no-source-maps"."build": "parcel build ./public/index.html --no-source-maps"."api": "mocker ./mock/mocker.js"."serve": "concurrently \"yarn api\" \"yarn start\""
  },
Copy the code

–port 3000 Here you can change the port. This command is based on Parcel 2 for more information:

https://v2.parceljs.org/features/cli/
Copy the code

We type http://localhost:3000/ in the browser.

The project started successfully.

Publish the project

npm run build
Copy the code

Build the applications for production into the buildDir folder. It reacts correctly in production mode and optimizes builds for optimal performance. The build is narrowed down and the file name contains the hash.

Your application is ready for deployment.

FastReactApp resources

Now that we’ve introduced the scaffolding project, let’s take a look at what resource dependencies FastReactApp has installed for us by default.

  • parcel
  • concurrently
  • mocker-api
  • eslint
  • babel-plugin-import
  • antd
  • axios
  • immutable
  • react
  • react-dom
  • react-redux
  • react-router
  • react-router-dom
  • redux
  • redux-immutable
  • redux-thunk
  • styled-components
  • web-vitals

We have already introduced the first three before, so we will not repeat them here. Next, we will select a few representative resource dependencies.

Eslint is a must-have tool for modern front-end development. Its usage is simple, but the effect is very great, I do not know how many times to help me reduce the possible bug in the process of use. ESLint is one of the must-have tools for front-end development, and it’s worth digging deeper to understand how it works.

Babel-plugin-import is a Babel plug-in that automatically converts the writing of import to import on demand during compilation.

Antd is a React UI component library based on Ant Design system, which is used to develop enterprise-level middle and back-end products. There are two interesting quotes on the Ant Design 2.0 website that I particularly like.

“Ant Design cannot guarantee that a business product will succeed, but it can help that business product” succeed correctly “or” fail correctly.”

“Ant Design seeks not only the user experience, but also the designer and developer experience.”

Immutable objects are objects that cannot be directly assigned, and are useful in avoiding the problem of incorrect assignment. In React, immutable is used primarily to prevent state objects from being incorrectly assigned. In Rudux, deep copy is too costly in terms of performance (using recursion, copying each node layer by layer). But when you use immutable data: only the nodes you change are copied, thereby saving performance. Immutable makes pure functions more powerful, and the ability to return a new IMmutable function each time makes it easier for programmers to chain operations on it.

Styled – Components have the following points: 1. The style is written in the JS file, reducing the dependency of JS on the CSS file. 2. Styles can be more flexible by using variables. 3, easy to use, no need to configure Webpack, out of the box. It’s All in JS.

The Web-Vitals library is a small (approx. 1K) modular library that measures all web Vitals metrics for real users, accurately matching how Chrome measures these metrics and reporting them to other Google tools (e.g., Chrome User experience Reports, page speed insights, speed reports for the search console).

conclusion

FastReactApp official website:

https://www.maomin.club/site/fastReactApp/
Copy the code