react学习第一天笔记

webpack运行项目知识

项目初始化

• git init：将本地文件夹变成git可以管理的仓库；
  • 开发过程中，要通过git工作流，把项目传到远程的github上去；
  • git工作流
• npm init --y:包管理器项目初始化
  • 创建package.json文件；

配置文件分析

• .babel:用来配置babel; babel的主要作用是用来编译；把不支持的语言，编译成支持的语言；

  • 要使用babel:必须下载工具：babel-cli babel-core
  • 支持es6:
    • babel-loader（编译js文件,让JS文件可以运行）(注明下载7.1.5版本，否则会报错)
    • babel-preset-es2015（编译es6，让es6语法编译成es5）
    • babel-preset-stage-0（支持箭头函数：保证this指向）
  • 支持react
    • babel-preset-react（支持react）

• webpack.config.js：配置webpack;

  • webpack（本地运行）
  • webpack-dev-server（服务器运行）
  • webpack-cli

• 下载html-webpack-plugin：用于html模板；

• .gitignore:在把项目用github管理的时候，忽略掉哪些文件上传；

  • 不传第三方插件；如node_modules;

项目结构

• 项目结构：分为三块：
  • 自己封装的自定义的模块组件，如Header.js,Footer.js；
  • 装所有组件的容器，如index.js；
  • 页面html文件，将组件容器引入，如index.html;

解决问题

• 在JS文件中通过es6引入模块，会出现报红的问题；通过以下设置解决
  • 设置setting->Languages&Frameworks->JavaScript->JavaScirpt language version->React JSX

项目开发总结

1. 把项目变成git可以管理的仓库，同时，初始化项目
   • git init
   • npm init --y
2. 当前项目文件的创建
   • .gitignore：忽略给github上传哪些文件；
   • .babelrc：编译：把不兼容的编译成兼容的；
   • webpack.config.js：webpack的配置；
   • README.md：当前项目的说明文件；
   • src文件夹：目录下创建
     • component文件夹，存放自定义的模块组件；
     • index.html
     • index.js
3. 安装必要的插件
   • babel
     • npm i --save-dev
       • babel-core: 工具
       • babel-cli: 工具
       • babel-loader:运行JS，注：下载版本为7.1.5,最新版本会报错；代码：npm i --save-dev babel-loader@7.1.5；
       • css-loader:运行css
       • style-loader:运行css
       • babel-preset-es2015: 编译e``s6，让es6语法编译成es
       • babel-preset-stage-0: 支持箭头函数：保证this指向
       • babel-preset-react: 支持react;
   • webpack
     • npm i --save-dev
       • webpack: 本地运行； =》dist目录可以看到
       • webpack-dev-server: 服务器运行； =》 dist文件夹下无文件；
       • webpack-cli
   • react:
     • npm i --save
       • react
       • react-dom
   • html模板插件
     • npm i --save-dev html-webpack-plugin;
4. 配置文件：三大类
   • .babelrc
     • 代码：

      {
        "presets":["es2015","react","stage-0"],
        "plugins":[]
      }
     

   • webpack.config.js
     • 注意：在开发阶段，先不要压缩；上线再压缩；
     • 若生成的bundle.js为压缩文件，在build或start中设置--mode production

      const webpack=require("webpack");
      const HtmlWebpackPlugin=require("html-webpack-plugin");
      const ExtractTextPlugin = require("extract-text-webpack-plugin");
      const path=require("path");
      
      module.exports={
          //入口文件：index.js
          entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略
          //输出的位置
          output:{
              path:path.resolve(__dirname,"dist"),
              filename:"bundle.js"
          },
          //配置
          module:{
              rules:[
                  {//配置JS
                      test:/\.js(x)?$/,
                      use:"babel-loader",
                      exclude:/node_modules/
                  },
                  {//配置css
                      test: /\.css$/,
                      use: ExtractTextPlugin.extract({
                          fallback: "style-loader",
                          use: "css-loader"
                      })
                  }
              ]
          },
          devServer: {
              disableHostCheck: true, //  新增该配置项，防止浏览器控制台报错；
          },
          //插件
          plugins:[
              new ExtractTextPlugin("styles.css"),//styles.css是合并后的样式名；
              new HtmlWebpackPlugin({template:"./src/index.html"})
          ],
          //模型
          mode:"development"//还可以设置none，但是不能设置production，否则会提示警告；
      };
     

   • package.json：配置scripts文件

    "script":{
        "start":"webpack-dev-server --progress(进度条） --colors(颜色变化） --content-base dist(依赖的最基本的目录)",
        "build":"webpack --progress --colors"
     }
   

