ReactJS #2: Explore starter code

ReactJS 0 Comments

react app logo

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 a new react project using the following command or follow lab#1: Start Building with reactjs to set up a 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 the command npm install. The package.json file decides what to be installed based on what is configured in the 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 your 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 the user device’s 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 components 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 next etc.

we can create a separate 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 a “hot module” to reload as change your code.

you can customize or extend the build process by ejecting the default configuration using “npm eject”. but note that The npm eject process can’t be undone. and you need to define the build process on your own using the above-mentioned tools.