Implement slides with Scss + react + webpack + ES6
Last Update:2016-07-20
Source: Internet
Author: User
<span id="Label3"></p><p><p></p></p><p><p></p></p><span style="color: #ff99cc;"><span style="color: #ff99cc;">write in Front:</span></span><p><p>Just after learning a slide case in the net, I added the react, the combination of the Two. First of all, Let's see the effect click here</p></p><p><p>You can first use pure JS to achieve the above effect: my github on the JS code or watch the course offered by the class. Plus the react and the Strike.</p></p><span style="color: #ff99cc;"><span style="color: #ff99cc;">React Analysis</span></span><p><p><span style="color: #ff99cc;">JS implementation</span></p></p><p><p>For js, The following button a click, you can according to the current index for the button and picture binding corresponding to a good style: take the corresponding Dom elements, coupled with a defined style name, you can achieve the binding effect.</p></p><p><p><span style="color: #ff99cc;">REACT implementation</span></p></p><p><p>But for react, the idea of component development is not to get Dom elements, because react is designed to get rid of DOM.</p></p><p><p>That for this demo, how to implement the click button, the above image corresponds to the change it?</p></p><p><p>This demo is split into two components, a picture component, and a Button. Two components share a property library, which solves the Problem. As long as the value of the property library changes, two components Change.</p></p><p><p>First look at the directory structure</p></p><pre><pre><span style="color: #008000;">//</span> <span style="color: #008000;">---css <span style="color: #ff0000;">Style file</span> </span> <span style="color: #008000;">//</span> <span style="color: #008000;">---data</span> <span style="color: #008000;">//</span> <span style="color: #008000;">----imgdatas.json <span style="color: #ff0000;">Storing picture information json file</span> </span> <span style="color: #008000;">//</span> <span style="color: #008000;">---imgs <span style="color: #ff0000;">Picture Storage</span> </span> <span style="color: #008000;">//</span> <span style="color: #008000;">---app.jsx </span> <span style="color: #008000;">//</span> <span style="color: #008000;">---index.html</span> <span style="color: #008000;">//</span> <span style="color: #008000;"></span> <span style="color: #008000;">//</span><span style="color: #008000;">---package.json</span><span style="color: #008000;">//</span><span style="color: #008000;">---webpack.config.js</span></pre></pre><p><p></p></p><p><p>Next define the Webpack.config.js</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Openbrowserplugin = require (' open-browser-webpack-plugin ');<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">automatically open browser</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>config=<span style="color: #000000;"><span style="color: #000000;">{entry:</span></span>'./main.js ',<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Entry File</span></span><span style="color: #000000;"><span style="color: #000000;">Output:{path:</span></span>‘./‘,<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Output Path</span></span>Filename: ' Index.js '<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Output File</span></span><span style="color: #000000;"><span style="color: #000000;">}, plugins: [</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span>Openbrowserplugin ({<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">automatically open browser</span></span>Url: ' http://localhost:8080 '<span style="color: #000000;"><span style="color: #000000;">})], module:{loaders:[{test:</span></span>/\.jsx?$/,<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">regular Match js file change</span></span>exclude:/node_modules/<span style="color: #000000;"><span style="color: #000000;">, Loader:</span></span>' Babel '<span style="color: #000000;"><span style="color: #000000;">, query:{presets:[</span></span>' es2015 ', ' react ']<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">turn es6 and react into a language that modern browsers can read</span></span><span style="color: #000000;"><span style="color: #000000;">}},{test:</span></span>‘/\. (png|jpg|woff|woff2) $/'<span style="color: #000000;"><span style="color: #000000;">, Loader:</span></span>' url-loader?limit=8192 '<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">automatically turns a picture below 8192bit into a base64</span></span><span style="color: #000000;"><span style="color: #000000;">},{test:</span></span>/\.json$/<span style="color: #000000;"><span style="color: #000000;">, Loader:</span></span>' Json-loader '<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">loading the JSON file</span></span><span style="color: #000000;"><span style="color: #000000;">}]}};module.exports</span></span>= config;</pre><p><p>Take a second look at the contents of the Package.json file</p></p><pre><pre><span style="color: #c0c0c0;"> ...</span>" Scripts "<span style="color: #000000;">: { </span>" Start ":" webpack-dev-server<span style="color: #000000;"> <span style="color: #c0c0c0;"> </span></span>"..." Dependencies "<span style="color: #000000;">: { </span>" Babel-core ":" ^6.10.4 "<span style="color: #000000;">, </span>" Babel-loader ":" ^6.2.4 "<span style="color: #000000;">, </span> "babel-preset-es2015": "^6.9.0"<span style="color: #000000;">, </span>"babel-preset-react": "^6.11.1"<span style="color: #000000;">, </span>"json-loader": "^0.5.4"<span style="color: #000000;">, </span>"open-browser-webpack-plugin": "0.0.2"<span style="color: #000000;">, </span>"react": "^15.2.0"<span style="color: #000000;">, </span>"react-dom": "^15.2.0"<span style="color: #000000;"> }</span></pre></pre><p><p>next, take a look at the contents of the Main.js file</p></p><pre><pre>Import React from ' React '<span style="color: #000000;"></span>react-dom<span style="color: #000000;"></span>'./app.jsx '; <span style="color: #008000;">//</span> <span style="color: #008000;">introduction of APP.JSX</span> <span style="color: #000000;">reactdom.render ( </span><slider/>, document.getElementById (' example '<span style="color: #000000;">));</span></pre></pre><p><p>The most important thing is that app.jsx next learn</p></p><p><p>Ideas:</p></p><p><p>1. Split button Templatectrl and picture Templatemain components</p></p><pre><span style="color: #000000;"><span style="color: #000000;">Return (</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ClassName</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "slider"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ClassName</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "main"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">{templatemain}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ClassName</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "ctrl"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">{templatectrl}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">);</span></span></pre><p><p>2. Set getinitialstate <span class="pl-smi"> <span class="pl-s">imgsarrangearr:[]</span></span></p></p><pre><pre><span style="color: #000000;">Getinitialstate:function () { return{ imgsarrangearr: [] }; },</span></pre></pre><p><p><span class="pl-smi"><span class="pl-s">3. Set Templatectrl templatemain props data According to the picture data foreach, and initialize the respective component intermediate state value Iscenter to False</span></span></p></p><pre>Imgdatas.foreach (<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(value, Index) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(!<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. state.imgsarrangearr[index]) { </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. state.imgsarrangearr[index] =<span style="color: #000000;"><span style="color: #000000;">{iscenter:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">false</span></span><span style="color: #000000;"><span style="color: #000000;"> }; } Templatemain.push (</span></span><<span style="color: #000000;"><span style="color: #000000;">Templatemaini Data</span></span>=<span style="color: #000000;"><span style="color: #000000;">{value} Center</span></span>={<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. Center (index)} Arrange</span></span>={<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. state.imgsarrangearr[index]}</span> right</span>={index% 2?<span style="color: #0000ff;"><span style="color: #0000ff;">true</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">false</span></span><span style="color: #000000;"><span style="color: #000000;">} </span></span>/><span style="color: #000000;"><span style="color: #000000;"> ); Templatectrl.push (</span></span><<span style="color: #000000;"><span style="color: #000000;">Templatectrli Data</span></span>=<span style="color: #000000;"><span style="color: #000000;">{value.img} Center</span></span>={<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. Center (index)} Arrange</span></span>={<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. state.imgsarrangearr[index]}</span></span>/><span style="color: #000000;"><span style="color: #000000;"> ); }.bind (</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>));</pre><p><p><span class="pl-smi"><span class="pl-s">4. Render Templatectrl Templatemain components</span></span></p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Templatemaini =<span style="color: #000000;"><span style="color: #000000;">React.createclass ({render:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){ </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Mainclassname =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. props.right? ' Main-i main-i_right ': ' main-i '<span style="color: #000000;"><span style="color: #000000;">; Mainclassname</span></span>+=<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. props.arrange.isCenter? ' main-i_active ': '<span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">( </span></span><div classname={mainclassname}> <div classname= "caption" >
