webpack+babel+react练习流程记录

DDreach 发布于2019-08-19 18:25 / 1178人阅读

摘要：简介来构建用户界面的库，不是框架关注于层虚拟单向数据流这些概念如何使用下载文件也可以使用，需要用到的模块介绍是编写组件的一种语法规范，可以看为是的扩展，它支持将和混写在一起，最后使用编译为常规的，方便浏览器解析编写第一个例子使用编写组件

react简介

来构建用户界面的库，不是框架
关注于view层
虚拟DOM 单向数据流 JSX这些概念

如何使用react

下载文件
    react
    react-dom
    browser.min.js

也可以使用nodejs，需要用到的模块
    webpack
    babel
    react
    react-dom

JSX介绍

JSX是React编写组件的一种语法规范，可以看为是js的扩展，它支持将HTML和JS混写在一起，
最后使用babel编译为常规的js，方便浏览器解析

编写第一个例子

使用 ReactDOM.render()

编写组件

React.createClass()

给组件传递数据

props
props的值是不可变的
语法糖{...this.props}

组件间的嵌套

使用 props传递数据
可是数组存组件结构
map方法的使用

事件event处理

在元素上添加事件处理 
    onCLick    onMouseOver  onMouseOut
class => className
style的设置

改变组件的状态

state
setState后组件状态发生改变，DOM会重新渲染

组件间的通信

父子级可使用props传递函数的形式通信
不是父子级或多级嵌套通信 使用Pub/Sub模式通信

案例：

react实现的留言板，提交留言可显示在页面的留言列表中

知识点：
    react的基本知识点 
            React.createClass 创建组件函数
            ReactDOM.render   渲染组件
            props             获取传递的数据（不可变）
            state             组件状态（可变，立马渲染DOM）
            onClick           事件
            组件间的通信
            Pub/Sub模式        发布/订阅模式
            componentDidMount 组件渲染后触发的函数

webpack + babel + react 做到改变组件不刷新页面就可以显示结果
主要模块的用法，如：
    webpack  webpack-dev-server  css-loader style-loader html-webpack-plugin插件的使用
    babel babel-preset-es2015 babel-preset-react
    react react-dom react-hot-loader
    
    
    webpack + babel + react 配置及使用

node安装及npm包管理器的使用

npm init 创建package.json文件
npm install -g/--save-dev/--save 安装模块
npm update 更新模块
npm uninstall 卸载模块

webpack一款模块加载器兼打包工具

特点：

 查找依赖，打包成一个文件
 支持CommonJs和AMD模块
 把各种资源都看成模块，用对应的加载器处理
 丰富的和可扩展的插件

官网http://webpack.github.io/
安装

  npm install webpack -g
 安装后使用webpack命令

webpack.config.js文件配置项：

 entry：配置入口文件
 output：配置输出文件路径及文件名
 module：模块配置
      loaders：加载器配置
 devServer：配置服务
 plugins：配置插件

loader加载器：

 css-loader、style-loader : 处理css文件和样式
 babel-loader：转换es6语法为es5语法

插件：

  html-webpack-plugin：生成html文件

使用webpack-dev-server服务

babel介绍及使用

使用babel作用：转换es6语法为es5语法

官网：http://babeljs.io/
安装：

 npm install  babel-cli -g
  安装后使用babel命令

Es6语法使用：

 let const申明变量
 箭头函数Arrow Functions
 class import from extends

react介绍及使用

 react用于构建用户界面的javascript库

安装：

 npm install react react-dom --save

用bebel编译jsx语法，使用模块：

 npm install --save-dev babel-preset-react

使用react热加载模块，做到文件改动页面自动刷新

 安装：
      npm install --save-dev react-hot-loader

综合实例：todoList例子

    分析todolist整体实现思路
    利用MVC的思路整合代码

    主要功能：
            
            回车添加内容
            可以对内容进行toggle选中操作
            删除选项
            用LocalStorage对数据进行存储（刷新记录）

github地址：https://github.com/eve0803/webpack-babel-react-test

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79587.html

最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
react基于webpack和Babel 6上的开发环境搭建

摘要：可能在项目正式上线的时候才需要发布配置单文件入口版本新建一个和开发环境不同的是，入口和出口。相应的在的源也要进行修改。加载模块发布配置多文件模式库最好就不要打包进来。因为一般库都是不会改动的。所以这里就要进行库的分离。 react-js开发环境时间：2016.3.19-12:29作者：三月懒驴基于：react版本：0.14基于：babel版本：6相关代码：github 开始一个项目 ...

callmewhy 2019-08-19 18:01 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
发布 react 组件到 npm 上

摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...

Yi_Zhi_Yu 2019-08-23 15:05 评论0 收藏0