5. 写一些react的测试文件
   • 自己封装的组件，都放在component文件夹下；
   • 把封装好的组件，导入到index.js文件中；
   • index.js是入口文件，会被编译打包压缩到bundle.js；
   • bundle.js会被自动插入到index.html文件；
   • index.html会在服务器下，自动被渲染；
6. react的基本语法
   • 导入文件：import ... from ".."

    import React from "react";
    import ReactDom from "react-dom";
   

   • react的写法，用es6的继承

    //es6语法引入模块
    import React from "react";
    //引入自己的css样式
    import "./footer.css"
    class Footer extends React.Component{
        render(){
            return (
                <div id="footer">
                    {/*我是注释*/}
                    <h1>我是底部标签</h1>
                </div>
            )
        }
    }
    export default Footer;
   

   • 导出：export default Footer;

react的基础知识

• JSX：JS+XML
  • return里面的jsx可以定义变量，用{}，如{str}，其中str为变量；
  • jsx需要注意的问题：
    • class => className
    • <label for="xx"> => <label htmlfor="xx">
• 顶级标签，只能有一个；
• 注释：
  • JS中的注释："//"
  • return里面jsx的注释，用{/*xx*/},如{/*注释内容*/}

   class Footer extends React.Component{
       render(){
           return (
               <div>
                   {/*我是注释*/}
                   <h1>我是底部标签</h1>
               </div>
           )
       }
   }
  

• 正常加载css文件：
  • 如果是“小型项目”,可在src目录下，创建一个css文件夹，文件夹下创建一个index.css文件，作为全局样式，引入到index.js中；
    • 引入：在index.js中，通过import来引入，地址为相对路径；如：import "./css/index.css";
    • 也就是说，index.js文件下的所有组件都可以设置此样式；
  • 如果是“大型项目”，相对每个模块都有自己的样式
    • 给每个模块，单独创建一个文件夹，比如：Header文件
      • header.css
      • Header.js:文件中引入自己的css文件；通过import引入；
      • 注意：样式里面最好写成唯一的路径；如：#header h1{ background-color: red; }
• 页面在引入不同的css样式后，会存放在header标签中，会有多个style标签，为了对所有的样式进行合并，需要使用插件：extract-text-webpack-plugin;
  • 安装命令：npm install --save-dev extract-text-webpack-plugin
  • 注意：若webpack版本在4.x以上，那么需要命令：npm install --save-dev extract-text-webpack-plugin@next;这样会下载到extract-text-webpack-plugin@4.0.0-beta.0;
  • 如果本地运行，会在dist文件夹下生成一个编译后的css文件，这个css文件，将多个css文件整合到一起；在编译后的index.html中会通过link插入此css文件；
• 如果设置了class类名，引用的时候需要写成className；
• 数据的流动
  • 组件自身状态的改变，导致数据的改变 state
    • 设置状态：写state在constructor;

     constructor(){
         super();
         //设置初始状态；
         this.state={
             login:false
         }
     }
    

    • 更改状态：可以通过定时器，也可以通过事件，只要保证this为实例

     setTimeout(()=>{
         //利用定时器，重新设置state；注意this指向；this为实例
         this.setState({
             login:true
         })
     },3000);
    

  • 父组件的数据传给子组件
    • 父组件设置自定义属性，来设置传给子组件的数据；

     return(
         <div>
             {/*父组件给子组件传递数据，设置属性*/}
             <Header content={data[1].title}/>
             <Footer/>
         </div>
     )
    

    • 子组件通过propos来获取父组件传递的数据

     return (
         <div id="header">
             {/*我是注释*/}
             <h1>{str}</h1>
             {/*子组件通过props拿到父组件传递的数据*/}
             <p>{this.props.content}</p>
         </div>
     )
    

webpack运行过程中踩过的坑

