scss + react + webpack + es6

scss + react + webpack + es6

写在前面:

刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合。首先让大家看看效果 点击此处

你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程。再趁热打铁加上react

React分析

JS实现

对于js来说,下面按钮一点击,就能根据当前的索引为按钮和图片绑定对应好的样式:取到对应的DOM元素,加上定义好的样式名,就能实现绑定效果。

React实现

但对于React来说,组件化开发的思想,可不是取得DOM元素就了事,因为React设计的初衷就是为了摆脱DOM。

那对于这个Demo,如何实现点击按钮,上面的图片对应着变化呢?

这个Demo拆成两个组件,一个图片组件,一个按钮。两个组件共用一个属性库,这就解决问题了。只要属性库的值变化,两个组件就都跟着变化。

首先看一下目录结构

//---css   样式文件
//---data
     //----imgDatas.json   存放图片信息json文件
//---imgs    图片存放
//---App.jsx
//---index.html
//---main.js
//---package.json
//---webpack.config.js

接下来定义一下webpack.config.js

var OpenBrowserPlugin = require(‘open-browser-webpack-plugin‘); //自动打开浏览器
var config={
    entry:‘./main.js‘,     //入口文件
    output:{
        path:‘./‘,           //输出路径
        filename:‘index.js‘  //输出文件
    },
    plugins: [
        new OpenBrowserPlugin({    //自动打开浏览器
            url: ‘http://localhost:8080‘
        })
    ],
    module:{
        loaders:[{
            test:/\.jsx?$/,              //正则匹配 js 文件变化
            exclude:/node_modules/,
            loader:‘babel‘,
            query:{
                presets:[‘es2015‘,‘react‘]   //将es6与react变成现代浏览器能看懂的语言
            }
        },{
            test:‘/\.(png|jpg|woff|woff2)$/‘,
            loader:‘url-loader?limit=8192‘     //自动将低于8192bit的图片变成base64
        },{
            test:/\.json$/,
            loader:‘json-loader‘      //加载json文件
        }]
    }
};
module.exports = config;

再看一下 package.json文件的内容

  ...
"scripts": {
    "start": "webpack-dev-server"
  },
  ...
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "json-loader": "^0.5.4",
    "open-browser-webpack-plugin": "0.0.2",
    "react": "^15.2.0",
    "react-dom": "^15.2.0"
  }

接下来看一下main.js 文件的内容

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Slider from ‘./App.jsx‘;     //引入APP.jsx

ReactDOM.render(
    <Slider/>,
    document.getElementById(‘example‘)
);

最重要的内容是APP.jsx 接下来一起学习重头戏

思路:

1.拆分按钮 templateCtrl 和图片templateMain 组件

 return (
     <div className="slider">
       <div className="main">
          {templateMain}
       </div>
       <div className="ctrl">
           {templateCtrl}
       </div>
      </div>
);

2.设置getInitialState  imgsArrangeArr:[]

getInitialState : function(){
        return{
            imgsArrangeArr : []
        };
    },

3.根据图片数据foreach设置templateCtrl templateMain  的props数据,并初始化各自组件中间状态值isCenter为false

ImgDatas.forEach(function(value , index){
            if (!this.state.imgsArrangeArr[index]) {
                this.state.imgsArrangeArr[index] = {
                    isCenter  : false
                };
            }

            templateMain.push(
                <TemplateMainI
                    data={value}
                    center={this.center(index)}
                    arrange={this.state.imgsArrangeArr[index]}
                    right={index % 2? true : false}
                />
            );
            templateCtrl.push(
              <TemplateCtrlI
                  data={value.img}
                  center={this.center(index)}
                  arrange={this.state.imgsArrangeArr[index]}
              />
            );
        }.bind(this));

4.渲染templateCtrl templateMain组件

