Issue #666 Direct url 200.html https://stackoverflow.com/questions/44491184/react-router-does-not-work-in-production-and-surge-deployments Support for client-side routing: https://create-react-app.dev/docs/deployment/#netlify /* /index.html 200 Serving the Same Build from Different Paths "homepage": ".", Updated at 2020-06-14 19:48:16

Issue #665 Usually in header we have logo that takes user back to the home page // index.js import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' <Router> <Switch> <Route exact path="/"> <Home /> </Route> </Router> // Header.js import { useHistory } from 'react-router-dom' const history = useHistory() <a class="navbar-item" onClick={() => { history.push('/') }}>

Issue #664 Use moment-timezone https://momentjs.com/timezone/docs/ npm install moment-timezone // public/index.html <script src="moment.js"></script> <script src="moment-timezone-with-data.js"></script> Need to import from moment-timezone, not moment import moment from 'moment-timezone' moment(startAt).tz('America/Los_Angeles').format('MMMM Do YYYY')

Issue #663 /** @jsx jsx */ import { css, jsx } from '@emotion/core' import React from 'react'; import videojs from 'video.js' export default class VideoPlayer extends React.Component { componentDidMount() { // instantiate Video.js this.player = videojs(this.videoNode, this.props, function onPlayerReady() { console.log('onPlayerReady', this) }); } // destroy player on unmount componentWillUnmount() { if (this.player) { this.player.dispose() } } // wrap the player in a div with a `data-vjs-player` attribute // so videojs won't create additional wrapper in the DOM // see https://github....

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> ) }