react入門

.
├── ./.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

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();

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;