01_day1_环境安装

1.课程安排

项目名称:优购商城
主要技术栈:react.js，node.js，antd-mobile，webpack，create-react-app等
用react.js框架做一个优购商城项目的开发，是向后端发请求获取数据来呈现界面，react.js是一个用得最多的框架，vue, react.js用得比较多，ANGELA5一般不用了。
Vue做pc端做移动端框架不成熟
react.js+antd-mobile（UI框架）做移动端
node.js，下载依赖包，接收栈
webpack自动化构建工具，将jsx的语法转换成浏览器能识别的语法，
create-react-app更快捷的脚手架。

2.环境准备

硬件:
- 笔记本电脑，建议windows7以上操作系统，最好是windows10
软件(下列软件我们会单独提供)
- Chrome浏览器
- vscode及插件配置
- NodeJS
- NotePadd++
- Typora

3.环境配置

3.1 node的安装配置

:react.js的jsx版本转为浏览器可识别的就必须要安装node.然后用npm包下载相关的第三方插件。node不是一门语言，是一个语言运行时。是用js 开发的，我们知道浏览器有一个渲染引擎，一个解析器，v8引擎。把谷歌引擎移植到了服务器。2019-6-16日下载了node-v10.16.0-x64。.https://nodejs.org/en/download/　下载安装，https://www.npmjs.com下载一些包或第三方插件。

找nodejs的安装包,找到对应的版本,直接双击即可.

安装完成之后查看是否安装成功的命令，打开终端:


1
node -v // 查看版本号,如果出现了版本号，就说明是安装成功了

为了下载依赖包或是模块更快,需要将镜像修改为国内淘宝的镜像


xxxxxxxxxx
3
1
npm config set registry https://registry.npm.taobao.org -g
2
npm config set disturl https://npm.taobao.org/dist -g　
3
npm config ls /查看是否正确安装镜像

3.2 yarn的安装配置

Yarn 是 Facebook 推出的包管理工具, 可以加速 node 模块的下载,

安装命令


xxxxxxxxxx
1
1
npm install yarn -g

测试是否安装完成


xxxxxxxxxx
1
1
yarn -v

安装完毕后可以设置 Yarn 安装模块的镜像地址 global


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

下载对应的模块或是包


xxxxxxxxxx
1
1
yarn add jquery

4.ReactJS环境配置

0初始化文件


xxxxxxxxxx
2
1
// 新建一个项目文件夹,并在此文件夹中打开命令行终端，输入以下命令初始化配置文件
2
npm init -y  // 执行快速初始化 会产生package.json文件

1.下载包


xxxxxxxxxx
3
1
在自己的文件夹下面新建一个项目文件夹,打开命令行工具,输入如下命令:
2
npm i html-webpack-plugin style-loader css-loader babel-loader@7 babel-core babel-preset-env babel-preset-react url-loader file-loader @babel/core webpack webpack-cli　react react-dom  --save-dev --cache-min 99999999
3
会产生node_modules文件夹和package-lock.json文件

2.安装webpack（这一步可以省略,因为上面的已经安装过了）


xxxxxxxxxx
3
1
npm install webpack -g  // 先在全局安装一次
2
npm install webpack --save-dev  // 再在当前项目中安装一次
3
npm i webpack-cli -g

3.在当前文件夹里面新建文件夹src,并建index.html和main.js文件（新建一个html5文档，先按shift+1,输入！号，然后按tab键即可。

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


x
1
{
2
  "presets": [
3
    [
4
      "env",
5
      {
6
        "modules": false
7
      }
8
    ],
9
    "react"
10
  ]
11
}
12
13
----------NEW-----------day 02 修改为
14
  {
15
  "presets": [
16
    "@babel/preset-env",
17
    "@babel/preset-react"
18
  ]
19
}

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="box">
11
    
12
  </div>
13
</body>
14
</html>

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


xxxxxxxxxx
9
1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
4
const element = <div>哈哈</div>
5
6
ReactDOM.render(
7
  element,
8
  document.getElementById('box')
9
)

7.下载react react-dom


xxxxxxxxxx
1
1
npm install react react-dom --save-dev

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


xxxxxxxxxx
53
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


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

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


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