前端学习笔记

目标： 使用react + ant design构建出一个前端项目，并且可以自由的添加组件

已会： html、css、js

所需前置知识： ES6，nodejs，webpack，jsx，react，typescript

学习路线如下：

1、nodejs安装，会npm install装包和npm start项目即可

2、webpack是做什么的，一个项目打包工具，可以把ES6语法转化为浏览器能识别的ES5语法

webpack教学

简洁教程：https://www.runoob.com/w3cnote/webpack-tutorial.html
详细教程：https://www.jiangruitao.com/webpack/rudiments/

3、JSX是使用React的一种语言，能够html和js混写，完全兼容js，文件名字后缀为.jsx

JSX：js和html相结合的一种新的“语言”，浏览器无法识别，需要经过编译成js代码才能运行

4、ES6是新版本的js，有更多的新特性和新语法

ES6教程（js的新版本，新增了一些新的语法）

5、typescript是js的超集，完全兼容js，有更多的语法和特性

ES6是Javascript语言的标准，typescript是ES6的超集。

5、React

我们常说的React其实包括React和ReactDOM2个部分组成

强烈推荐入门教程：

https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

一个基本React项目结构：

src：存放源码

public：目录 public 包含了开发应用时浏览器会读取的文件，其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件，从而浏览器才能运行此文件。

package.json：包管理

index.js是程序入口，App.js是一个react模块

moz-todo-react
├── 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

6、ant design如何使用

官网地址：https://ant-design.antgroup.com/components/overview-cn

其本质就是提供了一些组件，我们可以直接从官网复制代码到本地，例如button，topbar。