文件树如下：

my-react-tutorial
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

极为重要的两个文件

Page templatepublic/index.html
JavaScript entry pointsrc/index.js

以上两个文件必须以此命名并存放在该路径，其余文件可以自由命名。

README.md

从命令行角度来说明如何整体操作项目，包括启动项目、初始化项目、构建项目、部署项目。

package.json

这是所有的npm包在项目根目录都有的一个文件。

该文件包含了Node.js/npm为了建立起具体项目的元数据(metadata)，包括依赖包(dependencies)、项目版本(version of the project)、许可证信息(license information)、配置信息(configuration data)。

node_modules

如果有人使用了npm下载了你的项目，所有列出在package.json中的依赖包都会被下载并放到./node_modules目录下。

如果自己在本地项目的根目录下运行命令行npm install，那么下载的依赖包就会被放到./node_modules目录下。

因此，我们通过在命令行中运行npm create-react-app my-react-tutorial，就是下载了React官方发布的项目，且列出在package.json中的所有依赖包都被我们下载并放到了./node_modules目录下。

public

只有在public目录中的文件才可以被public/index.html使用。一般来说除了修改title元素的内容来更改应用程序的名字，其他index.html中的内容都不应当被编辑，除非你清楚自己在进行什么样的操作。

public目录只有在build和deploy的时候会被更新。

src

该目录存放该项目的JS以及CSS文件，只有src目录下的文件才会被Webpack静态模块打包器处理。可以在src目录中新建子目录。

React将src目录中的代码嵌入到HTML文件的DOM树中，从而让浏览器能够解析出index.html文件。

关于index.js的解读

顶部`import`语句

1
2
3

import React from 'react';
import logo from './logo.svg';
import './App.css';

第一句导入React库，这一步的目的是允许React库将JS文件中的JSX语句转换成React.createElement()。所有与React相关的部分都需要包括这个React库。

这里值得注意的是，我们没有给import React指定路径，是因为React是作为一个依赖库存在于package.json中的。

第二句导入一个当前文件夹下的普通文件，需要指明路径。

第三句是导入CSS文件，这里直接就是就是路径，没有变量名也没有from导入。

中间class/函数组件

组件名称遵循pascal-case variable，一定要大写。

对于JSX写法的元素(element)设定属性(attribute)，和HTML中写法大致一致。区别在于HTML中元素的class attribute到JSX中变成了className attribute，这是因为class作为关键字被使用了。

底部`export`语句

一个.js文件底部的export default this-js-name.js使该文件能够在其他的.js文件的顶部利用import导入并使用。

参阅

create-my-react document: folder structure

MDN web docs: React getting started

What is the file package json

前端基础配置详解

webpack配置解释