** 可以根據我提交記錄去查看相關內容** click here
parcel
install
npm install -g parcel-bundler
.babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
use
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Adopt me</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="root">not rendered </div>
<script src="./app.js"></script>
</body>
</html>
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import SearchParams from './SearchParams'
const App = () => {
return (
<div>
hello world
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
package.json
"scripts": {
"clear-build-cache": "rm -rf .cache/ dist/",
"dev": "parcel src/index.html --port 3000 ",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
},
npm run dev
css in js
use emotion.js,document click here
install
npm install --save @emotion/core @emotion/babel-preset-css-prop
.babelrc
{
"presets": [
"@babel/preset-react",
"@babel/preset-env",
[
"@emotion/babel-preset-css-prop",
{
"sourceMap": false
}
]
],
}
use
import React from 'react'
import { css,keyframes } from '@emotion/core'
import { Link } from '@reach/router'
const Spin=keyframes`
to {
transform:rotate(360deg);
}
`;
export default function NavBar() {
return (
<header css={css`
background-color:#333;
position:sticky;
top:0;
`}>
<Link to="/">Adopt Me!</Link>
<span
css={css`
animation:1s ${Spin} linear infinite;
font-size:60px;
`}
aria-label="logo"
role="img"> ?</span>
</header>
)
}
** vscode 下載 styled-components插件
typescipt
npm i typescript -D
npx tsc --init //init ts config
test
npm i -D jest @testing-library/react
package.json
scripts:{
"test": "jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"
}
接下來進入src目錄並創建一個名爲的文件夾__tests__。請注意，兩邊都是雙下劃線;在這種情況下，Jest假定此處的所有JS文件都是測試
SearchParams.test.js
import React from 'react'
import {render,cleanup,fireEvent} from '@testing-library/react'
import pet,{ANIMALS,_breeds,_dogs} from '@frontendmasters/pet'
import SearchParams from '../SearchParams'
// 退出時進行清理
afterEach(cleanup);
test('SearchParams ', async() => {
const {getByTestId,getByText}=render(<SearchParams/>);
const animalDropdown=getByTestId('use-dropdown-animal');
expect(animalDropdown.children.length).toEqual(ANIMALS.length+1)
//確保api 調用正確
expect(pet.breeds).toHaveBeenCalled();
const breedDropdown=getByTestId('use-dropdown-breed');
expect(breedDropdown.children.length).toEqual(_breeds.length+1);
//form 提交測試
const searchResults = getByTestId("search-results");
expect(searchResults.textContent).toEqual("No Pets Found");
//click @todo 需要將異步請求改爲同步
fireEvent(getByText("Submit"), new MouseEvent("click"))
});
- 此處實例api獲取，採用了mock,可以在項目中查看相關實現
如果遇到 asyc語法問題，例如： ReferenceError: regeneratorRuntime is not defined
此時，需要babel 轉譯支持步驟如下:
npm i @babel/plugin-transform-runtime @babel/runtime -D
`.babelrc`
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}