"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", p: "p", pre: "pre", ..._provideComponents(), ...props.components }, {BookmarkCard} = _components; if (!BookmarkCard) _missingMdxReference("BookmarkCard", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["In the previous post, I reviewed ", _jsx(_components.a, { href: "https://www.cbsofyalioglu.com/code/solidjs-and-reactive-primitives/", children: "The Reactive primitives of SolidJS" }), ". In this article, I'll explore styling and control flow usage of Solid. I should have said this at the end of the post, but I can't wait: As a React developer, I can clearly say that SolidJS is superior to React."] }), "\n", _jsx(_components.h2, { children: "Styling" }), "\n", _jsxs(_components.p, { children: ["The way of styling of Solid is a bit different but much better than the React's way.\nif you use style prop in React, this will use ", _jsx(_components.code, { children: "element.style.setProperty" }), " JS method."] }), "\n", _jsx(_components.p, { children: "In Solid, you'll have two option when you use style prop. You can use your CSS style in string or in JS object. Also, It should be noted that you should use \"dash-case\" version of the property." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// ❌ Wrong\nconst myStyle = {display: \"flex\", flexDirection: \"column\"}\n\n// ✅ Correct (object)\nconst myStyle = {display: \"flex\", \"flex-direction\": \"column\"}\n\n// ✅ Correct (string)\nconst myStyle = `display: flex; flex-direction:column`\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "const Box = () =>

This is a flex-box

\n" }) }), "\n", _jsx(BookmarkCard, { url: "https://www.cbsofyalioglu.com/blogging/best-blogging-sites/", image: "/posts/best-blogging.webp", title: "The List of Best Blogging Platforms", description: "The list of best blogging platforms for your creative works. The list includes free and paid platforms." }), "\n", _jsx(_components.h2, { children: "Control Flow" }), "\n", _jsx(_components.h3, { children: "Show" }), "\n", _jsxs(_components.p, { children: ["SolidJS allows us to use ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator", children: "ternary operator" }), ". However, builtin ", _jsx(_components.a, { href: "https://www.solidjs.com/docs/latest/api#%3Cshow%3E", children: "Show component" }), " is used specifically for this case."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function Show(props: {\n when: T | undefined | null | false;\n fallback?: JSX.Element;\n children: JSX.Element | ((item: T) => JSX.Element);\n}): () => JSX.Element;\n" }) }), "\n", _jsxs(_components.p, { children: ["Show component has two props ", _jsx(_components.code, { children: "when" }), "and ", _jsx(_components.code, { children: "fallback" }), ". If ", _jsx(_components.code, { children: "when" }), " prop is truthy then the children element will be rendered. Otherwise, ", _jsx(_components.code, { children: "fallback" }), " component will be rendered."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "const OddComponent = () =>

Odd! (if the count value is an odd number)

;\nconst EvenComponent = () =>

Even! (if the count value is an even number)

;\n\nconst Counter = () => {\n const [count, setCount] = createSignal(0);\n const myStyle = `display: flex; flex-direction:column`;\n return (\n

Count: {count()}

\n \n \n

\n }>\n \n \n

\n );\n};\n" }) }), "\n", _jsx(_components.p, { children: "Then put Counter component to App component." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function App() {\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["It is interesting that ", _jsx(_components.code, { children: "fallback" }), " prop accepts those:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// ✅ Component\n}>\n \n\n\n// ✅ Function that returns component\n }>\n \n\n\n// ✅ Component variable\n\n \n\n" }) }), "\n", _jsx(_components.p, { children: "It will continue..." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }