博主忘記介紹當在VS Code安裝好React 之後，會出現三個文件包和四個文件，沒有介紹。現在博主就補回來，然後在下面會介紹。
- package.json 文件：
This file contains the dependencies and the scripts required for the project. You can see that I am using react version and that is listed as a dependency. I also have a few scripts to run the application, build the application, or even run tests.
博主現在用的版本是：
"react": "^16.13.1",
-
package-lock.json文件：
They simply ensure consistent installation of your dependencies and you don’t really have to worry about them. -
node_modules文件包：
This is the folder in which all the dependencies are installed. It is generated when you run the create react app command or when you run NPM install. -
public文件包：
This folder contains some files. The manifest.json concerned with progressive web apps which is out of scope for our discussion.
As a beginner, you only have to concentrate on the index.html file. This file is the only HTML file you are going to have in your application. I am building single page applications and this is said the view might dynamically change in the browser but it is this html file that gets served up. Typically, you are not going to add any code in this file. Maybe some changes in the head tag but definitely not in the body tag. You want react to control the UI and for that purpose I have one div tag with ID is equal to root.
<div id="root"></div>
At runtime, the react application takes over this div tag and is ultimately responsible for the UI.
- src文件包：
The source folder which is the folder you will be working with the most during development. The starting point for a react application is index.js.
In index.js, I specify the root component which is App component and the DOM element which will be controlled by react.
The DOM element in the code is an element with an ID of root and if you can collect this is the element in our index.html. I call this div element as the root Dom node because everything inside it will be controlled by react.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
In the application, the App component is rendered inside the root DOM node that brings me to the app component which is present in App.js.
-
App.js文件：
In the App.js, it is responsible for the HTML displayed in the browser. In other words, the App component represents the view which I see in the browser with App.js create react app also generate the css file for styling and a App.test.js file for the unit tests. -
App.css文件
The css file contains which are applied in the app component. -
App.test.js 文件：
The test file contains a simple test case. -
index.css 文件：
The css file which apply styles to the body tag and the logo.svg which is referenced in the app component. -
serviceWorker.js 文件：
This file is concerned with progressive web apps and can be ignored as a beginner.
When run the npm start, index.html file is served in the browser. index.html contains the root DOM node. Next, control index.js, ReactDOM when there’s the app component on to the root Dom node.
The app component contains the html which is ultimately displayed in the browser.
寫了這麼多，博主就大概總結一下吧：
index.html —調用----> index.js ----調用-----> App.js
index.js ----調用-----> index.css
App.js ----調用-----> App.css
App.js 是經常得用到來做UI的。
如果覺得有幫助的話，就給個讚唄！