React爬坑笔记（二）：一些基础概念

1.工程目录介绍

readme文件

这里是官方的一些介绍，可以全删了写自己的介绍~

（为什么要用pycharm，因为我懒…这里它好像有点不认识JS新版的语法，进去把Hint毙掉就好，凑合着用吧：）

package.json

任何一个脚手架工具都有这个文件，说明这里是node的包文件，会有一些对项目的基本介绍，还有一些指令的介绍。
比如之前用过的start命令。不要去动它。

gitignore

不想上传到git仓库的文件

node_modules/

我们要是有用到的第三方模块文件，后续过程中如果增加新的第三方模块的话会往里面添加，目前也不要动啦。

public/favicon

网页上可以看到tag那里的icon，可以自己用别的图片覆盖掉它。

public/index.html
项目首页的html模板。
title标签会决定tag处的文字，也可以自己改。

noscript标签是提醒用户打开JavaScript，是一段容错代码。

public/manifest.json
当网页成为app时，定义快捷方式，与PWA技术相关。

src/

是项目的源代码目录，我们的代码主要写在这里。

src/index.js
react一条很重要的设计理念是 all in js，因此css通过模块的形式嵌入js里。

src/App.js
logo.svg就是那个旋转的图片。
render函数里返回的就是页面展示的内容啦。

src/registerServiceWorker
借助网页来写移动端app。使用了PWA技术。

src/App.test.js
自动化的测试文件。

因为我小白，所以诸如PWA、自动化测试工具先不管了，全删掉。在关键文件（public/index.html、src/APP.js、src/index.js）中存在一些导入关系的代码、互相调用的代码也要删掉。

在public、scr文件夹中，最后只剩下favicon.ico、public/index.html、src/APP.js、src/index.js四个文件了。

2.react中的组件

html中的每个功能块，可以拆分成不同的组件。
index.html 负责页面显示的html，index.js是整个项目的入口文件。其引入的App.js可以看到一个最基础的组件定义：

当一个类继承（extends）了React.Component类的时候，就是一个组件啦。

 class App extends React.Component{ }

但是这里官方使用的继承方法是：

import { Component } from 'react'
class App extends React.Component{ }

我的版本里甚至直接就来了一个叫App的function了：

function App() {
return (
<div >
helloworld
</div>
);
}

whatever，意义应该都是一样的~
组件内会有一个render()方法，它返回了一个html片段。render返回啥，组件就展示啥。
最后使用

export default App;

导出，并且在index.js中引入，就可以显示出来啦。

index.js中还有一个ReactDOM，这里有一个render（）方法。它帮助我们把一个App组件挂载到id= root的节点下。（root是在index.html中定义哒）

两个js文件中都需要引入React，这里是jsx语法，来编译标签啥的。删掉会报错的！

3.最基础的jsx语法

为了贯彻all in js，所以我们需要在js中写html标签。return时不需要加‘’就可以正常使用标签了。如果需要自定义组件，必须以大写字母开头（比如index.js中 < App />）。