wildfrontend

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    },
    "devDependencies": {

wildfrontend

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

wildfrontend

{
    "name": "",
    "version": "0.1.0",
    "description": "",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w",
        "test": "jest",
        "clear": "taskkill /f /im node.exe || killall -9 node",
        "fontmini": "node utils/fontMinify"

wildfrontend

npm install @storybook/react --save-dev
npm install @storybook/addons @storybook/addon-actions @storybook/addon-knobs @storybook/addon-notes --save-dev

wildfrontend

#!/bin/sh

git filter-branch --env-filter '

OLD_EMAIL="要修改的email"
CORRECT_NAME="正確的user.name"
CORRECT_EMAIL="正確的user.email"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]

wildfrontend

import React from 'react'
import ReactDOM from 'react-dom'
import { StoreContext } from 'redux-react-hook'
import App from './App'
import store from './store/configureStore'
import prestate from './store/prestate'

const app = (state = {}) => {
    ReactDOM.render(

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

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

wildfrontend

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

wildfrontend

設計元件命名

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