day2内容

1.Node.js

1.1 介绍

1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，或者说是一个可以解析和执行Javascript代码的运行时环境。

2.我们在编辑器中写的代码,是需要一个运行的环境的,而js的运行环境就是浏览器中的解析器.

3.Ryan DahI把chrome的V8引擎移动到了服务器端,从而可以解析执行我们的js代码.

4.Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

5.事件驱动：当触发某个事件的时候，执行事件中指定的代码！

6.非阻塞式 I/O 的模型：采用非阻塞的操作，能够提高处理的效率！

7.Node.js 的包管理器 npm，是全球最大的开源库生态系统，网址: npmjs.com

8.Node.js的官网 nodejs.org

9.Node.js的中文官网 nodejs.cn

1.2安装Node.js

1.到node.js官网上下载.msi后缀的安装包.

2.安装的时候,最好以管理员的身份进行安装.

3.也可以到命令行中,切换到当前目录下面,使用命令行进行安装.

4.安装完成之后,重新打开窗口后输入 node -v或是node --version,如果看到版本号即安装成功

1.3 Node.js的功能

1.Node可以作为前端的一个工具去使用,通过NPM安装好用的工具.

2.Node可以开发一些前端的工具【i5ting_toc】

3.Node可以做服务器

4.可以操作数据库并对外提供接口

5.可以实现即时聊天程序.

6.可以制作一些好用的工具,比如编辑器

1.4 Node.js的镜像配置

配置淘宝镜像

由于每次安装包需要走国外的网络，速度很慢，所以，淘宝帮我们在国内创建了一个NPM包托管网站，能够提升使用NPM装包时候的速度！


xxxxxxxxxx
2
1
npm config set registry https://registry.npm.taobao.org --global
2
npm config set disturl https://npm.taobao.org/dist --global

1.5 npm（node的包管理器）

Node.js 的包管理器 npm，是全球最大的开源库生态系统。
先使用npm init -y初始化一下包管理文件package.json，将来所有安装的包，都会记录到这个文件中
使用npm install 包名 --save/--save-dev去安装包；其中，install可以简写成i;
--save表示把包安装到部署依赖中（在开发和部署上线都需要使用的包）； --save-dev表示安装到开发依赖（只在项目开发阶段需要用到的包）；
--save可以简写成-S；--save-dev可以简写成-D;
npm uninstall 包名 --save/--save-dev或者npm remove 包名 --save/--save-dev
npm i webpack -g,其中，-g表示全局安装某些包，通过-g安装的包都在C:\Users\用户名\AppData\Roaming\npm下面

1.6 yarn

yarn和npm的作用完全一样，都是用来管理项目中的第三方依赖包的！
yarn是Facebook公司推出来的一套包管理工具！【后期咱们学习React，尤其是ReactNative的时候，默认就是用Yarn去装包的】
yarn会缓存曾经安装过的包；但是npm也会缓存，但是效果不如yarn明显；
yarn与npm的命令行小结

配置yarn的国内淘宝镜像


xxxxxxxxxx
2
1
yarn config set registry https://registry.npm.taobao.org --global
2
yarn config set disturl https://npm.taobao.org/dist --global

2.react.js环境配置

1.初始化文件


x
1
新建一个项目文件夹比如: myApp，进入此文件夹打开命令行终端，输入以下命令初始化配置文件
2
npm init -y

2.下载部分工具包


x
1
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader file-loader html-webpack-plugin style-loader url-loader webpack webpack-cli --dev

3.在当前文件夹里面新建文件夹src,并建index.html和main.js文件

4.在当前的文件夹里面新建一个文件，名称叫 ".babelrc",里面的代码如下:


x
9
1
{
2
  "presets": [
3
    "@babel/preset-env",
4
    "@babel/preset-react"
5
  ]
6
}

5.在index.html中定义一个div


xxxxxxxxxx
14
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
  <title>Document</title>
8
</head>
9
<body>
10
  <div id="app"> //第一天的div id名称为box
11
    
12
  </div>
13
</body>
14
</html>

6.main.js中引入要使用的文件并书写代码


x
1
import React from 'react' //写完了这行代码之后，打包工具默认就会到当前项目文件夹中的mode_modules增查找对应的模块
2
import ReactDOM from 'react-dom'　　//这个DOM必须大写，与解析的DOM相关的模块
3
//在最新的语法中提倡不加分号
4
const element = <div>哈哈</div>
5
6
ReactDOM.render(
7
  element,
8
  document.getElementById('app')//第一天的div id名称为box
9
)

7.下载react react-dom


x
1
yarn add react react-dom --save

8.在react_start文件夹下面添加一个webpack.config.js的配置文件内容如下:


