Day3 Hello World + 基础布局分析

前言

记得学所有程序语言刚开始都是从Hello World开始的，所以我们的react也一定要从Hello World开始(固执)，在开始写Hello World前我想先带你们了解前一篇下载的create-react-app到底都帮我们下载了什麽

create-react-app

打开专案後可以看到几个资料夹，分别是:

node_modules

node_modules 是安装node.js後，用来存放各种安装包的地方，光想就很大包，所以有以下梗图:

public

用来存放静态资源

src

基本上是页面所有内容，包含component, image, css..等

gitignore

里面主要是放不想被commit上去的资料夹，或是可以说是想忽略的资料夹

package.json

用来记录你下载了什麽套件的地方

README.md

用来给专案些一些文案的地方，通常会写用到什麽技术，如果是套件，会做简单的教学

yarn.lock

yarn.lock 会在每个安装包被执行前校验其完整性，并且正确执行它

基础布局分析

做任何事都会有规矩，所以当然写react也有他的规矩，会有导入区、事件触发区、画面区(名称是我自己取的，如果有更专业的名称，欢迎告诉我)

请忽略我的手抖，谢谢你

导入区

主要是导入套件或是其他component，都会放在这个区域

事件触发区

主要是去写一些function

画面区

这边主要是放需要render到画面的部分

Hello World

了解基本布局後，是时候该写点东西了，首先聪明你一定知道要写在哪里，导入区?不对啊，这边没有需要导入的套件啊！事件触发区？也没有东西要触发啊，也没有要写function啊，哪只剩画面区，没错，如果只需要render文字在画面的话，就只需要在画面区加入Hello World就好啦~~

总结:

今天说了create-react-app 帮我们设定好的部分，最重要的还是：src, package.json，这两个基本上写专案都会碰到，其他的相比之下就没那麽常见，再来就是基本布局分析，要熟记，没记错的话跟Vue刚好相反，太久没写Vue了，不知道现在改回来了没，一样如果有问题都可留言，我都会回，那我们明天见