React #6

Create React App

単一ページアプリケーションを迅速かつ容易に開発するためのツールチェーン.

図ソース:codestates
react+複数のノード.jsパッケージ

インストール方法

ターミナルから起動するフォルダに移動します.npx create-react-app (프로젝트 이름)
設定したプロジェクト名のサブフォルダを作成します.
そのフォルダにReact Appパッケージがインストールされます

react, react-dom, react-scripts with cra-template...

で標準ノードv.16.12.0を記述すると、バージョンの問題でパッケージのインストールが正しくない場合があります.
-手動インストールは状況により異なります

インストール完了後

以上のように

単純な使用

ランダム名言アプリケーション

最後のメッセージを表示すると、

したがって

cd react-random-proverb
npm start

入力後、次の操作を行います.

Webブラウザで次のアドレスを検索します.

デフォルトのResact App画面が表示されますsrc/App.jsを修正し、希望するアプリケーションを生成
=src:sourceの略語
まずsrc/index.jsを修正する
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
    <App />,
  document.getElementById('root')
);

ReactDOM.render()-document.getElementById('root')の位置に<App />を描く.

次のsrc/App.jsを見てください
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" />
        <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;

若干の修正<p>

        <p>
          <code>명언</code> 을 보는 앱을 만듭니다
        </p>

修正した様子がすぐに反映されました
適当な名言で言い換えると.

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <code>명언</code> 을 보는 앱을 만듭니다
        </p>
        피할 수 없으면 즐겨라
      </header>
    </div>

名言を変え続けたいなら

名言目録準備

避けられないなら存分に楽しみましょう

幸福は1種の習慣で、それを身につけて

の人生を志して、遅くない時

など...

const proverbs = ['피할 수 없으면 즐겨라', '행복은 습관이다, 그것을 몸에 지니라', '인생에 뜻을 세우는데 있어 늦은 때라곤 없다']

App()案、車に戻る前に入れる

名言の位置は{proverbs}

です

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <code>명언</code> 을 보는 앱을 만듭니다
        </p>
        {proverbs}
      </header>
    </div>

名言全編
ランダムに見せたい

の時
-ランダム索引関数の作成

const getRandomIndex = (length) => {
  return parseInt(Math.random() * length);
}

リフレッシュするたびにランダムな名言が表示されます