Open1
react入門
プロジェクト構成
create-react-app
で生成したものがベース
.
├── ./.devcontainer
│ └── ./.devcontainer/devcontainer.json
├── ./.gitignore
├── ./.node-version
├── ./.prettirerc.json
├── ./Dockerfile
├── ./Dockerfile.prod
├── ./LICENSE
├── ./README.md
├── ./docker-compose.prod.yml
├── ./docker-compose.yml
├── ./eslintrc.json
├── ./node_modules
├── ./package.json
├── ./public
│ ├── ./public/favicon.ico
│ ├── ./public/index.html
│ ├── ./public/logo192.png
│ ├── ./public/logo512.png
│ ├── ./public/manifest.json
│ └── ./public/robots.txt
├── ./src
│ ├── ./src/App.css
│ ├── ./src/App.js
│ ├── ./src/App.js.bck
│ ├── ./src/App.test.js
│ ├── ./src/index.css
│ ├── ./src/index.js
│ ├── ./src/logo.svg
│ ├── ./src/reportWebVitals.js
│ └── ./src/setupTests.js
└── ./yarn.lock
前提となるindex.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
クリックカウントアップアプリ実装
App.js
import React, { useState } from "react";
function App() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default App;
以下サイト読みながら色々実装してみる