React 초보자이지만 Ubuntu 18.04에서 create-react-app와 React Hooks를 사용하여 바삭 바삭한 카운터 만들기
여러가지 날아가고 있습니다.
우선 우분투 버전 확인
Ubuntu에서 만듭니다.
% cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.3 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
yarn 설치
yarn 공식을 따르십시오.
htps : // 또는 rn pkg. 코 m / ㅁ g / 엔 / ㅇ cs / ㄱ s 탓 l / # 데비안 ㄴ s
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update && sudo apt install yarn
create-react-app 설치
이것도 yarn 공식을 따르십시오.
htps : // 또는 rn pkg. 코 m / ぁ g / 엔 / 도 cs / c ぃ / c 레테 /
$ yarn global add create-react-app
이런 느낌의 메시지가 나오면 OK (아마).
success Installed "[email protected]" with binaries:
- create-react-app
Done in 9.51s.
$ yarn --version
1.17.3
create-react-app 명령을 두드린다.
아래 명령은 현재 디렉토리에 my-react-app라는 디렉토리를 만듭니다.my-react-app 바로 아래에 React로 앱을 만드는 데 필요한 여러 파일이 자동으로 만들어집니다.
$ create-react-app my-react-app
성공하면 이런 메시지가 나온다.
Success! Created my-react-app at /home/koralle/learn/my-react-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-react-app
yarn start
Happy hacking!
$ create-react-app --version
3.1.2
앱을 실행해 보세요.
$ cd my-react-app
$ yarn start
조금 기다리면 이런 메시지가 된다.
Compiled successfully!
You can now view my-react-app in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.2.15:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
말한 대로 브라우저에서 http://localhost:3000/ 에 액세스합니다.
라고 하는지 사람에 따라서는 자동적으로 브라우저로 페이지가 일어납니다.
이런 느낌.
다음부터가 본제.
카운터를 만들기 위한 준비
우선은 my-react-app 바로 아래의 디렉토리 구성을 확인
이번 터치는 ./public/index.html 와 ./src/App.js 뿐입니다.
$ cd my-react-app
$ ls
README.md node_modules package.json public src yarn.lock
$ tree ./public
./public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
0 directories, 6 files
$ tree ./src
./src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
0 directories, 7 files
먼저 index.html를 엽니다. 이번에는 가능한 한 불필요한 것을 전부 지웁니다. 방해이므로.
나는 이것만 남겼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
다음은 ./src/App.js 를 편집.function App() 전체가 소위 App 컴퍼넌트라고 하는 사람입니다만,
한번 이 녀석을 전부 지웁니다.
그리고 App 컴퍼넌트를 애로우 함수식으로 재작성한다. 애로우 함수식, 세련된 느낌을 좋아합니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
}
export default App;
한 번 도중 경과를 보고 싶기 때문에 먼저 카운터 버튼을 만듭니다.
앱 구성 요소를 제외하고는 생략합니다.
const App = ()=> {
return(
<div>
<button> + </button>
<button> - </button>
</div>
);
}
이런 느낌. 작지만 확실히 + 버튼과 - 버튼이 표시됩니다.
그런 다음 카운터를 만듭니다. 그러기 위해 필요한 것은 최저한 이하의 2개입니다.
% cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.3 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
yarn 공식을 따르십시오.
htps : // 또는 rn pkg. 코 m / ㅁ g / 엔 / ㅇ cs / ㄱ s 탓 l / # 데비안 ㄴ s
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update && sudo apt install yarn
create-react-app 설치
이것도 yarn 공식을 따르십시오.
htps : // 또는 rn pkg. 코 m / ぁ g / 엔 / 도 cs / c ぃ / c 레테 /
$ yarn global add create-react-app
이런 느낌의 메시지가 나오면 OK (아마).
success Installed "[email protected]" with binaries:
- create-react-app
Done in 9.51s.
$ yarn --version
1.17.3
create-react-app 명령을 두드린다.
아래 명령은 현재 디렉토리에 my-react-app라는 디렉토리를 만듭니다.my-react-app 바로 아래에 React로 앱을 만드는 데 필요한 여러 파일이 자동으로 만들어집니다.
$ create-react-app my-react-app
성공하면 이런 메시지가 나온다.
Success! Created my-react-app at /home/koralle/learn/my-react-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-react-app
yarn start
Happy hacking!
$ create-react-app --version
3.1.2
앱을 실행해 보세요.
$ cd my-react-app
$ yarn start
조금 기다리면 이런 메시지가 된다.
Compiled successfully!
You can now view my-react-app in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.2.15:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
말한 대로 브라우저에서 http://localhost:3000/ 에 액세스합니다.
라고 하는지 사람에 따라서는 자동적으로 브라우저로 페이지가 일어납니다.
이런 느낌.
다음부터가 본제.
카운터를 만들기 위한 준비
우선은 my-react-app 바로 아래의 디렉토리 구성을 확인
이번 터치는 ./public/index.html 와 ./src/App.js 뿐입니다.
$ cd my-react-app
$ ls
README.md node_modules package.json public src yarn.lock
$ tree ./public
./public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
0 directories, 6 files
$ tree ./src
./src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
0 directories, 7 files
먼저 index.html를 엽니다. 이번에는 가능한 한 불필요한 것을 전부 지웁니다. 방해이므로.
나는 이것만 남겼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
다음은 ./src/App.js 를 편집.function App() 전체가 소위 App 컴퍼넌트라고 하는 사람입니다만,
한번 이 녀석을 전부 지웁니다.
그리고 App 컴퍼넌트를 애로우 함수식으로 재작성한다. 애로우 함수식, 세련된 느낌을 좋아합니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
}
export default App;
한 번 도중 경과를 보고 싶기 때문에 먼저 카운터 버튼을 만듭니다.
앱 구성 요소를 제외하고는 생략합니다.
const App = ()=> {
return(
<div>
<button> + </button>
<button> - </button>
</div>
);
}
이런 느낌. 작지만 확실히 + 버튼과 - 버튼이 표시됩니다.
그런 다음 카운터를 만듭니다. 그러기 위해 필요한 것은 최저한 이하의 2개입니다.
$ yarn global add create-react-app
success Installed "[email protected]" with binaries:
- create-react-app
Done in 9.51s.
$ yarn --version
1.17.3
아래 명령은 현재 디렉토리에
my-react-app라는 디렉토리를 만듭니다.my-react-app 바로 아래에 React로 앱을 만드는 데 필요한 여러 파일이 자동으로 만들어집니다.$ create-react-app my-react-app
성공하면 이런 메시지가 나온다.
Success! Created my-react-app at /home/koralle/learn/my-react-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-react-app
yarn start
Happy hacking!
$ create-react-app --version
3.1.2
앱을 실행해 보세요.
$ cd my-react-app
$ yarn start
조금 기다리면 이런 메시지가 된다.
Compiled successfully!
You can now view my-react-app in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.2.15:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
말한 대로 브라우저에서 http://localhost:3000/ 에 액세스합니다.
라고 하는지 사람에 따라서는 자동적으로 브라우저로 페이지가 일어납니다.
이런 느낌.
다음부터가 본제.
카운터를 만들기 위한 준비
우선은 my-react-app 바로 아래의 디렉토리 구성을 확인
이번 터치는 ./public/index.html 와 ./src/App.js 뿐입니다.
$ cd my-react-app
$ ls
README.md node_modules package.json public src yarn.lock
$ tree ./public
./public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
0 directories, 6 files
$ tree ./src
./src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
0 directories, 7 files
먼저 index.html를 엽니다. 이번에는 가능한 한 불필요한 것을 전부 지웁니다. 방해이므로.
나는 이것만 남겼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
다음은 ./src/App.js 를 편집.function App() 전체가 소위 App 컴퍼넌트라고 하는 사람입니다만,
한번 이 녀석을 전부 지웁니다.
그리고 App 컴퍼넌트를 애로우 함수식으로 재작성한다. 애로우 함수식, 세련된 느낌을 좋아합니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
}
export default App;
한 번 도중 경과를 보고 싶기 때문에 먼저 카운터 버튼을 만듭니다.
앱 구성 요소를 제외하고는 생략합니다.
const App = ()=> {
return(
<div>
<button> + </button>
<button> - </button>
</div>
);
}
이런 느낌. 작지만 확실히 + 버튼과 - 버튼이 표시됩니다.
그런 다음 카운터를 만듭니다. 그러기 위해 필요한 것은 최저한 이하의 2개입니다.
$ cd my-react-app
$ yarn start
Compiled successfully!
You can now view my-react-app in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.2.15:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
우선은
my-react-app 바로 아래의 디렉토리 구성을 확인이번 터치는
./public/index.html 와 ./src/App.js 뿐입니다.$ cd my-react-app
$ ls
README.md node_modules package.json public src yarn.lock
$ tree ./public
./public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
0 directories, 6 files
$ tree ./src
./src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
0 directories, 7 files
먼저
index.html를 엽니다. 이번에는 가능한 한 불필요한 것을 전부 지웁니다. 방해이므로.나는 이것만 남겼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
다음은
./src/App.js 를 편집.function App() 전체가 소위 App 컴퍼넌트라고 하는 사람입니다만,한번 이 녀석을 전부 지웁니다.
그리고 App 컴퍼넌트를 애로우 함수식으로 재작성한다. 애로우 함수식, 세련된 느낌을 좋아합니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
}
export default App;
한 번 도중 경과를 보고 싶기 때문에 먼저 카운터 버튼을 만듭니다.
앱 구성 요소를 제외하고는 생략합니다.
const App = ()=> {
return(
<div>
<button> + </button>
<button> - </button>
</div>
);
}
이런 느낌. 작지만 확실히 + 버튼과 - 버튼이 표시됩니다.
그런 다음 카운터를 만듭니다. 그러기 위해 필요한 것은 최저한 이하의 2개입니다.
이것들을 구현하기 위해서, 이번은 React Hooks라고 하는 React 공식 API안의 useState()라고 하는 함수를 이용합니다.
자세한 내용은 공식 문서를 참조하십시오.
훅 빠른 이해 – React
htps : // 그럼. Rea ctjs. 오 rg/도 cs/호오 ks-오ゔぇrゔぃ에w. HTML
서식은 이번 경우 이런 느낌.
count 가 위의 (*1) 이고, setCount 는 (*2) 와 이콜은 아니지만, (*2) 의 구현에 필요합니다.useState(0) 의 0 은 count 의 초기치입니다.const [count, setCount] = useState(0);
이것을 사용해
./src/App.js 에 카운터의 동작을 쓰지만, 1 행째도 조금 편집합니다.import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
// (*1), (*2)の実装に必要
const [count, setCount] = useState(0);
const increment = () => setCount(count+1); // カウンタの値を増やす
const decrement = () => setCount(count-1); // カウンタの値を減らす
// index.htmlの<div id="root"></div>の中に表示
return(
<div>
<p> {count} </p>
<button onClick={increment}> + </button>
<button onClick={decrement}> - </button>
</div>
);
}
export default App;
이것으로 완성
카운터 값 늘리기
카운터 값 감소
Reference
이 문제에 관하여(React 초보자이지만 Ubuntu 18.04에서 create-react-app와 React Hooks를 사용하여 바삭 바삭한 카운터 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/koralle/items/a1d5c42c4f3782b169ff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(React 초보자이지만 Ubuntu 18.04에서 create-react-app와 React Hooks를 사용하여 바삭 바삭한 카운터 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/koralle/items/a1d5c42c4f3782b169ff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
