React : インストール2024/08/23 |
ユーザーインタフェース構築のための JavaScript ライブラリー、React のインストールです。 |
|
[1] | |
[2] | 任意の一般ユーザーで React テストアプリケーションを作成します。 |
freebsd@dlp:~ $
node -v v18.19.1
freebsd@dlp:~ $
mkdir testproject freebsd@dlp:~ $ cd testproject
# React アプリケーション [test-app] 作成 freebsd@dlp:~/testproject $ npx create-react-app test-app Creating a new React app in /home/freebsd/testproject/test-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ..... ..... Success! Created test-app at /home/freebsd/testproject/test-app Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd test-app npm start Happy hacking!freebsd@dlp:~/testproject $ cd test-app freebsd@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] を入れます。 |
freebsd@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;
freebsd@dlp:~ $ cd ~/testproject/test-app freebsd@dlp:~/testproject/test-app $ npm start |
Sponsored Link |