Skip to content
Search

DEV Community

Cover image for Create a React project without Create-React-App
Pere Sola
Pere Sola

Posted on • Updated on

 

Create a React project without Create-React-App

#react #beginners

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:

  1. Create a folder in your computer. Open with your code editor.
  2. Create a src folder in your project and create a file called index.html.
  3. Add a skeleton HTML file (you can use Emmet) - type html:5 in your VSCode
  4. Inside <body></body>, create: 
<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Create a script tag inside body: 
<script src="./App.js"></script>
Enter fullscreen mode Exit fullscreen mode
  1. Create a style.css file inside src folder and add your CSS in the head of your HTML file: 
<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

TOOLING

NPM

  1. Initialise npm: npm init -y (make sure node and npm are installed: node -v & npm -v). It creates a package.json file.

PRETTIER

  1. npm i -D prettier
  2. Create format script in package.json: "format": "prettier \"src/**/*.{js,html}\" --write"
  3. Run prettier when file is saved by default: install Prettier in your code editor. Tick Editor: Format On Save (in VSCode) and Prettier: Require Config.
  4. Create .prettierrc file in the root folder of the project: 
{}
Enter fullscreen mode Exit fullscreen mode

Now Prettier will run every time file is saved.

ESLINT

  1. 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

  1. Create .eslintrc.json config 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"
     }
}
}
Enter fullscreen mode Exit fullscreen mode
  1. Then, inside package.json file, 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

  1. Inside root directory, create .gitignore file. 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
Enter fullscreen mode Exit fullscreen mode

PARCEL

  1. 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, in package.json, we create a new script: 
"dev": "parcel src/index.html"
Enter fullscreen mode Exit fullscreen mode
  1. Then when you run npm run dev it bundles the code (it creates a .cache directory 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

  1. npm i react react-dom

  2. Create App.js file inside src folder 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')
);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

DEV Community

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.

Read next

rammcodes profile image

I Created An Open-Source Portfolio Website Template For Developers Called WowFolio 🦄

Ram Maheshwari âš¡ -

anukr98 profile image

Setting up ESLINT with TS/JS in your React project in 2023

Anubhav -

apollolabsbin profile image

STM32F4 Embedded Rust at the PAC: SysTick Delay

Omar.unwrap(); -

codeofaccuracy profile image

Localization in Laravel

Code Of Accuracy -