[TIL]RealJSを使用した映画Webサービス6 0627

2797 ワード
React TIL テキストリンク
今日の進度
#4 MAKING THE MOVIE APP(#4.3~#4.5)
#5 CONCLUSIONS(#5.1~

#4.3 Adding Genres


タイプの追加
Movie.jsファイルにprotTypeを追加します.(アレイ形式)
App.jsファイルにタイプ={movie.genes}を追加します(この操作を実行する必要があります).
JavaScriptを作成する際にclassを使用するとcomponentクラスに混乱するため、などをすべてclassNameに変更する必要があります
もちろんMoviejsファイルでも変更が必要です
mapは2つのパラメータ1を渡します.現在のアイテム2.item number
➡ map.(gene,index)名称はindexであってもよいしitemnumberなどであってもよい

#4.4 Styles Timelapse


私はただcssファイルを作成して、コードだけを開いて、それからスキップします

#4.5 Cutting the summary


・太さのテキストの長さを短くするのが狙い

研磨方法
        <p className="movie__summary">{summary.slice(0, 180)}...</p>
このようにsliceを使うと180字後になります.タグ付け可能

#5 CONCLUSIONS


#5.1 Deploying to Github Pages


ターゲット:コードをクラウドにアップロードする

  • (githubへのアップロードを許可するモジュールを最初にインストール)npm install gh-pages
    (gh-pagesはgithubのgigubページドメインにこのサイトを表示することを許可し、githubは静的サイト/HML/CSS/Javascriptを無料で提供します.)

  • package.jsonファイルへ
    2_1. “homepage”:“https://[mygithub username].
    2_2. 次にnpm startを停止し、npm runstartを実行し、コンパイルファイルを生成します.
    2_3. 同じファイルの「scripts」で「deploy」:「gh-pages-d build」;
    "predeploy": "npm run build"
    npmはまずpredeployを呼び出します.predeployはnpm run buildを実行します.buildはbuildscriptを呼び出します.スクリプトはfolderを返します.完了したらpredeployを終了します.
    その後、deployはgh-pagesを呼び出し、構築フォルダをアップロードします.
    すなわち、deployが構築フォルダをアップロードして構築フォルダを取得する方法は、npm run buildを実行することである.predeployはdeployを実行すると自動的に呼び出されます.
    2_4. npm run deployの再実行
    (あ、実行する前に、deployとpredeployのdeployが一致していることを確認してください.preの意味は同じ名前でなければなりません)
    ・67916・eこんなに仕事がよくできていることを確認
  • 今でも名前はこんなreactアプリ
    これはpublic/indexですhtmlにMovie Appを置き換えます.
    npm run deployを再実行して更新します!
    ・𐥌𐥌・❵水晶完成・𐥎𐥎8・

    #5.1 Are we done?


    stateを取得するにはclass componentは必要ありません(react hookなので、新しい概念なので教えていません)
    この授业で教える内容はすべて学んだようで、少し速成的に闻いて、ぼんやりした过去の感じがして、、、?正しいと思いますか?
    他のAPIを利用してWebページを作成したいのですが、できません.😿
    • Gitはファイルの変更、取り消し、削除を管理する
    Lavarelブログデータベース