text: (this["webpackJsonpspread-the-joy"]=this["webpackJsonpspread-the-joy"]||[]).push([[0],{10:function(e,t,n){"use strict";n.r(t);var c=n(1),s=n.n(c),i=n(3),a=n.n(i),r=(n(8),n.p+"static/media/author.f1dce96f.png"),o=n(0),l=function(){window.open("https://nirit.website","_blank")};function d(){return Object(o.jsxs)("div",{children:[Object(o.jsx)("h3",{children:"Add styles"}),Object(o.jsx)("p",{children:"We know that we can add inline styles directly or use variables but...what if we want to do both?? For that, our lovely Spread Syntax comes to the rescue!"}),Object(o.jsx)("p",{children:"In the example below, we are creating an object contain set of styles, this object is being assigned to a variable called 'theJoyStyle'."}),Object(o.jsx)("pre",{children:Object(o.jsx)("code",{children:"const theJoyStyle = {\n            content: 'o( \u275b\u1d17\u275b )o',\n            color: pink,\n            textAlign: 'center'\n          }\n          "})}),Object(o.jsxs)("p",{children:[Object(o.jsx)("br",{}),"We then assigned this variable to our first div, but wait, look what we are doing in the second div - here we adding not only the set of styles attached to the variable, but also additional custom inline style (fontSize: 22)."]}),Object(o.jsx)("pre",{children:Object(o.jsx)("code",{children:"<div style={ theJoyStyle }> I'm having all the styles from theJoyStyle! </div>\n  <div style={{ ...theJoyStyle, fontSize: 22 }}> Spread theJoyStyle! </div>"})}),Object(o.jsxs)("p",{children:[Object(o.jsx)("br",{}),"Neat, ah? and what if we want to use multiple variables? no problem! here is how:"]}),Object(o.jsx)("pre",{children:Object(o.jsx)("code",{children:"<div style={ ...theJoyStyle1, ...theJoyStyle2 }>\u0669(\u25d5\u203f\u25d5)\u06f6</div>"})}),Object(o.jsxs)("p",{children:[Object(o.jsx)("br",{}),"Let's have one more fun.. this time with Nested Variable, check this out:"]}),Object(o.jsx)("pre",{children:Object(o.jsx)("code",{children:"const theJoyStyle = {\n          ...nestedVariable,\n        content: 'o( \u275b\u1d17\u275b )o',\n        color: pink,\n        textAlign: 'center'\n        }\n        "})})]})}function h(){return Object(o.jsxs)("div",{className:"author-container",children:[Object(o.jsxs)("div",{children:[Object(o.jsx)("img",{src:r,alt:"Autor"}),Object(o.jsxs)("p",{children:["Creative & Code:)",Object(o.jsx)("br",{}),Object(o.jsx)("a",{href:"https://nirit.website",target:"_blank",children:"nirit.website"})]})]}),Object(o.jsx)("button",{onClick:l,children:"Portfolio"})]})}var j=n.p+"static/media/vid-bg.0e1fa824.mp4";var b=function(){return Object(o.jsxs)(o.Fragment,{children:[Object(o.jsx)("video",{autoPlay:!0,muted:!0,className:"bg-vid",children:Object(o.jsx)("source",{src:j,type:"video/mp4"})}),Object(o.jsxs)("div",{className:"container",children:[Object(o.jsxs)("div",{className:"main-content-top",children:[Object(o.jsx)("h1",{children:"...Spread the JOY!"}),Object(o.jsx)("h2",{children:"The Spread operator syntax and inline styles in React (ES6 - ES12)"}),Object(o.jsx)("p",{className:"date",children:"June 5, 2021"})]}),Object(o.jsxs)("div",{className:"main-content-bottom",children:[Object(o.jsx)("h3",{className:"p-content",children:Object(o.jsx)("strong",{children:"The Spread Syntax - '...' (Yep, 3 dots) comes very handy when it comes to customize our inline styles in React - let's see how:"})}),Object(o.jsxs)("p",{children:["You will need a basic knowledge of the ",Object(o.jsx)("b",{children:Object(o.jsx)("i",{children:"Spread Operator"})})," and ",Object(o.jsx)("b",{children:Object(o.jsx)("i",{children:"React"})}),". not familiar with those topics? no problem! here is a cool article about",Object(o.jsx)("a",{href:"https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab",target:"_blank",children:" The Spread Operator"})," and here is a",Object(o.jsx)("a",{href:"https://www.taniarascia.com/getting-started-with-react/",target:"_blank",children:" React Tutorial: An Overview and Walkthrough."}),"Now that we all caught up, let's continue:"]}),Object(o.jsx)("div",{className:"commands",children:Object(o.jsx)(d,{})}),Object(o.jsx)("div",{className:"author-note",children:Object(o.jsxs)("p",{children:[Object(o.jsx)("strong",{children:"...and that's it folks! "}),Object(o.jsx)("br",{}),Object(o.jsx)("strong",{children:"Keep on learning and spread the joy..!"}),Object(o.jsx)("br",{}),"\u25aa\ufe0f",Object(o.jsx)("a",{href:"https://github.com/Frnt-End/Spread-the-JOY",children:"  Back to the Repo"})]})})]}),Object(o.jsx)("div",{className:"author",children:Object(o.jsx)(h,{})})]})]})};a.a.render(Object(o.jsx)(s.a.StrictMode,{children:Object(o.jsx)(b,{})}),document.getElementById("root"))},8:function(e,t,n){}},[[10,1,2]]]);
  //# sourceMappingURL=main.fb4e40a1.chunk.js.map