DEV Community

loading...
Cover image for ✨Start creating React apps correctly✨

✨Start creating React apps correctly✨

Dmitry Shatokhin
Crustacean, Pythonist, Javascripter. Helping Quarians create the Geths 👨‍💻
Updated on ・4 min read

In this article, I will talk about how I develop React applications. I will share my experience and try to explain why it is necessary to do so.

Documentation first.

Before you start developing an application, I advise you to write documentation for the project. This will help to fully understand the task and determine what tools/approaches are needed to perform this task. It will also help to define the project structure.

Tests.

I gotta be honest, I don't always write tests. But I know it's important. So I recommend you to write them 😂
You'd better try to stick to development through testing (TDD). This approach reduces the risk of bugs and your project will be 100% fit for purpose. It is not necessary to cover all the components with tests. It's like comments:

IDEA
Comments are only needed where they are useful.

State management (Redux, Mobx, Context API).

Fulfillment of all the previous pointsIt allows you to think about state management.
Redux is perfect for big projects.
Mobx - I find it redundant for small projects and not functional enough for large ones. That's why Mobx is for medium-sized projects.
Context API is a Swiss knife. It is suitable for projects of any size. But not yet as flexible as Redux for large projects.

REMARK
The first project that we're create will use context API.

Split React components on components and containers.

It's more of a matter of convenience and conciseness of your application structure. Let's imagine that there are two kinds of components - stupid and smart.
The stupid ones don't interact with the store in any way. They include small features, styles and markup. They are commonly called components.
Smart - on the contrary, they constantly interact with the store and contain a lot of logic. They are commonly called containers.
Thus, the directory src contains two folders components and containers, which helps to better navigate in the project.

Hooks instead classes.

There's been a lot of talk about that. Yeah, so far, the use of hooks has been advisory in nature. But I strongly recommend that you stop using classes. You can also use hooks to manage a component's life cycle, but your application will also be faster, clearer and contain less code.
You'd better read about hooks in the official React documentation.

REMARK
I will create all projects for the blog using the hooks.

Prop-types and contracts.

You can read about prop-types here.
Using this library is quite simple, a bit like the interfaces in TS.
If prop-types can be often found in projects, contracts, unfortunately, are very rare.
Contracts help not only to control types, but also serve as a description of a function and help you understand what this function does.
The contract will not throw an error at an incorrect type and will not stop code execution but eslint will tell you that an incorrect type has been passed to a certain function.
It looks something like this:

/**
* Greet user by name
* @param {string} [name]
*/
const toGreet = (name) => `Hi ${name}`;
Enter fullscreen mode Exit fullscreen mode

Now when you call a function (or hover over it), the editor will show you the description and types for the receiving parameters.
More information about JSDoc can be found here.

Styles with React.

Give up styled-components and inline styles!

Apart from syntax highlighting and normal pre and postprocessor support, styles written in this way are not cached. And in the case of styled-components styles will be compiled each time, which affects performance.
If you like css-in-js, and you're used to styled-components, I recommend you to read Zero-Runtime CSS in JS libraries. For example - Astroturf and Linaria (they have a similar API to styled-components).
If you don't like css-in-js - use css modules.
Depending on the project I use Linaria or css modules. The last one I like more.

Add PWA.

PWA combines native application properties with browser functionality, which has its advantages:

  • PWA is supported by the most popular operating systems;

  • new functionality and updates are added remotely by developers. Users can see the changes and improvements, but they don't need to download the updates themselves;

  • thanks to the Service Worker script, which is run in the background by the browser, and the caching strategy, it is possible to work offline;

  • PWA can be installed without the "Play Market" and App Store, and despite the prohibition to install applications from unknown sources. PWA and antivirus programs are loyal to PWA. At the same time, data is transmitted via HTTPS, so PWA is secure;

  • PWA can be added to the App Store and Google Play, allowing the user to download the application from a familiar source.

REMARK
PWA is not a substitute for a native application.
I will write about how to implement PWA in React in the next article.


That's it.
It doesn't take much to create cool apps on React, does it?

Afterword.

Thank you very much for your attention.
Follow me, it makes me write new articles 😌
I'd be happy for your feedback.
C u!😉

Buy Me A Coffee

Discussion (0)

Forem Open with the Forem app