前端学习记录

 

1、Node、node.js
运行js脚本的runtime

2、npm
Node Package Manager。NodeJS包管理和分发工具。


3、webpack
webpack 静态模块打包js脚本的工具
webpack.config.js 配置文件
4、webpack-dev-server
webpack-dev-server是一个小型的Node.js Express服务器，注意知识点："服务器"
webpack.config.js

webpack-dev-server基本上就是"webpack打包 + 启动简易服务器"

dev server也是一个轻量级的node.js express服务器，实际上相当于是一个封装好的express的http服务器+调用webpack-dev-middleware

5、express
vue、react是用于实现前端业务逻辑的框架。
express是用于实现后端业务逻辑的框架。
bootstrap是用于解决前端用户界面布局和外观样式的框架.

express 是一个Node.js Web开发应用。提供了中间件和API服务工具.

Express是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。

package.json

express 是一个开源的node.js项目框架，初学者使用express可以快速的搭建一个Web项目，express中已经集成了Web的http服务器创建、请求和文件管理以及Session的处理等功能，所以express是非常适合初学者的入门学习。

6、React：
渲染html页面
js+css+html
nginx把渲染好的html页面返回给浏览器
安装：
方式：
1、直接下载 npm下载，同时使用webpack管理
npm install react --save
npm install react-dom --save
2、引用CDN库

React组件：
用javascript函数把html标签封装起来，形成一个组件。
React渲染组件，也就是相当于定义html标签。
React除了可以渲染html标签外，也可以渲染组件。

React:根据属性props和状态state，生成html标签。属性不可变化，状态可以变化。
使用JSX语法格式来定义组件的话，可以让语法更加面向对象。


react-app-rewired是对create-react-app 进行自定义配置的社区解决方案，实现npm run eject。
推荐使用craco（一个对 create-react-app 进行自定义配置的社区解决方案）。
Craco教程：
https://www.cnblogs.com/chichi13/p/16093914.html


7、Ant Design：
在react项目中安装 antd :npm i antd

8、由于react默认没有router功能，所以需要安装react-router、react-router-dom。

个人理解：
前后端分离本质是：
前端+中间端+后端。
这里的中间端就是： node、js、bootstrap
前端：浏览器只是html的容器


web开发：nginx 专注于http协议的传输
java开发： tomcat 专注于解析java servlet
组合： java + web 开发