Posts

Issue #662 Use spread operator import React, { Component, useState, useEffect } from 'react'; const [state, setState] = useState({ message: '', chats: [], sending: false }) setState(prevState => ({ ...prevState, message: '', sending: false })) Updated at 2020-06-12 21:23:42

Issue #661 Use Bulma css <input class="input is-rounded" type="text" placeholder="Say something" value={value} onChange={(e) => { onValueChange(e.target.value) }} onKeyDown={(e) => { if (e.key === 'Enter') { onSend(e) } }} />

Issue #661 Use Bulma css <input class="input is-rounded" type="text" placeholder="Say something" value={value} onChange={(e) => { onValueChange(e.target.value) }} onKeyDown={(e) => { if (e.key === 'Enter') { onSend(e) } }} /> Updated at 2020-06-16 07:30:52

Issue #660 Apply tintColor does not seem to have effect. datePicker.setValue(UIColor.label, forKeyPath: "textColor") datePicker.setValue(false, forKey: "highlightsToday")

Issue #659 Use useLocation https://reacttraining.com/react-router/web/guides/scroll-restoration import React, { useEffect } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, useLocation, withRouter } from 'react-router-dom' function _ScrollToTop(props) { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return props.children } const ScrollToTop = withRouter(_ScrollToTop) function App() { return ( <div> <Router> <ScrollToTop> <Header /> <Content /> <Footer /> </ScrollToTop> </Router> </div> ) } Updated at 2020-06-04 05:58:47

Issue #658 Declare routes, use exact to match exact path as finding route is from top to bottom. For dynamic route, I find that we need to use render and pass the props manually. Declare Router as the rooter with Header, Content and Footer. Inside Content there is the Switch, so header and footer stay the same across pages import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' function Content() { return ( <Switch> <Route exact path="/about"> <About /> </Route> <Route exact path="/"> <Home /> </Route> <Route path='/book/:id' render={(props) => { return ( <BookDetail {....

Issue #657 Add library folder src/library src library res.js screens Home index.js package.json Declare package.json in library folder { "name": "library", "version": "0.0.1" } Declare library as dependency in root package.json "dependencies": { "library": "file:src/library" }, Now import like normal, for example in src/screens/Home/index.js import res from 'library/res'

Issue #656 Lately I’ve been challenging myself to declare switch statement in SwiftUI, or in a more generalized way, execute any anonymous function that can return a View Use Switch and Case views Note that this approach does not work yet, as TupeView should support variadic number of contents, and also T.RawValue needs to conform to Equatable in order to check the cases. Also in Switch statement, Content can’t be inferred...

Issue #655 Declare state and setState export default function Showcase(props) { const factory = props.factory const [state, setState] = useState( { factory, selectedFilter: { name: '' } } ) const onFilterClick = (filter) => { setState({ selectedFilter: filter, factory: factory.filter((app) => { return app.showcase.platforms.includes(filter.name) }) }) } let cards = state.factory.map((app, index) => { return ( <Card app={app} key={app.slug} /> ) }) return ( <div> <FilterBar onClick={onFilterClick} /> <div css={css` display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; padding: 0 8vw; `}> {cards} </div> </div> ) }

Issue #654 Use shelljs to execute shell commands, and fs to read and write. In public/index.html specify some placeholder and we will replace those in our script const fs = require('fs'); const shell = require('shelljs') let indexHtml = fs.readFileSync(publicIndexHtmlPath, 'utf8') indexHtml = indexHtml .replace('CONSTANT_HTML_TITLE', `${app.name} - ${app.headline.title}`) .replace('CONSTANT_HTML_META_DESCRIPTION', app.headline.text) fs.writeFileSync(publicIndexHtmlPath, indexHtml) // build shell.cd('projects/my_react_app') shell.exec('npm run build') // copy shell.exec(`cp -a projects/my_react_app web_server/public`)

Issue #654 A good landing page is one of the most crucial part of a successful launch. Recently I started creating landing pages for my apps, I was lazy that I ended creating a white label React app as a landing template and then write a script to build multiple similar pages. Here are a few examples, at first the pages share same look and feel, but we can add more configuration parameters later on....

