webpack+babel+react演习流程纪录

2024年5月18日 173次阅读 来源: eve0803

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</font>
    
    
    webpack + babel + react 设置及运用

node装置及npm包管理器的运用

npm init 建立package.json文件
npm install <module-name> -g/–save-dev/–save 装置模块
npm update <module-name > 更新模块
npm uninstall <module-name > 卸载模块

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

    原文作者：eve0803
    原文地址: https://segmentfault.com/a/1190000005368861
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