React : インストール2022/08/26 |
ユーザーインタフェース構築のための JavaScript ライブラリー、React のインストールです。
|
|
[1] | |
[2] | 任意の一般ユーザーで React テストアプリケーションを作成します。 |
ubuntu@dlp:~$
node -v v16.17.0 # React アプリケーション [test-app] 作成 ubuntu@dlp:~/testproject$ npx create-react-app test-app Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. Creating a new React app in /home/ubuntu/testproject/test-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ..... ..... Happy hacking! npm notice npm notice New minor version of npm available! 8.15.0 -> 8.18.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.18.0 npm notice Run npm install -g npm@8.18.0 to update! npm noticeubuntu@dlp:~/testproject$ cd test-app ubuntu@dlp:~/testproject/test-app$ npm start > test-app@0.1.0 start > react-scripts start Compiled successfully! You can now view test-app in the browser. Local: http://localhost:3000 On Your Network: http://10.0.0.30:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully |
任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。 |
[3] | 表示のページを編集して [Hello World] を入れます。 |
ubuntu@dlp:~$
vi ~/testproject/test-app/src/App.js # 適当な位置にテキストを追加
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>
Hello React World!
</h1>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
ubuntu@dlp:~$ cd ~/testproject/test-app ubuntu@dlp:~/testproject/test-app$ npm start |
Sponsored Link |