文件树如下:
1 | my-react-tutorial |
极为重要的两个文件
Page template
public/index.html
JavaScript entry point
src/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 | import React from 'react'; |
第一句导入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
- 本文标题:初始化后的create-my-react的文件解释
- 本文作者:徐徐
- 创建时间:2020-10-11 16:40:40
- 本文链接:https://machacroissant.github.io/2020/10/11/create-my-react-explanation/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!