Let’s create a React app from scratch

npx create-react-app [your project name]
node -v
npm
-v
npm init -y
git init            
npm install -D eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
{
//the order of the "extends" array matters.
"extends": [
"eslint:recommended", //loads all of the eslint:recommended rules including white space rules.
"plugin:import/errors", //https://www.npmjs.com/package/eslint-plugin-import
"plugin:react/recommended", //https://www.npmjs.com/package/eslint-plugin-react
"plugin:jsx-a11y/recommended", //https://www.npmjs.com/package/eslint-plugin-jsx-a11y
"prettier" //turns off the eslint white space rules and other rules it knows how to handle specifically.
],
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/prop-types": 0, //turns off props types '0' means turn off
"react/react-in-jsx-scope": 0 //turns off requiring to import react in every file
},
"parserOptions": {
"ecmaVersion": 2021, //use the most modern version.
"sourceType": "module", //we will be using ES Modules
"ecmaFeatures": {
"jsx": true //we will be using JSX
}
},
"env": {
//describe the environment this code will run in
"es6": true, //eslint won't throw error if we try to use es6 methods like map() or reduce().
"browser": true, //eslint won't throw errors if we use fetch() or the window object
"node": true //eslint won't throw erroes if we try to access things in a node environement like 'golbal' or 'process'.
},
"settings": {
"react": {
"version": "detect" //tells eslint to look at the package.json and figure it out
}
}
}
~By @RyanCahela
npm install react react-dom
npm install -D parcel
"scripts": {
"dev": "parcel src/index.html"
},
  • Note: If you don’t use parcel, you can use babel package.
  • index.html => Inside index.html, create a div with the id of root & a script tag pointing index.js with type module attribute
<div id="root"></div>
<script src="index.js" type="module"></script>
  • index.js => Inside index.js, import react-dom, import App from attach app to the root element by calling reactdom.render
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
  • App.js => Inside App.js, create a function called app that returns a jsx with what you want to return
function App() {
return <h1>Hello REACT</h1>;
}
npm run dev

Conclusion

We just briefly learned how to create a react app from scratch.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store