var TemplateMainI = React.createClass({
    render : function(){
        var mainClassName = this.props.right?‘main-i main-i_right‘:‘main-i‘;
            mainClassName += this.props.arrange.isCenter?‘ main-i_active‘:‘‘;

        return(
            <div className={mainClassName}>
                <div className="caption">
                    <h2>{this.props.data.h1}</h2>
                    <h3>{this.props.data.h2}</h3>
                </div>
                <img src={this.props.data.img} />
            </div>
        )
    }
});

5.主方法:rearrange(centerIndex) 将选中值的isCenter设置为true,其余设置为false。

rearrange: function(centerIndex){
        var imgsArrangeArr = this.state.imgsArrangeArr,
            imgsCenterArr = imgsArrangeArr.splice(centerIndex , 1); /*取出那组对应的数组*/
        imgsCenterArr[0]={isCenter :true};/*把isCenter置为true*/

        for(var i=0; i<imgsArrangeArr.length; i++){
            imgsArrangeArr[i] = {isCenter : false}
        }
        imgsArrangeArr.splice(centerIndex, 0, imgsCenterArr[0]); /*将centerIndex的isCenter变成true*/
        this.setState({
            imgsArrangeArr:imgsArrangeArr
        });
},

接下来对比es6下的React

1、导入文件使用 import React from ‘react‘

2、var TemplateMainI = React.createClass({}) 写法变成定义一个类继承React的组件  class TemplateMainI extendsReact.Component{}

3、State

getInitialState : function(){
        return{
            imgsArrangeArr : []
        };
    },

在构造器中继承父类

es6语法constructor(){
        super();
        this.state = {
            imgsArrangeArr : []
        };
    }

4、function XXX(){}  变成 es6 方法的写法  XXX(){}

5、onClick={this.handleClick}  需要绑定this  onClick={this.handleClick.bind(this)}

其中还有很多变化需要细细研究 可以参考这篇文章

具体代码可以研究下我的github地址 Preview_silder,动手做一遍,收益良多。

时间: 2024-10-09 21:41:12

scss + react + webpack + es6的相关文章

使用scss + react + webpack + es6实现幻灯片

写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程.再趁热打铁加上react React分析 JS实现 对于js来说,下面按钮一点击,就能根据当前的索引为按钮和图片绑定对应好的样式:取到对应的DOM元素,加上定义好的样式名,就能实现绑定效果. React实现 但对于React来说,组件化开发的思想,可不是取得DOM元素就了事,因为React设计的初

react+webpack+ES6搭建项目

react+webpack+ES6打包搭建框架的步骤及部分详解 npm init 此条命令是创建一个npm项目 NPM 全称 node package manager, 是 nodejs 的包管理工具,使用它让我们可以更方便的使用别人的代码,以及向别人分享我们的代码. 执行后,npm会引导输入一些基本信息,可以默认按回车键,然后会生成一个package.json文件,包含基本信息,后续的依赖也会保存到它里边. npm install react react-dom --save 安装react和

react + webpack +es6 hello world

1,目录 首先建立package.json文件 { "name": "react-webpack", "version": "1.0.0", "description": "webpack demo", "main": "index.js", "scripts": { "start": "webpa

利用yeoman快速搭建React+webpack+es6脚手架

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

React+Webpack+ES6环境搭建(自定义框架)

引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Native更是扩大了前端的边界. 说道React,那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,更是支持模块化处理. 下面我就分享一下关于Webpack+React+ES6的环境搭建(通用)[附加发布版] 准备工作 首先需要准

React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下 起因 在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { ? cons

配置react+webpack+es6中的一些教训

1.要用es6,因为目前浏览器的支持情况,那么肯定需要插件将e6的代码转换成es5,我用的是babel-loader,事实证明使用6.x版本似乎是不行的,我换成5.3.2之后就成功了. 2.webpack.config.js配置文件中,配置loader的时候,我从网上博客中copy的 loader: 'babel-loader!jsx-loader?harmony' 不知道是语法错误还是本身不通,编译时会报错改成仅用babel-loader 错误解决 有空整理一下配置步骤发出来.

webpack+react+redux+es6

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

webpack+react+redux+es6开发模式

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程