If you are not a newbie with React, you will probably be familiar with create-react-app, a project starter in React developed directly by Facebook and that gives us the option to start an app almost instantaneously, since it hides a large part of the configuration of build . If you are not familiar with React, I recommend that you give it a chance by perhaps making a simple app.
How to create a React project with typescript?
Even so, all the necessary components to start a fully functioning project are not covered. This is why I have prepared a project that adds functionalities (as well as some common dependencies, such as the react-router-dom , for example) from which you can learn more about how React works:
(You can clone the project and follow the readme file to execute it)
This simple app has the most common characteristics that a developer finds when creating a project from 0. So, you can use it as an example or as a starting point from which to make your own decisions or look for alternatives, being its parts Main:
We use react-router-sun
‘Routes.tsx’ shows how to use the routing and parameters of the URL
‘Item.page.tsx’ shows how to receive a parameter from the URL
2. SCSS support
We use node-sass-chokidar
‘navbar.scss’ is an example of a sass file
‘navbar.component.tsx’ is an example of how to import styles from the mentioned file.
3. Make binding of the status and dispatch of the Store with the Props of the component
-‘list.container.ts’ is an example of this binding
4. Loader flag
With a creator of actions in ‘item.actions.ts’, we mark a boolean in the state of our store as a flag in ‘item.reducer.ts’ to represent the state of the application’s load
-‘list.page.tsx ‘uses this value to render the UI differently depending on the flag value
5. Http Requests to the Backend
-‘item.service.ts’ contains all requests to the backend and returns Item entities –
Inside our application we use Item objects (see ‘item.ts’) instead of flat JS objects.
-We use jest -You’ll find
different examples of testing in different layers under the folder ‘/ tests’
-There is not even a .js file in the whole project
The purpose of this “repo” is to provide a project large enough to cover the main concepts of a frontend application and offer a “sandbox” to test and experiment with the technologies and libraries used, while adding new functionalities or those that already exist are changed and improved.
Hopefully, its complexity is simple enough to allow anyone to understand their concepts with minimal effort.