标签：工具 his 编译 ice pack 执行 设置 history 写入
data-id="1190000016885142" data-license="">
Node.js并不是一个JavaScript框架，Node.js是JavaScript运行时的运行环境，类比Java中的JVM。
java的开端是什么，无疑是JVM，自从有了JVM，java才能吹牛说自己是“一次编写处处运行”，不管你是windows还是linux，只要安装了对应版本的JVM都可以运行.class文件。
同样Node.js的作用和JVM的一样一样的，也是js的运行环境，不管是你是什么操作系统，只要安装对应版本的Node.js，那你就可以用js来开发后台程序。这具有划时代的意义，意味着一直以来只能在浏览器上玩来玩去的js，可以做后端开发了。
从有了Node.js后就催生出一大批用js做后台开发的前端人员，这部分人员就是偏前端的“全栈程序员”。记住，Node.js是和JVM同等地位的js运行环境，打开了前端人员走向后端的道路。
React设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单。
库（library）：小而巧，库只提供了特定的api。优点是船小好调头，可以很方便的从一个库切换到另外的库，但是代码几乎不会改变。
框架（Framework）：大而全，框架提供了一整套的解决方案。所以，如果在项目中间，想切换到另外的框架是比较困难的。
和Angular1相比，React设计很优秀，一切基于JS并且实现了组件化开发的思想
React提供了无缝转到ReactNative上的开发体验。
+?什么是模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发。
+?什么是组件化：是用UI界面的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发。
+?组件化的好处：随着项目规模的增大，手里的组件越来越多，很方便就可以把现有的组件，拼接成一个完整的页面。
+?Vue是如何实现组件化的：通过.vue文件，来创建对应的组件：
+?template ?结构
+?script ????行为
+?style ?????样式
+?React是如何实现组件化的：React中有组件化的概念，但是并没有像Vue这样的组件模板文件；React中，一切都是以JS来表现的。因此要学习React，JS要合格，ES6和ES7（async和await）要会用
1、运行npm init -y快速初始化项目
2、在项目根目录创建src源代码目录和dist产品目录
3、使用cnpm安装webpack，运行cnpm install webpack -D以及cnpm install webpack-cli -D
4、Webpack4.x提供了约定大于配置的概念，目的是为了减少配置文件的体积；默认约定的 打包的入口是/src/index.js；打包的输出文件是/dist/main.js
5、Webpack4.x 新增了mode选项（必填项），可选值为development和production
6、为了方便运行，配置实时打包编译工具->webpack-dev-server。 ???cnpm install webpack-dev-server -D
7、Webpack-dev-server打包好的main.js是托管到了内存中，在项目根目录的物理磁盘中看不到；但是我们可以认为，在项目根目录中，有一个看不见的mian.js
8、Webpack-dev-server打包后打开的首页是项目根目录，而不是src目录下的index.html。 为了让打包编译后的网页自动打开index.html，就需要用到HtmlWebpackPlugin插件，来在项目根目录下生成index.html。安装并在webpack.config.js的module.exports中配置plugins。
?配置babel的步骤
使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX的虚拟DOM。
//第一种创建组件的方式
function Hello(props) {
????//如果在一个组件中 return 一个 null。则表示此组件是空的，什么都不会渲染
????// return null
????//在组件中，必须返回一个合法的JSX虚拟DOM元素
????return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
????//无论是vue还是React，组件中的props永远都是只读的，不能被重新赋值
}
ReactDOM.render(
????<div>
????????{/*直接把创建的组件名称，以标签的形式，丢到页面上即可*/}
????????<Hello name={dog.name} age={dog.age}
???????????????gender={dog.gender}></Hello>
????</div>
????, document.getElementById('parent'))1、 history：用来跳转路由 路径
2.、Match：匹配结果，如果匹配上就是对象，匹配不上就是null
3、Location：当前路径 pathname当前路径名
//打开webpack.config.js，并在导出的配置对象中，新增如下节点 resolve: {
????????extensions: [
????????????'.js', '.jsx', '.json'
????????]//表示这几个文件的后缀名，可以省略不写（.js和.json是默认有的）
???}????????//alias:别名；这里设置别名是为了让后续引用的地方减少路径的复杂度
????????alias: {
????????????'@': path.join(__dirname, './src')
????????}
?}1、如果一个组件需要自己的私有数据，则推荐使用：class创建的有状态组件
2、如果一个组件不需要私有的数据，则推荐使用：无状态组件
3、React官方：无状态组件由于没有自己的state和声明周期函数，所以运行效率会比有状态组件稍微高一些
1、props中的数据都是外界传递过来的
2、state/data中的数据，都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
3、?props中的数据都是只读的，不能重新赋值
4、state/data中的数据，都是可读可写的
1、history：用来跳转路由 路径
2、Match：匹配结果，如果匹配上就是对象，匹配不上就是null
3、Location：当前路径 pathname当前路径名
1、什么叫 hash 地址，hash 地址就是指 # 号后面的 url
2、假如有一个 Link 标签，点击后跳转到 /abc/def。
BrowserRouter： http://localhost:8080/abc/def
HashRouter： [<u>http://localhost:8080/#/abc/def</u>](http://localhost:8080/#/abc/def)原因在于，如果是单纯的静态文件，假如路径从 / 切换到 /a 后，此时刷新页面，页面将无法正常访问，需要在服务器端进行相关配置
标签：工具 his 编译 ice pack 执行 设置 history 写入
原文地址：https://www.cnblogs.com/lalalagq/p/9898740.html
