There exist several ways to create a React app. The most common way is to use the create-react-app from facebook itself. It is a perfect fit for single page apps. There are other use cases where a solution like NextJs by Vercel might fit better, e.g. the requirement of SEO with server side rendering. NextJs requires Node on the production server, create-react-app does not. In this tutorial we go with create-react-app because it fits our needs.
Create-react-app is built with the webpack bundler which supports several loaders. Webpack loaders do transpile newer javascript or even typescript to older javascript (e.g. ES5) which is readable for all browsers. Not only Webpack handles the transpiling, but also supports hot reloading, code splitting and finally the bundling of your production app. So Webpack takes care of a lot of stuff which makes our life much easier.
Before you start with section 1.1, please make sure you have at least installed Node version 16.16.0. Otherwise, you might face problems while going through this tutorial.
With create-react-app it goes stunningly fast to start a new React project. The only thing you need todo is to open your console and create a new project folder by executing the command below. This command is going to download the typescript starter template for new react apps.
npx create-react-app my-project --template typescriptThis one might take a few minutes.
As soon as the installation process is finished, you can test if everything works as expected by starting the app.
To start the app you could open the package.json and execute the start script by clicking the green "play" button.
Alternatively you can execute the script with npm start directly from your console (cd my-project, npm start).
Now you should be able to see the following content in your browser at localhost:3000:
Yay! You've just started the app in the dev mode. Your code changes are going to be hot reloaded in the browser. Awesome! No need to refresh the page after saving your files! Thanks to webpack and create-react-app.
...before we make our first commit, let's add an entry to the recently created .gitignore file to prevent committing our
IDE files. Add a new line .idea/ in case of a JetBrains IDE (e.g. WebStorm or PhpStorm) or
.vscode/ if you use Visual Studio Code.
Before we start building things, I suggest cleaning up the app template a bit.
If we look at our project we can see an src/App.css and an src/index.css file.
Let's delete those imports in src/index.tsx and src/App.tsx and also the css files.
We are going to solve styling issues with styled-components and here is the why:
If we have look at VueJs, there exists a pattern called Single File Components:
In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
https://vuejs.org/guide/scaling-up/sfc.html, 2022-05-16
As you can see, this pattern significantly reduces code complexity.
With unified linting rules a team can agree on the same coding style. This increases the code readability for each individual team member and therefore increases productivity.
Luckily create-react-app comes with installed linting packages out of the box.
I suggest integrating an automatic lint fixing process in your CI pipeline.
If you don't like CI processes to push changes into your codebase,
I suggest integrating at least the check of the linting rules.
To be able to automatically format your code, let's add the prettier plugin for the already installed eslint:
npm install eslint-plugin-prettier@latest --save-dev
Just extend the eslintConfig in your package.json like so:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugins": [
"@typescript-eslint",
"prettier"
],
"rules": {
"prettier/prettier": "error",
"@typescript-eslint/no-redeclare": [
"error"
]
}
},Let's adjust our prettier settings a bit by adding a .prettierrc.js file:
// .prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
bracketSameLine: true,
jsxSingleQuote: false,
printWidth: 120,
quoteProps: 'as-needed',
rangeStart: 0,
rangeEnd: Infinity,
semi: true,
singleQuote: true,
tabWidth: 4,
trailingComma: 'es5',
useTabs: false,
endOfLine: "lf",
};Finally, we need to extend the scripts section in the package.json to easily access
the mentioned two options described above.
"lint": "eslint ./src --ext .ts,.tsx",
"lint:fix": "tsc && eslint ./src --ext .ts,.tsx --quiet --fix"You should now be able to test the linting by running npm run lint in your console.
This prints the result of what needs to be corrected if some code does not correspond with the linting rules.
If you run npm run lint:fix, the code style is going to be automatically fixed when possible.
💡 To make your life easier, make sure your IDE applies the lint fixes after file savings.
Did you notice the tsc && at the start of the lint:fix script?
This is to prevent from automatic lint fixes when type errors still exist.
Once, I forgot to implement this check, and I did run the lint:fix script.
The result was, that the script totally messed up my code base.
Luckily I hadn't committed yet. With this check you are save, or at least a bit more 😇
💡 As a Windows user you could face errors in your IDE after you did a
git commit. This is because Git then automatically replacesCRLF(Windows) withLF(Unix). You can fix that by runninglint:fixafter every commit but this would be really annoying. It's easier to change the end-of-line style of your code editor toLF(e.g. see WebStorm docs) and to adjust the Git configurationcore.autocrlf=false(see this article).