wildfrontend

tailwind.css with css-in-jss

https://www.freecodecamp.org/news/how-to-style-your-react-apps-with-less-code-using-tailwind-css-and-styled-components/

Step

1. install

yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros styled-components

wildfrontend

jgthms/bulma#3129

answer:

  const setParentAsActive = (node: any) => {
    if (node) {
 node.parentNode.className = node.className

wildfrontend

As of NPM 5, saving is done by default

--save-dev is only needed if we’re building a node app;

since we output minified JS for production via npm run build, everything is a dev dependency,

so it doesn’t actually matter in practice whether modules are added to dependencies or devDependencies in package.json.

wildfrontend

Why closing a page does not unmount the component

Closing the page will actually discard the main process/thread which handles the rendering of the web page. In that case, 
there is actually no way of calling the unmounting method since the thread which calls that method is discarded.

https://stackoverflow.com/questions/60961581/react-the-preferred-way-to-perform-an-action-when-leaving-page-changing-rout

wildfrontend

prepare

• rewrite fetch to catch httpcode

const httpCodeFetch = async ({ url, config = initialConfig }) => {
    const res = await fetch(url, config)
    if (res.status === 204) return {}
    if (res.ok) {
 return res.json()

wildfrontend

remix-run/react-router#4685

1. add in
2. add Global 404

Hey guys, so today I've came across this exact same issue and I was able to get something working to render a "global not found" component, while keeping the benefits of sharing some UI within a "parent" route. I wanted to share this with you, in case you find this useful for your case :)

Consider the routes I need to support:

wildfrontend

https://medium.com/inturn-eng/naming-styled-components-d7097950a245

https://twitter.com/thekitze/status/989110942096117768

use * wildcard

• for
  • prettier code style

wildfrontend

設計元件命名

• https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/
• https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

wildfrontend

const App = () =>{
  const [conunt,setConunt] = useState(1)
  return (
      <div>
         {Array(conunt).fill(<RepeatCompnent/>)}
      </div>
  )
}

wildfrontend

function blobToDataURI(blob, callback) {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = function (e) {
        callback(e.target.result)
    }
}