x
1
var path = require('path')
2
var htmlPlugin = require('html-webpack-plugin') // 引入下载的包
3
module.exports = {
4
  entry: './src/main.js',　//指定一个项目的入口文件
5
  output: {
6
    path: path.join(__dirname, './dist'),
7
    filename: 'hebing.js'
8
  },
9
  module:{
10
    rules: [
11
      {
12
        test: /\.css$/,
13
        loader: ['style-loader','css-loader']
14
      },
15
      {
16
        /** babel-loader es6转es5
17
         *  需要下载的包: babel-loader/babel-core/babel-preset-env
18
         * {
19
              "presets": [
20
                  ["env", { "modules": false }],
21
                  "react"
22
              ]
23
          }
24
         * 
25
         *  还能够将react中的jsx语法转换为js语法!
26
         *  需要下载: babel-preset-react
27
         *  在.babelrc文件中添加配置:
28
         *  {
29
         *     "presets": [
30
         *       "react" // 这个react就表示  babel-preset-react包
31
         *    ]
32
         *  }
33
         */
34
        test: /\.js$/,
35
        loader: ['babel-loader']
36
      },
37
      {
38
        test: /\.(jpg|png|jpeg|bmp|gif)$/,
39
        loader: ['url-loader']
40
      },
41
      { test: /\.(ttf|woff|woff2|eot|svg)$/,
42
        loader: ['file-loader?name=[name].[ext]']
43
      }
44
    ]
45
  },
46
  plugins: [
47
    new htmlPlugin({
48
      // 这个文件，默认会复制到 output.path所指定的路径
49
      template: './src/index.html' , // 指定复制哪个html
50
      filename: 'index.html' // 指定复制后的html叫什么名字
51
  })
52
  ]
53
}

9.修改一下自己的package.json文件,修改成如下内容 (只改第7行)


x
1
{
2
  "name": "react-start",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "main.js",
6
  "scripts": {
7
    "dev": "webpack --watch --progress"
8
  },
9
  "devDependencies": {
10
    "@babel/core": "^7.2.2",
11
    "@babel/preset-env": "^7.2.3",
12
    "@babel/preset-react": "^7.0.0",
13
    "babel-loader": "^8.0.5",
14
    "css-loader": "^2.1.0",
15
    "file-loader": "^3.0.1",
16
    "html-webpack-plugin": "^3.2.0",
17
    "style-loader": "^0.23.1",
18
    "url-loader": "^1.1.2",
19
    "webpack": "^4.28.4",
20
    "webpack-cli": "^3.2.1"
21
  },
22
  "dependencies": {
23
    "react": "^16.7.0",
24
    "react-dom": "^16.7.0"
25
  },
26
  "author": "",
27
  "license": "ISC"
28
}

10.此时在命令行工具里面运行如下命令


xxxxxxxxxx
5
1
npm run dev
2
将会在当前的文件夹里面生成一个dist的文件夹,里面会有两个文件
3
一个是index.html
4
一个是hebing.js
5
打开index.html你就会看到你想看到的内容

3.React.js

3.1 介绍

1.React 是一个用于构建用户界面的 JAVASCRIPT 库。

2.React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

3.React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

4.React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

3.2 React特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 虚拟DOM（Virtual Document Object Model）
- 就是利用JS对象的形式，来模拟一颗真正的DOM树
- 因为浏览器中默认实现DOM更新的方式速度很慢，效率低下，所以需要通过自己用JS的方式实现虚拟DOM，来提高DOM更新效率！
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
7.使用Diff算法处理数据 -计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面

4.应用

4.1设置样式

行内样式设置


xxxxxxxxxx
1
1
const ele =<div style={{width:200,height:300,backgroundColor:'red'}}>Hello World</div>

内嵌的方式设置


xxxxxxxxxx
7
1
const box = {
2
  width:200,
3
  height:300,
4
  backgroundColor:'purple'
5
}
6
7
const ele =<div style={box}>以内嵌的方式来设置样式</div>

外链的方式设置样式


xxxxxxxxxx
7
1
// 写在一个单独的文件当中,比如index.css,在main.js当中引入这个样式文件
2
.box {
3
  width: 600px;
4
  height: 300px;
5
  background-color: orangered;
6
  border-radius: 50%;   /*设置边框的变化*/
7
}

4.2标签间的嵌套


xxxxxxxxxx
24
1
import React from 'react'   //  写完了这行代码之后，打包工具默认就会到当前项目文件夹中的node_modules去查找对应的模块
2
import ReactDOM from 'react-dom'  // 与解析dom相关的模块
3
4
// const ele = <div><p>这是一个段落标签</p><span>112233</span></div>
5
const ele = 
6
(<div>
7
  <h2>师资实训</h2>
8
  <p>这是一个段落标签</p>
9
  <span>112233</span>
10
  <div>
11
    <ul>
12
      <li>10</li>
13
      <li>20</li>
14
      <li>30</li>
15
    </ul>
16
  </div>
17
</div>)
18
19
// 如果有标签的嵌套，推荐使用()括起来,这样方便维护
20
21
ReactDOM.render(
22
  ele,
23
  document.getElementById('app')  // 使用id的方式来获取页面中的元
24
)

4.3jsx中的事件注册


xxxxxxxxxx
23
1
import React from 'react' 
2
import ReactDOM from 'react-dom' 
3
4
5
// const ele = <input type="button" value="按钮" onClick={alert(200)} /> // 此种写法会让事件立即执行
6
7
8
// 在行内直接注册一个简单的事件 写法如下:
9
// const ele = <input type="button" value="按钮" onClick={function(){alert('单击之后才会触发')}} />
10
11
12
// 如果事件函数中的代码非常多的话，可以将代码放在一个单独的函数当中,比如foo函数
13
14
const ele = <input type="button" value="按钮" onClick={foo} />
15
16
function foo() { 
17
  alert('单击之后才会触发') 
18
}
19
20
ReactDOM.render(
21
  ele,
22
  document.getElementById('app')
23
)

vscode快捷键


2
1
ctrl + shift + d  复制当前行到下一行
2
ctrl + d  依次选中和之前项一样的内容