Issue #653 Use https://github.com/biati-digital/glightbox Configure css. Specify class='glightbox for html elements <link rel="stylesheet" href="css/blueimp-gallery.min.css" /> Install package npm install glightbox import GLightbox from 'glightbox' const lbElements = features.map((feature) => { return { 'href': require(`../apps/${app.slug}/${feature.image}`), 'type': 'image', 'title': feature.title, 'description': feature.texts[0], } }) const openLb = () => { const lightbox = GLightbox({ touchNavigation: true, loop: true, autoplayVideos: true, onOpen: () => {}, beforeSlideLoad: (slide, data) => {} }); const myGallery = GLightbox({ elements: lbElements, autoplayVideos: false, }); myGallery....

Issue #652 Use https://github.com/michalsnik/aos Add link to head <head> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> </head> Jus before closing body tag <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script> Specify data-aos <div data-aos="fade-up"> </div>

Issue #651 Use shelljs npm install shelljs const shell = require('shelljs') shell.exec(`cp -a source_path/. destination_path`) The -a option is an improved recursive option, that preserve all file attributes, and also preserve symlinks. The . at end of the source path is a specific cp syntax that allow to copy all files and folders, included hidden ones. Updated at 2020-05-07 04:10:05

Issue #650 Install npm install @babel/core npm install @babel/cli npm install @babel/preset-env Configure .babelrc { "presets": ["@babel/preset-env"] } In package.json, transpile using npx babel then node dist/index.js "start": "cp ../landing/src/apps/factory.js copied/factory.js && npx babel index.js --out-file dist/index.js && npx babel copied/factory.js --out-file dist/factory.js && node dist/index.js"

Issue #649 Check flag then define css const Picture = (feature) => { const shadowCss = feature.shadow ? css` border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); ` : css`` return ( <div css={css` width: 40vw; @media (max-width: 420px) { width: 98vw; } `}> <div css={shadowCss}> <img css={css` max-width: 100%; height: auto; `} src={require(`../apps/${feature.image}`)} /> </div> </div> ) }

Issue #648 In a similar fashion to plain old javascript, note that href needs to have valid hash tag, like #features <a href='#features' onClick={() => { const options = { behavior: 'smooth' } document.getElementById('features-section').scrollIntoView(options) }} > Features </a> Updated at 2020-05-06 08:36:21

Issue #647 emotion can be used in framework agnostic or with React. To use with React, follow https://emotion.sh/docs/introduction#react npm i @emotion/core Note that you must have /** @jsx jsx */ at the top of the file, and the unused jsx in import is a directive for JSX to work properly // this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ import { css, jsx } from '@emotion/core' const color = 'white' render( <div css={css` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; &:hover { color: ${color}; } `} > Hover to change color....

Issue #646 Sync the DispatchQueue Pass DispatchQueue and call queue.sync to sync all async works before asserting Use mock Use DispatchQueueType and in mock, call the work immediately import Foundation public protocol DispatchQueueType { func async(execute work: @escaping @convention(block) () -> Void) } extension DispatchQueue: DispatchQueueType { public func async(execute work: @escaping @convention(block) () -> Void) { async(group: nil, qos: .unspecified, flags: [], execute: work) } } final class MockDispatchQueue: DispatchQueueType { func async(execute work: @escaping @convention(block) () -> Void) { work() } }

Issue #645 Install webpack npm init npm install webpack webpack-cli --save-dev vim webpack.config.js module.exports = { entry: "./index.js", mode: 'production', output: { filename: "./index.js" } } To invoke webpack, run below. Your output is dist/index.js npx webpack Minify js npm install babel-minify-webpack-plugin --save-dev Minify html npm install html-webpack-plugin --save-dev const MinifyPlugin = require('babel-minify-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: "./index.js", mode: 'production', output: { filename: "./index.js" }, plugins: [ new MinifyPlugin(), new HtmlWebpackPlugin({ template: 'index....