Introduction
This article is a presentation of the Create React Template Skeleton :
The project consists in the realization of a template with only the necessary resources for the development of a structured, incremental and maintainable project.
This project does not use the Create React App : https://create-react-app.dev/
The project is from scratch allowing to make progressive improvements without the complexity of the CRA when you want to eject it with the script.
Prerequisites
The project requires no special skills.
npm >= 8.3.0 && node >= v16.13.1
What is React ?
React is an open source Javascript library created by Meta.
The principle of React is to create reusable components in order to develop user interfaces.
The strength of React is that it takes care of rendering in an optimized and intelligent way by applying only the necessary DOM updates.
The key concepts of React are:
- JSX syntax: is a syntactic extension of JavaScript allowing the implementation of HTML on JS. The interest is to be able to do conditioning directly and state management.
- Components: allow to split the user interface into independent and reusable elements (composition).
- Props: are the properties of the components.
- States: are local states used for components.
The different possibilities to make a project React
The interest of the project is that there are several possibilities to make a new project.
- Create React App
- The use of web application bundlers (Parcel, Webpack)
The CRA is a project with all the configurations for 90% of the time that is enough to start a React project. However, its disadvantage is that you don’t have control over it even when you eject the configuration script. Moreover, when you need an industrialization, it quickly becomes complicated to depend on the project (for example, CRA overlay libs).
For the CRT-Skeleton the second solution was used. This article will describe all the configuration for the realization of a project from scratch with the minimum requirements of a project.
The CRT-skeleton project
The project uses the following specificities:
For the use of the project and its language
- React API 17.0.2
- Typescript 4.5.5
For configuration management
- Yarn package manager
- Webpack bundler 5.68.0
- Babel JS compiler 7.17.2
- Prettier configuration 2.5.1
- ESlint linter 8.8.0
For the test strategy
- Jest for unit test 27.5.1
- Cypress for integration test 9.5.0
For versioning
- Git with a preconfigured hooks for formatting the commits
The interest of the project
The project allows to develop quickly a Proof Of Concept or to realize typically a job interview.
The main advantages are :
- Bundler configuration
- The test strategy
- The project structure
- The formatter and the linter
- The flexibility of feature increments
The structure of the project
The CRT-Skeleton respects a simple structure but React does not recommend any particular structure. The user is free to implement his architecture as he wishes.
Here, the project proposes an improvable declination:
- src: At the entrance of the project
The project is configured in the webpack, it launches the CLI webpack serve to point to the index.tsx and index.html
- src/assets: asset source files
Image, css and font resource files are found in this folder.
- src/api: API services for data management
The folder contains all dynamic actions with request and response data from Axios
- src/pages: the core application
The application core containing all the pages of the site with the different components.
- src/components: reusable components
The proposal is to make a complete component with the main component HelloWorld.tsx, the style HelloWorld.css and the unit test HelloWorld.test.tsx
- src/types: the interfaces of the model
All interfaces serving as a model for client and server reception data
- src/utils: utilities, helpers, constants and enums
- .coverage/: UT/IT covers
LCOV coverage reports with HTML for cypress and jest covers
Configuration file
- The Babel compiler is the javascript compiler: It is possible to do in several ways the configuration with specific files or through package.json The CRT-Skeleton uses the babel.config.js
The env preset allows to use the last version of javascript it takes care to make the transformation of the syntax.
The preset-react configuration allows transpilation with the new react 17 version.
The preset-typescript allows the transpilation of TS into JS.
Finally the istanbul plugin allows to do instrumentation for cypress and for class properties soon with ES2022 preset-env will contain directly this plugin.
- Typescript : les règles de configuration TS peuvent etre ecrite avec le tsconfig.json
The esModuleInterop allows JS compatibility.
The jsx for react 17 configuration.
The esnext module specifies the last EMACScript version.
The moduleResolution for the commonJS of node, the lib for the DOM and ES.
The strict for the checking of all options.
The sourceMap for the creation of a source map for the js files generated jsx.map and its json.
The target of EMACScript configuration.
The typescript css module plugin to make our styles of our components in module.
The baseUrl for if we want in the shortened imports, and the types for the tests.
We exclude the node_modules and include from the src for checking TS.
- The yarn packager with the package.json configuration
This file describes the npm configuration of the project, the execution of the scripts, the dependencies, the jest and nyc configuration for cypress and the proxy for CORS.
- The bundler webpack.config.js : allows to make the packaging of all the data with the simplification of the creation of HTML, the management of the env, the modules.
For each module the rules with babel-loader which is used for the transpilation with webpack and babel.
The css-loader and style-loader for the import of style files.
The file-loader for assets files (png,jpg,svg,…).
The HtmlWebpackPlugin simplifies creation of HTML files to serve webkpack plugins.
The devServer change the webpack-dev-server to change the path, the port and open on start server.
The output configuration for build bundle.
- The .prettierrc.json: is the prettier configuration. By default the configurations respect the default of prettier, this file overrides prettier configuration for CRT-Skeleton project
The useTabs by default tabs is false but override to be sure that indent lines with tabs instead of spaces.
The single quotes instead of double quotes.
The printWidth specify the line length that the printer will wrap on.
The tabWidth specify the number of spaces per indentation-level.
The endOfLine for line feed only (linux core) for windows (cariage return + line feed).
- The styling guide : it is possible to customize the coding rules for your project by using prettier configuration above. If you want to be inspired https://google.github.io/styleguide/tsguide.html google use this guide for TS
- The git hooks: the project has a bat script that pre-configures git to respect a commit formatting.
The formatting respects the following standard:
[feat|fix|test|doc] my commit message
The test strategy
The test strategy of a project is a key notion to produce a quality project that can be maintained over time.
The objective is to reduce manual testing by optimizing time through automatic testing. And of course avoid regressions for each new iteration.
The problem is to make automatic tests allowing to verify a maximum of a project while wasting a minimum of time (capacity of the test servers ci/cd, random test failure).
The CRT-Skeleton project uses :
- Unit test
For unit tests, the CRT-Skeleton uses the Jest framework to test the components in order to verify the proper functioning of all the component’s functions.
The testing of user interfaces react must be tested in phase with the user’s usage and the testing library jest allows to do its UI tests.
- Integration test
The integration tests are used to verify the functionality of the requirements. The project uses cypress to have the end to end test.
For assertion tests the CRT-Skeleton uses the Chai library to chain tests with expect/should.
- Code coverage
The coverage allows to have a measure of the rate of executed source code when the test is launched.
Here the idea of the project is to make useful covers that show that the written code is used well in order to avoid dead code. It also serves as a guardian to alert the developer if there was a forgotten use case or problem.
The improvements
- Storybook
The CRT-Skeleton project can use a new StoryBook tool to make isolated components. The interest is when a project becomes more complex and uses a lot of components. The StoryBook catalogs the components by describing all the tools (states, tests, previews, documentations) which allows a much more isolated reuse of the components.
- Profiling monitoring datadog
When putting a large application into production. It is possible to add in addition to the tests other guards to avoid production errors in particular with profiling tools. Datadog offers a profiling react tool to see all the side effects of errors or end to end optimizations. Through a monitoring tool, Datadog offers metrics to identify the causes and log the information required for debugging.
- Style css
There are several ways to style css. The CRT-Skeleton project uses the CSS module so that each component has its own local css and at runtime it is generated in a single css file included by the compiler.
The recommendation is to use for your projects the SASS processors and the styled components.
Tailwind css is especially great for rapid development.
- Docker
It is possible to use docker to containerize all your backend needs for configurable development and deployment.
The project is not intended to do all the specific configurations in order to deploy it in a VPS and to make the connection with a versioning tool for the ci/cd.
- Mochawesome
Coverage reports are often used in a project sold as a proof base. The Mochawesome library allows you to customize the reports by making them clearer and more concise on the test suites.
- And many others SonarSource, Jenkins, …
Conclusion
The CRT-Skeleton project is destined to evolve with each iteration of versions, issues and evolutions. It aims to make a simple project to develop in react from scratch.
The project wants to remain customizable and allow the user to use his preferences.
Finally the project must allow to quickly make a workflow
Thanks for reading my first article.
You will find the link to the github : https://github.com/quentinlao/reactTemplate
