기초에서 배우기 React/React Hooks 학습 노트 3 React를 사용해 보세요
16826 단어 React
React를 사용해 봅시다.
HTML 파일에서 React를 사용해보십시오.
<!DOCTYPE html>
<html>
<head>
<title>いいねボタン</title>
<meta charset="UTF-8" />
<!-- Reactを読み込む -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- babelを読み込むとJSXが使えるようになる -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!-- Reactコンポーネントが表示される -->
<div id="likesButtonContainer"></div>
<script type="text/babel">
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
const toggleLiked = () => setLiked(!liked);
return (
<button className="likeButton" onClick={toggleLiked}>
{liked ? "いいね済" : "いいね前"}
</button>
);
};
// ReactがLikeButtonをDOMに変換して、HTMLのDOMコンテナに追加する
const domContainer = document.querySelector("#likesButtonContainer");
ReactDOM.render(<LikeButton />, domContainer);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>React</title>
<meta charset="UTF-8" />
<!-- Reactを読み込む -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- babelを読み込むとJSXが使えるようになる -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!-- Reactコンポーネントが表示される -->
<div id="App"></div>
<script type="text/babel">
const NameInput = () => {
const [name, setName] = React.useState("〇〇");
const handleOnChange = (event) => setName(event.target.value);
return (
<div>
<input type="text" onChange={handleOnChange} />
<p>こんにちは、{name}さん</p>
</div>
);
};
// ReactがNameInputをDOMに変換して、HTMLのDOMコンテナに追加する
const domContainer = document.querySelector("#App");
ReactDOM.render(<NameInput />, domContainer);
</script>
</body>
</html>
CodeSandbox에서 React를 사용해보십시오.
import React, { useState } from "react";
import "./styles.css";
// 表示用コンポーネント
const CounterText = (props) => <p>現在のカウント数：{props.count}</p>;
const INITIAL_COUNT = 0;
const Counter = () => {
const [count, setCount] = useState(INITIAL_COUNT);
// カウントアップ、ダウンボタン。現在の値を引数で受け取ることができる
const countAdd = () => setCount((prevCount) => prevCount + 1);
const countSub = () => setCount((prevCount) => prevCount - 1);
const countDouble = () => setCount((prevCount) => prevCount * 2);
const countHalf = () => setCount((prevCount) => prevCount / 2);
const countReset = () => setCount(INITIAL_COUNT);
return (
<>
<CounterText count={count} />
<button onClick={countAdd}>ボタン +1</button>
<button onClick={countSub}>ボタン -1</button>
<button onClick={countDouble}>ボタン *2</button>
<button onClick={countHalf}>ボタン /2</button>
<button onClick={countReset}>リセット</button>
</>
);
};
export default function App() {
return <Counter />;
}
Create React App 정보
# yarnのインストール
npm install -g yarn
# プロジェクト作成
npx create-react-app react-practice
# アプリ起動
cd react-practice
yarn start
React 개발을 돕는 도구
참고
- 기초에서 배우기 React/React Hooks
Reference
이 문제에 관하여(기초에서 배우기 React/React Hooks 학습 노트 3 React를 사용해 보세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tseno/items/f58ddd3c5faaee11f01d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