• babel-loader版本，必须为7.1.5版本；
• model设置中不能设置production，否则会出警告；设置development或none;
• css文件插件安装时，webpack为4.x版本时，需要安装extract-text-webpack-plugin版本为：4.0.0-beta.0；
• 将编译后的bundle.js压缩，在package-json中设置scripts时，在start或build的后面加上--mode production;
• 浏览器的控制台中总是报错Invalid Host/Origin header，则需要在webpack.config.js中设置devServer: { disableHostCheck: true },来禁用掉disableHostCheck这一配置项。

知识点

• path模块中的resolve
  • 定义：用于拼接地址
  • 例：
    • path.resolve("/a/b","/c/d.html")=> /c/d.html
    • path.resolve("/a/b","c/d.html")=> /a/b/c/d.html
    • path.resolve("/a/b","./c/d.html")=> /a/b/c/d.html
    • path.resolve("/a/b","../c/d.html")=> /a/c/d.html
    • path.resolve(__dirname,"dist")=> 指的是当前文件所在的目录下的dist文件夹；
• npm命令
  • 安装特定版本插件：npm install --save-dev babel-loader@7.1.5
  • 卸载插件：npm uninstall babel-loader

代码

• .babelrc代码：

 {
   "presets":["es2015","react","stage-0"],
   "plugins":[]
 }

• .gitignore代码：

 /node_modules/

• webpack.config.js代码：

 const webpack=require("webpack");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const path=require("path");
 
 module.exports={
     //入口文件：index.js
     entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略
     //输出的位置
     output:{
         path:path.resolve(__dirname,"dist"),
         filename:"bundle.js"
     },
     //配置
     module:{
         rules:[
             {//配置JS
                 test:/\.js(x)?$/,
                 use:"babel-loader",
                 exclude:/node_modules/
             },
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: "style-loader",
                     use: "css-loader"
                 })
             }
         ]
     },
     devServer: {
         disableHostCheck: true, //  新增该配置项
     },
     //插件
     plugins:[
         new ExtractTextPlugin("styles.css"),//styles.css是合并后的样式名；
         new HtmlWebpackPlugin({template:"./src/index.html"})
     ],
     //模型
     mode:"development"//还可以设置none，但是不能设置production，否则会提示警告；
 };

• Header.js代码

 //es6语法引入模块
 import React from "react";
 import "./header.css";
 
 class Header extends React.Component{
     constructor(){
         super();
         //设置初始状态；
         this.state={
             login:false
         }
     }
     //render为一个函数，类原型上的公有属性方法；
     render(){
         //登录之后，显示欢迎谁，没登录，先登录；
         let str="";
         if(this.state.login){
             str="欢迎你，guobin";
         }else{
             str="没登录，先登录"
         }
         setTimeout(()=>{
             //利用定时器，重新设置state；注意this指向；
             this.setState({
                 login:true
             })
         },3000);
         return (
             <div id="header">
                 {/*我是注释*/}
                 <h1>{str}</h1>
                 {/*子组件通过props拿到父组件传递的数据*/}
                 <p>{this.props.content}</p>
             </div>
         )
     }
 }
 export default Header;

• index.js代码：

 import React from "react";
 import ReactDom from "react-dom";
 
 import Header from "./component/Header/Header";
 import Footer from "./component/Footer/Footer";
 
 //引入css文件，公共样式，所有组件都可以设置
 import "./css/index.css";
 
 //设置数据
 var data=[
     {title:"我是111"},
     {title:"我是222"},
     {title:"我是333"}
 ];
 class Index extends React.Component{
     render(){
         return(
             <div>
                 {/*父组件给子组件传递数据，设置属性*/}
                 <Header content={data[1].title}/>
                 <Footer/>
             </div>
         )
     }
 }
 //最后要把Header直接渲染到页面上去；
 ReactDom.render(<Index/>,document.getElementById("app"));

• index.html代码：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>页面</title>
 <link href="styles.css" rel="stylesheet"></head>
 <body>
 <div id="app"></div>
 <script type="text/javascript" src="bundle.js"></script></body>
 </html>

• package.json代码：

 {
   "name": "day1",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --progress --colors --content-base dist",
     "build": "webpack --progress --colors"
   },
   "keywords": [],
   "author": "guomushan",
   "license": "ISC",
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.0.2",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.28.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.13"
   },
   "dependencies": {
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }
 }

• 文件目录截图

  
  项目文件目录