React project 1

19072 ワード
テキストリンク
最初に反応器によって作成された基本プロジェクトコードを見てみましょう.
index.html
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="index.pack.js"></script>
  </body>
</html>
Googleフォントheadの真ん中に置いてあるのを見ました.
もちろんcssに連絡します.
<link rel="stylesheet" href="style.css" />
これは入っています.
体に根がある
それは私たちがjsファイルに書いた空間です
<script src="index.pack.js"></script>
これはjsファイルとつながっているように見えますが...
componentフォルダはNavbarとMainに分かれています.
Navbar.jsから
import React from "react";
import Logo from "./logo.png";

export default function Navbar() {
  return (
    <nav className="Navbar">
      <img src={Logo} alt="logo" />
      <h4 className="nav--title">React Course - Project 1</h4>
    </nav>
  );
}
もちろんRECT IMPORTをします
そのマークを置いたのは私が書類を調べて見つけたのです.
まずそのpngファイルはコンポーネントが同じフォルダにあります.
もしあなたがそうすれば.
  <img src={Logo} alt="logo" />
このように書くとイメージが適用されます.
ただimgsrcはそうしましたがマークが表示されていません...
Main構成部品の表示
Main.js
import React from "react";

export default function Main() {
  return (
    <div className="main">
      <h1 className="main--title">Fun facts about React</h1>;
      <ul className="main--text">
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}
この子は何の説明もないが,どうせこの子たちを見ているのだ.
componentをexport defaultにエクスポートしたようです.
App.jsを見て
import React from "react";
import Main from "./components/Main.js";
import Navbar from "./components/Navbar.js";

export default function App() {
  return (
    <div className="container">
      <Navbar />
      <Main />
    </div>
  );
}
導入されていることがわかります
このアプリはjsに集まった子供たち
index.jsにこのように描けばいいです
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
もちろん導入を忘れずに!
style.cssをよく見て
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

.Navbar {
  display: flex;
  align-items: center;
  background-color: #21222a;
  width: 550px;
  height: 90px;
  padding: 30px 26px;
  justify-content: space-between;
}

.nav--title {
  color: #deebf8;
  font-size: 16px;
  font-weight: 600;
}

.main {
  background-color: #282d35;
  width: 550px;
  height: 459px;
  color: #ffffff;
}
.main--title {
  margin: 0;

  font-weight: 700;
  font-size: 39px;
  line-height: 47px;
  letter-spacing: -0.05em;

  padding: 57px 99px 0px 27px;
}

.main--text {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  max-width: 450px;
}

.main--text > li {
  margin: 20.36px;
}

.main--text > li::marker {
  font-size: 1.4rem;
  color: #61dafb;
}
まず指導者が書いたコードに従ってやったわけではありません.
私が検索したときに作成したCSSはこうです.結果は同じです.
ちなみに、私は初めてそのmarker pseduo classを学びました.
それを書くと、リストの人が決めてくれて修正してくれます.
MDNリンクへ
::marker
そしてチェリンジ・ロゴを背景画面に入れます.
私はグーグルでこのようにしました.
Main.にある
import React from "react";
import Group from "./Group.png";

export default function Main() {
  return (
    <div
      className="main"
      style={{
        backgroundImage: `url(${Group})`,
      }}
    >
      <h1 className="main--title">Fun facts about React</h1>
      <ul className="main--text">
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}
画像をインポートするのと同じ方法を使いました.
残りはcssでこうしました.
.main {
  background-color: #282d35;
  width: 550px;
  height: 459px;
  color: #ffffff;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right center;
}
背景に複数の画像が表示されないようにno-repeatを選択した.
位置もこのように決まっています...
そして完成~~~
Ellis 11日目リアルタイムレッスンのjavascript
関数再帰関数の実装