Most of my React projects have so far been spun up with Create React App. I recently completed a Frontend Masters course where the trainer does a good job explaining how to create a React project from scratch. I thought I would write about it, so that I can remember the steps involved so I can remember and others can learn too:
- Create a folder in your computer. Open with your code editor.
- Create a
srcfolder in your project and create a file calledindex.html. - Add a skeleton HTML file (you can use Emmet) - type
html:5in your VSCode - Inside
<body></body>, create:
<div id="root"></div>
- Create a script tag inside
body:
<script src="./App.js"></script>
- Create a
style.cssfile insidesrcfolder and add your CSS in the head of your HTML file:
<link rel="stylesheet" href="style.css">
TOOLING
NPM
- Initialise npm:
npm init -y(make sure node and npm are installed:node -v&npm -v). It creates apackage.jsonfile.
PRETTIER
npm i -D prettier- Create
formatscript inpackage.json:"format": "prettier \"src/**/*.{js,html}\" --write" - Run prettier when file is saved by default: install
Prettierin your code editor. TickEditor: Format On Save(in VSCode) andPrettier: Require Config. - Create
.prettierrcfile in the root folder of the project:
{}
Now Prettier will run every time file is saved.
ESLINT
- Install stuff:
npm i -D eslint eslint-config-prettier
npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react // config eslint for react
npm i -D eslint-plugin-react-hooks // config eslint for hooks
- Create
.eslintrc.jsonconfig file:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react" // << you don't need it anymore since it has been merged into "prettier" https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
],
"rules": {
"react/prop/types": 0, // unless you do prop types
"no-console": 1, // it will be a warning
"react-hooks/rules-of-hooks": 2,
"react-hooks/exhaustive-deps": 1, // has to do with effects
},
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module", // means we will be using import export
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
- Then, inside
package.jsonfile, we create a new script:
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet" // quiet reports errors only https://eslint.org/docs/user-guide/command-line-interface
You can now run npm run lint.
GITIGNORE
- Inside root directory, create
.gitignorefile. It won't commit the files/directories in the remote repo. Example used in the course:
node_modules/
.DS_Store << if you are in a Mac
.cache/
coverage/
.vscode/
.env
PARCEL
- Parcel is extremely hands-off, no config needed. It is a bundler, it bundles your dev code ready for production. Install
npm install -D parcel-bundler. And then, inpackage.json, we create a new script:
"dev": "parcel src/index.html"
- Then when you run
npm run devit bundles the code (it creates a.cachedirectory that can be ignored. Bable is built into Parcel.
You will also need a build commant to deploy your app in, let's say, Netlify: "build": "parcel build src/index.html". Then, in Netlify, set the build command to be npm run build and the publish directory to be dist.
REACT & REACTDOM
npm i react react-domCreate
App.jsfile insidesrcfolder and type:
import React from 'react';
import { render } from 'react-dom'; // or >> import REACTDOM from 'react-dom'
const App = () => {
return (
<div>Whatever</div>
)
};
render(
<App />,
document.getElementById('root')
);
Top comments (0)