虽然说要熟悉react,但是之前学的vue也不能忘。
今天学vue+webpack,从零开始搭建项目。
第一步:npm init
第二步: npm install webpack vue vue-loader
第三步:npm i css-loader vue-template-compiler
第四步:新建src文件夹创建vue文件
webpack打包的资源是需要通过http一起加载的内容,比如说css,javascript等,全部被写在webpack里。
第五步:创建webpack.config.js文件
因为vue无法直接被webpack加载,所以需要创建index.js,将app.vue页面挂载到html中,这样就可以间接加载
vue文件了。
index.js的操作如下:(vue挂载html,js作为入口文件)
import Vue from ‘vue’
import App from ‘./app’
const root = document.createElement(‘div’)
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
第六步:配置webpack.config.js,配置入口文件和出口文件。
注意:path.join(__dirname,当前路径)
(注意:所有的js文件都可以用node.js,包括webpack.config.js也是!比如const path = require(‘path’) )
(可以管module.exports叫做“打包”)
如下:
const path = require(‘path’)
module.exports={
entry:path.join(__dirname,‘src/index.js’),
output:{
filename:‘bundle.js’,
path:path.join(__dirname,‘dist’)
}
}
webpack.config.js的output文件就是运行在浏览器的js代码。该js代码也称作“脚本”,也就是"scripts",配置
在package.json的"scripts"中,“build"是新取名字(是的,js代码就是运行在脚本上的)
第七步:将webpack.config.js写进package.json的脚本中:
(“build”)
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”:“webpack --config webpack.config.js”
},
第八步:npm run build
(webpack暂且搁浅了,因为学的版本太低了,有很多bug。。。)
下午:
发现解构赋值是用在let,const上的,但是发现解构赋值原来是用在初始化的时候的。
let [a,b,c]=[1,2,3]
let {a,b=20} = {a:20} //b=20是设置默认值
解构赋值,一种是数组解构赋值,一种是对象解构赋值,哪种都可以,只要对称就行。
举个例子:
let c = [1,2,3,4,5] let [a,b,f]=c
那么a ==1
允许参数设置默认值是从es6开始的。以前设置默认值是y = y||‘hello’,现在设置默认值是
log(x,y=‘hello’),若y没有值就取’hello’,和y=y||'hello’是一个意思。
看一下es6对于对象设置默认值的两种写法,分析一下他们的区别:
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
就从写法一看吧,就很正规,给x和y互相设置了默认值。作为参数传递,传递的是对象,但是对象就算不给x或y
设置值,也不影响默认值。
从写法二看吧,设置的默认值只有一个,是对象。就是:{x:0,y:0},意思就是说,如果传入的是{x:3} ,那就是一个对象
传进去了,对象都传进去了,那默认值是对象就没有用了,结果依旧是这个对象,{x:3},
{x:3}扩展也就是{x:3,y:undefined}
关于es6的rest参数,其实看了例子就知道了,传入的参数不止一个,用rest参数。
rest参数的那个变量可以当数组对待了。
例子1:
function add(…values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
输入:
add(2, 5, 3) // 输出:10
例子2:
function a(…values){
for(var i =0 ; i<values.length;i++){
console.log(values[i],‘i’)
}
}
输入:
a(7,8,9,10)
输出:
7 “i”
8 “i”
9 “i”
10 “i”
es6进阶:
当我们需要严格地判断NaN和-0时,可以使用Object.is(…)
总结:
再一次深入明白解构,如果是数组解构就要数组对数组,对象对对象,要对称解构。同时,解构赋值用在初始化变量时。
对象设置默认值有两种方法,一是对属性设置,而是对对象设置,两者有区别。
默认值是从es6开始的。
rest参数,参数大概跟数组的使用方法一致。
Object.is()…
es6进阶:https://juejin.cn/post/7016520448204603423
rest参数和扩展运算符:
很容易混淆的点,rest参数和扩展运算符都是…xx
但是rest参数传的是a,b,c, …x,x是数组。
扩展运算符是 …数组, 所以…数组的结果是a,b,c。
就是(其实rest参数和扩展运算符遵循的规则是一样的)
(a,b,c) = …x
…x = a,b,c
[…x] = [a,b,c]=[x]
现在应该明白了 :
…数组===a,b,c 数组是数组变量,…数组就是a,b,c了。要区分开。
同时:
…Set结果也是a,b,c一样的意思。
在反义字符串里,${}里可以放变量,也可以放表达式,比如
里
面
装
s
c
o
r
e
>
60
?
′
的
成
绩
合
格
′
:
′
的
成
绩
不
合
格
′
外
面
再
加
{} 里面装score>60?'的成绩合格':'的成绩不合格'外面再加
里面装score>60?′的成绩合格′:′的成绩不合格′外面再加{name}
完全ok,也就是,const result = ${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}
;
精确搜索用find,不精确用filter,记得return.(用find是为了性能优化,当找到item的时候返回结果为true的item)
Object.values()可以获得对象属性的所有值。并且是一个数组。[m1,m2,],m1是第一个属性的值,m2是第二个属性的值。
!!!一个新的数组方法,flat方法,如果使用.flat(Infinity),则不管是几维的数组都会变成一维数组。(记得传入了Infinity)
举个例子:const arr2 = [0, 1, 2, [[[3, 4]]]];
输入:arr2.flat(Infinity)
输出:[0, 1, 2, 3, 4]
flat方法也叫扁平化方法。
es6的新方法之可选链操作符?.,使用方式:
https://www.jianshu.com/p/2852b6efed8e
可选操作符可用于深层访问属性。
https://juejin.cn/post/7016520448204603423
学习就是要多看文档,多敲代码
回到学习react~
关于如何创建一个react项目:
首先安装react的脚手架:npm install create-react-app -g
然后创建项目(找一个路径):create-react-app my-project
出现:
We suggest that you begin by typing:
cd my-project
npm start
Happy hacking!
按说的来做就好了。
关于npm start!!:就是本地开启一个服务器。
开始创建一个js文件,写完一个react组件后,在src/index.js中将该组件挂载在reactDom里
(在src创建welcome.js:(模仿app.js敲的)
function Welcome() {
return (
< div >
12345678910
< /div >
);
}
export default Welcome;
在src/index.js中,将welcome.js代替app.js引入到reactDom里:
如下:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import Welcome from ‘./Welcome’
import reportWebVitals from ‘./reportWebVitals’;
ReactDOM.render(
<React.StrictMode>
< Welcome />
</React.StrictMode>,
document.getElementById(‘root’)
);
reportWebVitals();
不知道为啥QQ浏览器显示不了所以我用ie可以
总结:ReactDom.render()存在于index.js中,表示将组件挂载在dom节点上。
在return里面有段很像html的,不管它叫html,而是jsx
!!!!!!!!!!!!!!!!React的语法很简单:就是花括号里加表达式。
就是像Welcome.js:
function Welcome() {
return (
< div>
{12+34}
< /div>
);
}
export default Welcome;
这里{12+34}就是react语法。
看一下数组的显示:{[1,2,3]} 结果显示在页面是:123
当然花括号里可以直接加jsx表达式,如{ < p > this is jsx < /p >} (当然jsx不必加上花括号~)
总结!!!:jsx可以是一段html标签代码,可以是{}里加表达式,这两种都是jsx。(很简单,react就是js语法,按这个逻辑敲代码,
就知道什么时候需要{},什么时候不需要了。)
作为变量都需要{}加上
变量的创建写在return之前。
做一个遍历的例子:
function Welcome() {
const list1= [1,2,3,4];
return (
< div>
< ul>
{list1.map(item=>
< li>{item}</ li>)}
< /ul>
< /div>
);
}
export default Welcome;
结果:
1
2
3
4
跑个题:(不属于react/jsx,纯js语法)
关于list.map对了更加深刻的认知,它就像是在改造一个数组,也就是数组的再加工,例子:
比如原先数组长这样:var names = [‘Alice’, ‘Emily’, ‘Kate’];
想把数组变成:["< h1 >helloAlice</ h1>", “< h1>helloEmily< /h1>”, “< h1>helloKate< /h1>”]
这样子就行:
var arr = names.map(item=> {return <h1>hello${item}</h1>
})
知道map的作用不如知道map怎么用~
v-if在react中用三元表达式。(三目运算符)
代码如下:
function Welcome() {
const show = true;
return (
< div>
{show?< p>你已经显示< /p>:< p>你从未显示< /p>}
< /div>
);
}
export default Welcome;
一个小总结:js用{},如果在js中出现了html,html不用加花括号,如果在html中出现了js,需要给js加花括号。
注意一个点:
在react中,因为class这个关键字已经被用作组件的关键字了,所以原本css标签表示class的变成了“className",不过只是名字
发生了变化而已,差别不大)
而css中的属性"for",也变成了"htmlFor"
一个关于react的源码理解:其实jsx本质上是一个React.creatElement语法糖罢了。
看到有个视频讲组件,我有种瞬间恍然大悟的感觉。原话如下:
props属性:组件就像一个函数一样,接受特定的输入(props), 产出特定的输出(React elements)
是的,props就是输入~ 组件就是函数~
V=f(props)
属性支持多种数据类型。字符串,数字。都可以。