Wizard Notes

Pythonを使った音楽信号分析の技術録、作曲活動に関する雑記

python の ローカルwebサーバ で React の勉強のためのサンプルコードを動かす

f:id:Kurene:20210728200925p:plain

最近新しい Web 音楽アプリを作ろうと考えています。

音楽関係の信号/情報処理はPythonを使いたいため、

  • サーバサイド: flask
  • クライアントサイド: React

という構成を検討しています。

React の勉強と理解のためにサンプルコードを走らせたり、実装した各コンポーネントのテストをローカルでする際に、なるべく自分が慣れているPython環境で動作させたいと思い、第一歩としてpython の ローカルwebサーバ でReactのサンプルコードを動かしてみました

以下の記事を参考にしています。

正真正銘のReactだけの不純物なしでReact入門

Hello World – React

クライアントサイドのサンプルコード (.jsx, .html)

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>Hello, React!!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="text/babel" src="main.jsx" defer></script>
  </body>
</html>

main.jsx

function App() {
  const element = (
    <div>
      <h1>Hello React!!</h1>
      <h2>Hello React!!</h2>
      <h3>Hello React!!</h3>
      <p>Hello React!!</p>
    </div>
  );
  return element;
}

const target = document.querySelector('#app');
ReactDOM.render(<App/>, target);

python ローカルWebサーバ

index.html と main.js が配置されているフォルダ/ディレクトリで、以下のコマンドを実施します。

>python -m http.server 5000
Serving HTTP on :: port 5000 (http://[::]:5000/) ...

その後、Webブラウザhttp://localhost:5000/ を開けばOKです。

(ポートは5000以外でもOKです)