React Folder Structure
React has a couple of folders set up configured already after the installation of the starter React app.
Note: Files, folders, and dependencies are installed by the create-react-app tool.
package.json file
The file contains 3 major modules or dependencies — react, react-dom and react-script. For example, react-script (14 - 19) is responsible for the workflow of the app before deployment. The react-script can be used to start an app server, build, store or deploy the app to production in a global server, test the app, and eject all current and future installed dependencies in the file, package.json.
Note: You can not undo the ejection operation. Avoid the command npm eject or react-scripts eject for now!. Instead, the command npm start or react-scripts will be used more often.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}The react-dom gives access to the ReactDOM object whenever you want to render components to the DOM — ReactDOM.render(). Note the react dependency must be installed before you get access to the react-dom dependency (9–11).
eslintConfig
The eslintConfig is a package used with the eslint-plugin-react and Jest rules to support React syntax.
node_module folder
The folder holds all dependencies and sub-dependencies of the module react, react-dom and react-script in the package.json file. Avoid editing files and folders! The entire app relies on the folder.
Avoid editing files and folders!!! The entire app relies on the folder.
public folder
The root folder contains few files such as index.html, favicon.ico, manifest.json, and images for the app icon for different browsers and OS. The index.html contains the root element <div id="root"></div>. This is where components from the index.js file are rendered to the index.html file.
The index.html contains the root element <div id="root"></div>. This is where components from the index.js file are rendered to the index.html file.
Note: Try to inspect the root element to notice nested elements injected into it.
Although we can add some meta element in the head element. The manifest.json is used to define some metadata of the web app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
The src folder contains files to edit.
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Edit the App.js.
App.js
import './App.css';
function App() {
return (
<div className="App">
<h3>Hello World</h3>
<p>You are now editing the <code>App.js</code> file</p>
</div>
);
}
export default App;Note: Exit the server with ctrl + c.
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!!! Sign up today.
