最近新しい Web 音楽アプリを作ろうと考えています。
音楽関係の信号／情報処理はPythonを使いたいため、
という構成を検討しています。
React の勉強と理解のためにサンプルコードを走らせたり、実装した各コンポーネントのテストをローカルでする際に、なるべく自分が慣れているPython環境で動作させたいと思い、第一歩としてpython の ローカルwebサーバ で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です）
