ReactJS #2: Explore starter code
In this lab, we will explore the starter code and will learn basic project structure, folders, and files.
if you have not already set up your project, you can go ahead create new react project using the following command or follow lab #1: Start Building with reactjs to setup brand new project.
npx create-react-app todo-app --typescript
Here is how the initial app folders structure looks like –

c:/codebase/todo-app/
node_modules/
public/
index.html
favicon.ico
manifest.json
src/
App.css
App.tsx
App.test.tsx
index.css
index.tsx
logo.svg
README.md
package.json
tsconfig.json
node_modules
The node_module folder is part of NPM and it is created when you run command npm install. The package.json file decides what to be installed based on what is configured in dependencies and dev dependencies section of package.json.
When you clone any project, you need to run npm install command to install all project dependencies. These all installed dependants packages are available in this folder.
public
This folder includes :
- index.html
- manifest.json
- favicon.ico
let’s have a quick look into these files
index.html
This is the main file that gets served when you run yours react app. All react or typescript code files are injected at build time either in chunks or a bundle in this file.
let’s look into this file content before build
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>ToDo App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
manifest.json
This is a simple web manifest file when it is installed on the user device it tells to the browser about your app and how it should behave on your device.
for example, prompt to add your web app to user device home screen.
{
"short_name": "ToDo App",
"name": "My Simple ToDo App",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
src
This is the folder where our typescript, CSS and react component resides. And, this folder includes :
src/
App.css
App.tsx
App.test.tsx
index.css
index.tsx
logo.svg
index.tsx
this file is the entry point for our application and its mandatory to have in the src folder.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
index.css is root level css file.
App.tsx
This is the root level first react App component.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Welcome to my todo-app.
</p>
</header>
</div>
);
}
export default App;
This functional react component is referenced in an index.tsx to render “Welcome to my todo -app”, and logo as well.
tsconfig.json
This is typescript specific options like what would be target whether es5,es6 or esnext etc.
we can create a seperate file for prod build like “tsconfig.prod.json” and for test build “tesconfig.test.json.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src"
]
}
package.json
The package.json file plays a very important role. In this file, we can configure application dependencies and development dependencies. when you install any npm packages that will by default it is listed under dependencies section of package.json
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "24.0.15",
"@types/node": "12.0.10",
"@types/react": "16.8.22",
"@types/react-dom": "16.8.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"typescript": "3.5.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The script section is by default configures scripts to run, build and test your app if your application is created using create-react-app cli.
internally, create-react-app cli uses webpack , jest and other tools to run , build and test your app. And it also uses “hot module” to reload as change your code.
you can customize or extended build process by ejecting default configuration using “npm eject”. but note that The npm eject process can’t be undone. and you need to define build process by your own using the above-mentioned tools.