Create projects using the create-React-app scaffolding

Create a new folder and enter the following command on the console:

  npx create-react-app my_project --template typescript
Copy the code

When creating a React project with create-react-app, it creates a Git repository for you and automatically commits it

File Structure description

  1. Public: Used to place public static resources. It does not participate in Webpack packaging. If you put a file in the public folder, WebPack will not process it, and when you pack, the public folder will be copied directly into the folder you built.
  2. SRC:Most of the code we write will be placed in the SRC folder
    • Index.tsx: Entry file for the project
    • App.tex
    • React-app-env.d. ts: introduces predefined typescript types for us
    • Reportwebvitals. ts: Buried point report
    • Setuptests. ts: Configures unit tests
  3. Gitignore: tells Git to ignore files that don’t need to be uploaded
  4. Package. json: defines the dependencies needed for the project, as well as the configuration information for the project (such as name, version, running script, etc.)
  5. Readme. md: Description document of the project
  6. Tsconfig. json: ts configuration file
  7. Yarn. lock: locks the version number

Note: Static assets such as images and fonts used in the project should be placed in assets under the SRC folder

The differences between the public folder and assets folder:

The difference between the two folders is whether they are handled by WebPack. If you put the file in the public folder, WebPack will not process it. When you pack, it will make a copy of the public folder directly into the folder you built. If your image is smaller than the limit size you set under the Loader in WebPack (configurable), it will be compiled into Base64 to reduce HTTP requests in real projects. Placing in the SRC/Assets directory has the following benefits:

  • Scripts and stylesheets are scaled down and bundled together to avoid additional network requests.
  • The absence of a file causes a compilation error, not a user 404 error.
  • The resulting file name contains content hashes, so you don’t have to worry about browsers caching older versions.

If you want your files to be uncompiled, such as jquery.min.js, or compressed JS plug-ins, you can put them in the public folder. This can also reduce the build time of your files and reduce the size of your build files. On the other hand, if you put all your static assets in assets folder, you will find that the final package is very large, which will cause the front page to be blank for a long time. Therefore, you can put some static files that will not change in public.

Source: www.jianshu.com/p/83d540245…