Zenn
Open7

macOSにReactをインストールする

React
macOS
Teru roomTeru room

Node.jsとnpmをインストールする

  1. パッケージから
  • Node.jsのダウンロードページ : https://nodejs.org/en/download
    • macOS Installer (.pkg) : 64bit / ARM64 : node-v20.9.0.pkg
      • Node.js v20.9.0 to /usr/local/bin/node
      • npm v10.1.0 to /usr/local/bin/npm
  1. コマンドから
zsh
brew install node
zsh
node -v
npm -v
結果
v20.9.0
10.1.0
Teru roomTeru room

Create React Appを実行する

  • 新規ターミナル
zsh
mkdir react-app;cd react-app
npx create-react-app my-app
  • Ok to proceed? (y) y
zsh
cd my-app
npm start
  • 自動起動 : htttp://localhost:3000
Teru roomTeru room
App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello world</h1>
    );
  }
}

export default App;
Teru roomTeru room

GitHubのmainブランチにプッシュ

zsh
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://access_token@github.com/teruroom/my-react-app.git
git push -u origin main
Teru roomTeru room
src/App.js
class App extends Component {
  render() {
    return (
-      <h1>Hello world</h1>
+      <div>
+        <input type="text" />
+        <button>SEND</button>
+      </div>
    );
  }
}

Teru roomTeru room
react/my-app/src/App.js
import React, { Component } from 'react';
import { FormApp } from './FormApp';

class App extends Component {
  render() {
    return (
      <FormApp />
    );
  }
}

export default App;
react/my-app/src/FormApp.js
import React,{Component} from "react"

export class FormApp extends Component{
  constructor(props){
    super(props);
    this.state={
       value: ''
      ,message: ''
    }
    this.handleInput=this.handleInput.bind(this);
    this.send=this.send.bind(this);
  };
  handleInput({target:{value}}){
    console.log('handleInput called!');
    this.setState({value});
  }
  send(){
    const {value}=this.state;
    this.setState({
       value:''
      ,message:value
    });
  }

  render(){
    return(
      <div>
        <input type="text" value={this.state.value} onChange={this.handleInput}/>
        <button onClick={this.send}>SEND</button>
        <div class="message">{this.state.message}</div>
      </div>
    );
  }  
}
react/my-app/src/App.css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
input{
  background-color: aliceblue;
}
button{
  border-radius: 4px;
  background-color: rgb(50, 100, 84);
  color:white;
}
.message{
  margin-top: 3px;
  width:150px;
  background-color: dimgray;
  color: azure;
}
Teru roomTeru room


変更内容をGitHubのmainブランチにプッシュ

cd /Users/sharl/dev/react/my-app
git add .                          
git commit -m "5th"                
git push -u origin main