This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Healthy codebase: transpilation, linting and formatting
Awesome css support via PostCSS (including sass)
Development server with hot reloading
Production build and deployment
1. Project setup
mkdir my-react-app
cd my-react-app
mkdir src/
git init
echo'# My Awesome React App'> README.md
Then, create the project's npm package:
yarn init -y
echo'node_modules/'> .gitignore
It's probably that we want to set the module private to prevent accidental publishing. Also, we're going to store all the files inside a src folder, so inside package.json write the following:
{
...
"private": true,
"main": "src/index.js"
}
2. Transpilation with babel
We'll need to transpile the code for two reasons: convert JSX to javascript, and convert javascript features not supported by our target browsers into more standard JS. This two processes are covered by this two babel-preset packages:
The configuration is written inside a .babelrc.json file:
{
"presets": ["env", "react"]
}
The babel-preset-env plugin can be configured to target browsers we want to support, so it will transpile the code according to the javascript features available on that browsers. But the defaults are ok by now.
3. Linting with eslint
A linter is a program that analyzes source code to detect possible errors and maintain coherence in the codebase. The babel-eslint package will allow our linter to parse JSX code, and the eslint-plugin-react includes the react related rules:
One handy feature of npm scripts is the ability to launch a script before another just by prepending "pre" to the name of the target script. You can run the linter before the "test" with this "pretest" script:
{
"scripts": {
..."pretest": "yarn run test:eslint"
}
}
4. Format code with prettier
We want to ensure before every commit that our source files have the same format. This can be done with a combination of prettier, husky and lint-staged:
Note: this doesn't work on Windows (because the environment variables). If you need windows support take a look to cross-env.
If you are planning to deploy the compiled bundle you need to change the public-url parameter to point the root url of your app.
Finally, we don't want our compiled app to be on the git repository:
cat 'build/'>> .gitignore
6. Styles with sass and css autoprefixer
Parcel comes with PostCSS support out of the box. PostCSS can be extended with other languages and preprocessors. Sass is our css language of choice, implemented via node-sass. autoprefixer it's a popular PostCSS plugin that add vendor css prefixes when required:
Hot code reloading means that the browser will reload automatically the app when the code changes. It's a handy development feature (specially if you have two or more screens):
yarn add --dev react-hot-loader
The react-hot-loader is implemented as a babel plugin, so we need to change .babelrc.json configuration:
To enable hot code reloading we should change the above code into this:
/* global module */importReactfrom"react";import{render}from"react-dom";constroot=document.getElementById("root");functionrenderApp(){constApp=require("./App").default;render(<App/>,root);}renderApp();if(module.hot){module.hot.accept(renderApp);}
The first comment tells eslint to treat module as a global object instead of an undefined variable. With the module.hot.accept function we tell react-hot-loader to invoke the renderApp function each time the code changes.
8. Deployment with gh-pages
There are many ways to deploy a serverless app. The quick-and-dirty solution is use github pages (not recommended for production):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters