初始化后的create-my-react的文件解释
徐徐 抱歉选手

文件树如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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配置解释

  • 本文标题:初始化后的create-my-react的文件解释
  • 本文作者:徐徐
  • 创建时间:2020-10-11 16:40:40
  • 本文链接:https://machacroissant.github.io/2020/10/11/create-my-react-explanation/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论