In the last lesson we have created a project folder, and as I mention make sure that npm start this process whenever you are working on your code. So, now let us walk through React Folder Structure, the number of files and folder we have in the project.

Root level files

So lets now walk through all the file and folder we have on the root level. We got couple of configuration files, the lock files can basically be ignored they are just locking in the versions of dependencies we are using.
the general dependencies our project has are definded in the package.json file and there you can see we have three dependencies we have :

  {
  "name": "burger-builder",
  "version": "0.1.0",
  "private": true,
  "dependencies": {         // Three main dependencies
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  }
  ...
}

And this all created by create-react-app and all the dependencies are which I have mention in lesson 3 ( First React App )

In the package.json there are couple of script defined

  {
   ...
   "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  ...
}

you can run this scripts with npm run /*script_name*/.
start: The exception is start which you can also run with npm start. As you can see it npm start use the React script package with start command there. This command happens to start the development server watch all our code, optimize the code, do all this thing.
build: once you are ready for deploying your app tou can run npm run build to optimize it you more, but not launch the development server. Instade of it it stores the optimize code in a folder because right now you wont see your compiled code any where there, every things happen in memory. will come back for deployment of application later in the course.

Node Modules

node_modules folder holds all the dependencies and sub dependencies of our project. Thats the reason you can see the more amount of folder and files in node modules. we only have react, react-dom, react-scripts but react scripts has a lot of other dependencies. all that little build tools which compile code and so on.

Public folder

The public folder is more interesting. It is the root folder which gets served by the web server in the end though it only holds the files we can edit the script files are added in the src folder.

In the public folder we got one import file index.html this is a normal HTML page and it is still single page we have here we will never add html pages in this project.
So in this single page wherein the end our script files will get injected by the build workflow. which is why you won’t see any script imported there.
You can edit this file but we will never write any html code in :

...
<div id="root"></div>
...

it is the div where we will mount our react application later and we will ofcourse work and React.
Other then that if you want to link some CSS and meta tags you can do that in HTML file.

manifest.json

{
 "short_name": "React App",
 "name": "Create React App Sample",
 "icons": [
   {
     "src": "favicon.ico",
     "sizes": "64x64 32x32 24x24 16x16",
     "type": "image/x-icon"
   },
   {
     "src": "logo192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "logo512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

the manifest.json file is there because create-react-app gives us a progressive web app out of the box. A very basic one atleast and gives us his manifest.json file where we can define some meta data about our application.

src folder

index.js

In a src folder we got a couple of files where we will work on, this actuall our react application. Most important for us right now, the index.js file gets access to document.getElementById('root') element of our DOM in our index.html file. So the element with the id="root" is which ofcourse we see in the index.html file.

  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();

And there as u can see it renders our react application with the ReactDOM.render() method.
There is a refrence of some <App /> object or element which we imported from an app file.

App.js

import React from 'react';
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" >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

This is where we see our first and only React component we have in this starting project.

App.css && index.css

It Also Generated the App.css which is basically defines some styling we us in our App.js file. Though I will say that these are not scoped to App.js file. These are some global stylings.

We have get a index.css which also apply style globally and which should be use for some general setup.

serviceWorker.js

serviceWorker.js file is used for registering a service worker which is also generated automatically thats related to this progressive web app we get out of the box. It will basically pre cache ou script files. we dont need to configure anything in this file.

App.test.js

The App.test.js file, well we will dive into testing later in the course. It basically allows us to create unit test cases for the differenr units for example components in our application.

React introduction
React package