다큐멘터리

나는 소프트웨어 엔지니어이다. 그는 항상 전단 개발에 대해 약간의 두려움을 느끼지만, 이러한 상황이 곧 바뀌기를 바란다.
나는 백엔드er가 더 많다.나는 보통 앞부분에서 나의 업무가 충분히 전문적으로 보일 정도에 이르렀을 뿐이다. 그리고 나는 반대 방향으로 달리기 시작했다.그래서 이번 봉쇄에서 우리는 우리의 관계를 개선하고 보완하기 위해 노력해야 한다. 전단!

문서를 선택해야 하는 이유


자신을 동력을 유지하기 위해 견지할 수 있는 관례에 갇히기 위해 나는 나의 학습 과정과 내가 직면한 문제를 기록하기로 결정했다.이렇게 하면 나는 두 번 배울 수 있다. 한 번은 모든 개념을 흡수하고, 다른 한 번은 글을 쓸 때이다.
보상으로 예전과 같은 문제에 빠졌을 때, 내가 아는 건망증의 물고기처럼 나도 좋은 참고를 얻게 될 것이다.
우리 발을 젖히자!

뭐 공부 해요?


저에게 있어서 배우면서 배우는 것은 어떤 진보를 얻는 가장 좋은 과정입니다. 그래서 저는 첫 번째 질문은 텍스트 편집기나 IDE와 브라우저의 뚜렷한 요소 외에 무엇을 인코딩해야 합니까?
여기와 저기를 탐색한 후에 브라우저에 React Developer Tools 확장을 설정하여 디버깅을 했습니다. 저는 편집기에 ESLint 확장을 설치했기 때문에 지금은 충분하다고 생각합니다.
프로젝트에 React를 추가할 때 다음 두 가지 경로가 있습니다.

  • The easy way for simpler projects: HTML 파일에 스크립트가 포함되어 있으면 시작할 수 있습니다

  • The more convenient way for more complex projects:react 응용 프로그램 만들기
  • 진정한 초보자로서 나는 결코 냉담해서 피곤하지 않다. 나는 두 가지 길을 가기로 결정했다.
    "안녕하세요, 세상!"나는 아마도 변화를 위해 일을 더욱 재미있게 하고 똑같은 간단한 일을 할 것이라고 생각한다.

    무엇을 구축합니까?


    《영폐》 이래로 시간은 착각으로 여겨져 왔다. 우리 대다수 사람들은 하루하루가 그 이름을 잃고'정의로운 날'이 되었다는 것에 동의했다. 나의 헬로월드 응용 프로그램은 오늘의 어느 날에만 팝업되고 그 목적을 잃을 때마다.
    우리는 매일 독특한 브랜드를 만들어 동업자들 사이에서 돋보이게 하려고 노력할 것이다.

    구축할 내용 보기: https://ranaemad.github.io/whatdaytoday/

    JSX 회사


    나는 곧 통과했다React.createElement(). 그러나 내가 JSX를 찾으면 나는 이미 목적지에 도착했다는 것을 알게 될 것이다.
    JSX에 대해 말하자면 우리가 지금 알아야 할 것은 HTML과 Javascript가 결합된 고집스러운 아이가 있는데 그는class를 사용하는 것을 거부하고className로 바꾸며 다른 수정이 있다고 생각합니다. 그러나 그는 우리가 Javascript 표현식을 사용할 수 있도록 허락해 주었기 때문에 우리는 그를 좋아합니다.

    간단한 방법


    손을 더럽힐 때가 됐어!whatdaytoday를 만드는 것부터 시작합니다.내 루트 폴더에 있는 html 파일은 기본적인 html 템플릿을 추가하고 id가 있는div 응용 프로그램을 추가하여 우리의 내용을 보여주고main을 연결했다.css 파일, 나중에 사용자 정의할 수 있습니다.

    오늘이 무슨 날이야?html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>What Day Today?</title>
        <link rel="stylesheet" href="main.css" />
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    
    React를 사용하려면 몸을 닫기 전에 몇 개의 스크립트 태그를 포함해야 합니다.
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    
    좋습니다. 하지만 만약에 우리가createElement() 방법을 사용한다면 됩니다. 만약에 우리가 JSX를 실행하고 싶다면?이를 위해서는 바벨의 도움으로 코드를 컴파일해야 하기 때문에 더 많은 스크립트 표시를 포함할 것입니다.
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    너무 좋아요.우리 다 준비됐어!이제 React 코드를 별도의 React에 추가합니다.js 파일.
    우선, 우리는 이미지와 가상 텍스트가 있는div를 추가하여 우리의 앱div에 보여 줍니다.

    반응하다회사 명
    const App = (
      <div className="day">
        <div className="heading">Thursday</div>
        <img src="thursday.svg alt="thursday" />
      </div>
    );
    
    ReactDOM.render(App, document.getElementById("app"));
    
    저는 루트 폴더에 매일을 대표하는 SVG 이미지를 포함하고 있습니다. 모든 것이 좋아 보이는데 왜 작동하지 않습니까?히드록시 메틸 멜라민 디메틸 에테르...
    내가 깨닫기 전에, 나는 5분 동안 새로 고치고 검색했다. 나는 서버를 실행하지 않았다. (Babel은 외부 스크립트를 컴파일하려면 서버가 필요하다.) 나는 단지 브라우저에서 HTML 파일의 경로를 열었을 뿐이다.
    멋지다. 실행php -S localhost:8080이 나를 위해 이 문제를 해결했지만 다른 서버는 모두 정상적으로 작동할 수 있다.
    모든 것이 정상이라고 확신하는 이상, 오늘 날짜부터 하루를 동적으로 가져오고, 가상 텍스트와 이미지를 사용자 정의 텍스트와 이미지로 대체합니다.
    나는 주파수 그룹의 모든 날짜 데이터를 초기화하고 거기서부터 시작할 것이다.

    반응하다회사 명
    let week = [
      {
        day: "Sunday",
        img: "sunday.svg",
      },
      {
        day: "Monday",
        img: "monday.svg",
      },
      {
        day: "Tuesday",
        img: "tuesday.svg",
      },
      {
        day: "Wednesday",
        img: "wednesday.svg",
      },
      {
        day: "Thursday",
        img: "thursday.svg",
      },
      {
        day: "Friday",
        img: "friday.svg",
      },
      {
        day: "Saturday",
        img: "saturday.svg",
      },
    ];
    
    const day = new Date().getDay();
    const today = week[day];
    
    const App = (
      <div className={"day " + today.day.toLowerCase()}>
        <div className="heading">{today.day}</div>
        <img src={today.img} alt={today.day} />
      </div>
    );
    
    ReactDOM.render(App, document.getElementById("app"));
    
    좋습니다. 이제 메인 메뉴에 css를 추가할 수 있습니다.css 파일, 하루하루를 돋보이게 합니다.

    주요했어css
    @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
    
    .day {
      height: 100vh;
      font-family: "Great Vibes", cursive;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .heading {
      font-size: 4.5rem;
      margin-bottom: 0;
      font-weight: bold;
    }
    
    .day img {
      width: 50vw;
    }
    
    .wednesday .heading {
      color: #f9a727;
      text-shadow: 2px 2px #3f3d55;
    }
    .saturday .heading {
      color: #e50914;
      text-shadow: 2px 2px #00bfa6;
    }
    .thursday .heading {
      color: #2f2f41;
      text-shadow: 2px 2px #00b0ff;
    }
    .friday .heading {
      color: #d83e75;
      text-shadow: 2px 2px #2f2f41;
    }
    .sunday .heading {
      color: #ff6584;
      text-shadow: 2px 2px #3f3d55;
    }
    .monday .heading {
      color: #0e01bf;
      text-shadow: 2px 2px #ffb8b8;
    }
    .tuesday .heading {
      color: #36799a;
      text-shadow: 2px 2px #ffb8b8;
    }
    
    @media screen and (max-width: 600px) {
      :root {
        font-size: 10px;
      }
    }
    @media screen and (max-width: 300px) {
      :root {
        font-size: 5px;
      }
    }
    
    앤, 이미 시동을 걸고 운행했어!

    이 섹션의 코드를 찾을 수 있습니다 HERE

    더 편리한 방식


    이전 섹션의 코드를createreact 응용 프로그램으로 이전합시다!createreact 프로그램을 사용하려면 node를 설치해야 합니다. 다행히도 설치했습니다.나는 단지 내 루트 폴더에서 npx create-react-app . 를 실행하고 거기서부터 시작할 뿐이다.
    응용 프로그램을 시작하려면 npm start 만 실행하면 자동으로 시작하여 포트 3000에서 실행하고 화면에 React 로고를 출력합니다.
    나는 폴더 구조를 보고 이것이 미래 라나가 걱정해야 할 것이라고 결정했다. 지금 나는 응용 프로그램의 출발점을 찾아 내 코드로 기존의 내용을 교체하고 그것이 유효한지 확인하고 싶다.스포일러 경보: 해냈어!
    응용 프로그램으로 바로 이동합니다.js 파일, src 폴더에 설치된 모든 SVG 이미지를 가져옵니다. React 로고를 가져오는 방식과 같습니다.그 후에, 나는 텍스트가 아닌 변수를 가리키기 위해week수조를 미세하게 수정해야만 했다.이러한 변화는 브라우저에 즉시 반영되므로 새로 고칠 필요가 없습니다.나는 이미react 응용 프로그램을 만드는 것을 좋아한다<삼.

    src/App.회사 명
    import React from "react";
    
    import sunday from "./sunday.svg";
    import monday from "./monday.svg";
    import tuesday from "./tuesday.svg";
    import wednesday from "./wednesday.svg";
    import thursday from "./thursday.svg";
    import friday from "./friday.svg";
    import saturday from "./saturday.svg";
    
    import "./App.css";
    let week = [
      {
        day: "Sunday",
        img: sunday,
      },
      {
        day: "Monday",
        img: monday,
      },
      {
        day: "Tuesday",
        img: tuesday,
      },
      {
        day: "Wednesday",
        img: wednesday,
      },
      {
        day: "Thursday",
        img: thursday,
      },
      {
        day: "Friday",
        img: friday,
      },
      {
        day: "Saturday",
        img: saturday,
      },
    ];
    
    그 후에 나는 이미 존재하는 JSX 코드를 내 코드로 교체했고 응용 프로그램의 css도 교체했다.우리 해냈어!우리는 이곳에서 일을 완성했다.

    이 섹션의 코드를 찾을 수 있습니다 HERE
    이번 작은 승리를 통해 나는 우리가 다시 만날 때까지 위대한 첫걸음을 마칠 것이다.
    모든 피드백이나 건의를 환영합니다.여기, 저기, 어디든지, 나에게 도움의 손길을 내밀어라!

    RanaEmad 회사 / 오늘


    오늘 날짜를 출력하는 간단한 React 스크립트

    좋은 웹페이지 즐겨찾기