React_note更新中

2019-01-10  本文已影响0人  glAkihi

React - Basics

概念

  1. 特点：
  2. 组件化 高效(虚拟DOM)
  3. 灵活(渐进式 本身只处理UI 可以和其他技术栈组合使用)
  4. 声明式设计(配置设计 方法就是类成员 也有特定的组件生命钩子 )
  5. JSX(一种预编译js语言 允许让你的js和Html混搭 模板中就是js逻辑)
  6. 单向数据流(这个单向数据流是组件传值问题 所有数据都是单向的 组件传递的数据都是单向的 Vue也是单向数据流 没有双向数据绑定)

React 开源协议 不同的开源协议对使用者的限制情况不一样

React 和 vue 的对比

React 相关资源

day1 - day3 React

day1 - React概念基础

  1. React 一切都是基于 js 并且实现了组件化开发的思想

  2. 不必担心断更的问题 开关团队实力强

  3. 社区强大 很多问题都能找到解决方案

  4. 提供了无缝转到 React Native 的开发体验 让我们的技术得到了扩展 增强了我们的核心竞争力

  5. 很多企业中 前端项目的技术选型 采用就是React.js

介绍DOM和虚拟DOM的概念

虚拟DOM

Diff算法(这个就是新旧DOM对比的过程中的算法)

webpack4.x 最基本的使用步骤

  1. 运行 npm init -y 快速初始化项目

  2. 在项目根目录创建src源代码目录 和 dist产品目录

  3. 在 src目录下 创建一个 index.html

  4. 使用 cnpm 安装 webpack 运行cnpm i webpack -D

    1. 运行全局 npm i cnpm -g 这个也可以运行安装cnpm
    2. **webpack4 以后需要安装 webpack-cli **
    3. 这个 webpack-cli 是后边独立出来带有打包功能的脚手架

  5. 然后创建一个 webpack.config.js文件

    // 向外暴露一个打包的配置对象;这个是webpack打包文件的时候 会去找这么一个文件 然后进行相关的编辑与编译   因为webpack是基于node构建 所以支持所有node的API
module.exports = {
    // mode 是 webpack 4.0 新增的属性  可选的值是 development   production
    // 这个mode选项是必选项
    mode : 'development'  // development   production
    // development是开发模式          production 是压缩(上线)模式
}

export default {} // 这个是不行的  
// 这是 ES6 中 向外导出模块的 API 与之对应的是 import ** from '标识符(路径)'

// 那些特性 Node 支持？ 如果 chrome 浏览器支持那些属性 node就支持那些属性

  6. 在 webpack 4.x 中 有一个很大的特性 就是约定大于配置

  7. 约定 默认的打包入口路径是 src 下面的 index.js

  8. 然后这里只需要将 main.js 替换成 index.js文件就好

  9. 打包的输出文件是 dist 下面的 main.js

  10. 目的是 为了尽量减少 配置文件的体积

  11. 如果 需要不一样的方法 就需要手动去配置

  12. 4.x 以上只是提升了打包的性能 和 增加一些约定 其余的都还没有太大变化

webpack-dev-server的基本使用

html-webpack-plugin插件配置

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')
//导入 在内存中自动生成 index 页面的插件

// 创建一个插件实例
const htmlPlugin = new HtmlWebPackPlugin({
    template : path.join(__dirname,'./src/index.html'), //源文件
    filename : 'index.html',  // 生成的内存中首页的名称
})

// 将插件放置到 配置对象中
module.exports = {
    mode : 'deveiopment',
    plugins : [
        htmlPlugin
    ]
}

配置 babel 插件

day1 - 在项目中使用 React(13 虚拟DOM)

JSX语法

什么是jsx语法 ： 就是符合 xml 规范的 js 语法;（语法格式相对来说 要比 html 严谨的多）

上一篇 下一篇

猜你喜欢

热点阅读