CRA 으로 프로젝트를 생성하면 루트 레벨에 3개의 폴더와 4개의 파일이 생성된다.
- 🗂 node_modules
- 🗂 public
- 🗂 src
- 📃 .gitignore
- 📃 package-lock.json (or yarn.lock)
- 📃 package.json
- 📃 README.md
🗂 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 npm install.
🗂 public
📃 index.html
is the only html file we're going to have in our application. We are building a single-page application, and this is it. The view might dynamically change in the browser, but it is this html file that gets served up.
Typically, we're not going to add any code in this file. (maybe some changes in the head tag, but definitely not in the body tag.)
We want React to controle the UI. For that purpose, we have one div tag with id, equal to root.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
...
</body>root: We call this element as the root dom node because everything inside it will be controlled by react.
When you run the command npm start(or yarn start) this index.html file is served in the browser.
🗂 src
The source folder, we will be working with the most during development.
📃 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
// ReactDOM renders the App component onto the root dom node.The starting point for our react application. In this file, we specify the root component, which is App component, and the DOM element which will be controlled by React.
The DOM element in the example is an element with the id of root. (in index.html)
For this application, the App component is rendered inside the root dom node.
📃 App.js
App component is present in App.js
The App component represents the view which we see in the browser.
📃 package.json
This file contains the dependencies and the scripts required for the project.
📃 package-lock.json
They simply ensure consistent installation of your dependencies.
0개의 댓글
