Starting a new React project sounds like an easy task. We usually run npx create-react-app and the job is almost done. Eventually, we remove the Reactjs logo and change it to “This works”, grab our coffee and enjoy watching some Youtube “Day in the life of software developer” videos.
But then, we get our first assignment and it’s time to get funky.
For most of my work, I used plain javascript and got comfortable with it, probably after watching a lot of Udemy courses from Stephen Grider. But on my latest project, I discovered how typescript can change your life.
Typescript forces you to write as you should. It doesn’t leave you much space to be wild and send some props from one component to another without explaining them first. Before, I would spend hours to find that one variable that I mispronounced but with typescript that is just not possible.
The only downside is that you need to spend more time writing the interfaces and types, but if you work in larger teams that is beneficial in the long run.
I also support javascript. On my personal projects, I usually skip typescript and make sure I don’t make some huge mistakes in the coding process.
I still didn’t convince you to use Typescript?
Creating a Button (must in any project) or any custom component using typescript can save you a lot of time and for example, we will first write code in javascript and it usually looks like this.
Ok, ok I know we can also write it this way :
It will work, but there will be no options showed for you to decide what type of variant there is. Where in the next case:
It will be much clearer what you can use. Autocomplete will help you.
So, if you still cannot decide, investigate the pros and cons of using both and remember the only important thing is to enjoy the process.
Statistics showed that in 2021, there were around 1.35 billion people worldwide who spoke English either as the first or as the second language, and most of the web applications don’t bother with introducing the localization in their app, especially if the app is in MVP (Minimum Valuable Product) state.
But this is one of those things that can backfire on you later on so it’s much better to spend few more minutes now and I will show you how.
Create a new folder inside your src folder called translations and add en.json that looks something like this
We need to create a configuration for accessing these files in the same folder as the translation
And the way we can use it is just by importing it and defining the key value.
One more, great feature of doing it this way is that you will have to autocomplete when you start typing (strings. [autocomplete_key]).
After a few months of working with libraries like MaterialUI, I realised that you will achieve a much faster development time of the app. However, that became obsolete in the web world, especially because designers are aiming at new standards with the general layout of the app.
Of course, we have tools and options to achieve the same things with MaterialUI but in the end, sometimes you just need to do this by yourself without installing large libraries like this one
If you just want to use some of the components is it really worth it?
On most of my projects the components are written from scratch and for styling I usually use scss that is recommended by many other developers including me.
There were few issues with this library, so if you want to be sure it’s working install a specific version: “node-sass”: “4.14.1”. And that is it, you can change all of your files like index.css or App.css to App.scss.
Let's create the Login component with simple stying using scss.
This is just simple stying we applied to make everything inside the main div centered. And also, as we already mentioned above the global configuration, let’s add that really quickly
This will allow you to change colors in the whole application without manually going through the files and changing them one by one.
And at the end, we will just use index.ts for convenient import inside other components.
The good thing about using this approach with scss files is that each element will be unique and will be compiled to Component_class_random_text. (You can inspect this inside the chrome console.)
The example above will be converted into Login_main__FD4NA.
Before starting the journey of creating an amazing web app, we should consider importing these two into our project. It will allow us to see all the files that have been imported but not used and many more things that will make our life easier if we want to write a clean code.
Check out this documentation if you want to investigate more about the differences but the bottom line is this: Use Prettier for formatting and linters for catching bugs. So, basically you need both to achieve a clean structure of your code.
In your project, you should add a couple of configuration files and packages as devDependency to make lint work.
After the successful installation you should run the command:
It will guide you to the setup process and there are few questions you need to answer. I will select in blue what you should pick.
On the last question, I found it easier to just select the Yes option and remove the package-lock.json, node_modules, yarn.lock, and run the yarn install command.
These steps will create a .eslintrc.js file at the root of your project and you can start adding custom rules or remove rules that you don’t need. Optionally you can create a .eslintignore file where you can specify things that should not fall into lint checks.
React comes with predefined lint rules. As we created our own configuration go to the package.json and remove:
The last thing we should do to finalize this step is to add the following line inside the “scripts” section:
And run: yarn lint command
This will list all the files and warnings in your code. If you see this warning at the top of your list: Warning: React version not specified in eslint-plugin-react settings. In your .eslintrc.js file add:
We all have our own styles of coding and that can be seen if you start working on larger projects, so we call Prettier to the rescue. Let’s quickly set this up by running the command:
This will install the prettier globally and now in our project directory install
At the root of the project we need to create a file called .prettierrc.js and add some rules inside that we want to follow:
You can check what each of these rules means here.
To integrate prettier with ESLint we will need few more packages.
eslint-plugin-prettier: Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
Make sure if you are using Visual Studio Code to install the Prettier — Code formatter extension.
If you are just starting with React or have been working for a long time these steps will help you to have that clean and painless architecture that you always wanted. Feel free to ask questions and stay tuned for Part 2.
Rome Wasn’t Built in a Day, But They Were Laying Bricks Every Hour — John Heywood
Supercharged tech team specialized in building startups
1
1
Essays about Software Development in the Startup Trenches
Written by
Software Developer based in Sarajevo, BIH
Essays about Software Development in the Startup Trenches
