Riot.js에서 Tourof Heroes 테스트

Riot.js(이하 riot)는 매우 간단하고 무게가 가볍고 입문 문턱이 낮으며 쓰기가 매우 좋은 구성 요소를 중심으로 하는 UI 라이브러리이다.
계속저번, 이번에는 영웅 부품을 더욱 구체적으로 제작할 것이다.
그럼 이번에도 같이 하자!

heres 구성 요소 만들기

그럼 빨리 부품을 만들고 싶은데 보일러판의 기본 부품 이름이 맞지 않아서 변경해야 합니다.

디렉토리 파일 이름 바꾸기

우선 몇 개의 디렉터리와 파일의 이름을 바꿉니다. src/components/global 디렉터리 이하의 my-component 와 이름을 모두 heroes 로 바꿉니다. 구체적으로는 다음과 같습니다.

src/components/global/my-component 카탈로그

src/components/global/my-component/my-component.riot 파일

src/components/global/my-component/my-component.spec.js 파일

여기로 변경하면 오류가 발생하므로 index.html 다음과 같이 변경합니다.
※ Prettier도 성형🙇

         <main class="column column-60">
           <h1>Hello that's my first Riot.js App</h1>
-
-          <div
-            is="my-component"
-            data-riot-component
-            message="Hello There"
-          ></div>
+          <div is="heroes" data-riot-component message="Hello There"></div>
         </main>

필요 없는 구성 요소 삭제

다음은 보일러판에 추가로 필요하지 않은 부품이 있어서 삭제합니다. 이번엔 src/components/global 카탈로그 이하sidebar 카탈로그와 src/components 카탈로그 이하includes 카탈로그입니다. 여기를 모두 삭제하세요.
이러다가는 착오가 생길 수 있으니 고치겠습니다.

           <h1>Hello that's my first Riot.js App</h1>
           <div is="heroes" data-riot-component message="Hello There"></div>
         </main>
-        <aside is="sidebar" data-riot-component class="column"></aside>
       </div>
     </div>

index.} 구성 요소 설치

그럼 제가 heroes 구성 요소를 만들게요. 우선, 영웅의 이름을 표시할 때까지 시험해 보세요. heroes 파일을 다음과 같은 내용으로 바꿔 주세요. (결과는 모두 다시 썼네요w)

-<my-component>
-  <p>{ props.message }</p>
-</my-component>
+<heroes>
+  <h2>{ hero }</h2>
+
+  <script>
+    export default {
+      hero: 'Windstorm'
+    }
+  </script>
+</heroes>

이렇게 하면 화면에 src/pages/heroes.riot라는 이름이 나올 것 같아요.

영웅 객체 표시

이번 히어로 데이터는 이름 외에도 각 히어로마다 자신만의 아이디를 가지게 했다. 따라서 우리는 Windstorm를 다음과 같은 내용으로 바꿨다.

 <heroes>
-  <h2>{ hero }</h2>
+  <h2>{ hero.name } Details</h2>
+  <div><span>id: </span>{ hero.id }</div>
+  <div><span>name: </span>{ hero.name }</div>

   <script>
     export default {
-      hero: 'Windstorm'
+      hero: {
+        id: 1,
+        name: 'Windstorm'
+      }
     }
   </script>
 </heroes>

지금까지 다음 ID와 이름이 표시됩니다.

Uppercase로 표시

이번 강좌에서 h2 라벨의 이름은 뚜껑으로 표시되어 있기 때문에 heroes.riot를 다음과 같은 내용으로 변경합니다.

 <heroes>
-  <h2>{ hero.name } Details</h2>
+  <h2>{ hero.name.toUpperCase() } Details</h2>
   <div><span>id: </span>{ hero.id }</div>
   <div><span>name: </span>{ hero.name }</div>

편집 영웅

마지막으로 사용자는 텍스트 상자에서 영웅의 이름을 편집할 수 있습니다.
우선 구성 요소의 이름 부분에 입력 형식을 추가하십시오.

 <heroes>
   <h2>{ hero.name.toUpperCase() } Details</h2>
   <div><span>id: </span>{ hero.id }</div>
-  <div><span>name: </span>{ hero.name }</div>
+  <div>
+    <label>name:
+      <input type="texts" value={ hero.name } placeholder="name" />
+    </label>
+  </div>

이렇게 해서 heroes.riot 옆에 있는 이름이 텍스트 상자로 바뀌었다.

변경 내용 실시간 반영

이름 부분에 텍스트 상자가 설치되어 있지만 이름을 바꾸어도 제목 아래의 이름에 반영되지 않기 때문에 실시간으로 반영할 수 있도록 수정됩니다.

   <div><span>id: </span>{ hero.id }</div>
-  <div><span>name: </span>{ hero.name }</div>
+  <div>
+    <label>name:
+      <input
+        type="text"
+        value={ hero.name }
+        placeholder="name"
+        oninput={ handleInput }
+      />
+    </label>
+  </div>

   <script>
     export default {
       hero: {
         id: 1,
         name: 'Windstorm'
+      },
+      handleInput(e) {
+        this.hero.name = e.target.value;
+        this.update();
       }
     }
   </script>

이 완성되면 <input>의 텍스트 상자의 값을 변경하세요!

제목 및 스타일 조정

마지막으로 기존에 기본으로 되어 있던 제목을 이번 강좌로 변경heroes 초기화된 스타일링을 조정한다.
먼저 제목을 변경하고 name:를 다음과 같이 변경하세요.

       <div class="row">
         <main class="column column-60">
-          <h1>Hello that's my first Riot.js App</h1>
+          <h1>Tour of Heroes with Riot</h1>
           <div is="heroes" data-riot-component message="Hello There"></div>
         </main>
       </div>

다음에 스타일을 변경하려면 다음과 같이 변경name하십시오.

   color: #369;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
+  margin: 1.6rem auto;
 }
 h2,
 h3 {
   color: #444;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
+  margin: 1.2rem auto;
 }
 body {
   margin: 2em;

...（中略）

   color: #333;
   font-family: Cambria, Georgia;
 }
+input[type="text"] {
+  border: 1px solid gray;
+  border-radius: 2px;
+  padding: 1px 4px;
+}
 /* everywhere else */
 * {
   font-family: Arial, Helvetica, sans-serif;

이 정도까지 변경할 수 있다면 아래의 그림처럼 변경할 수 있을 것 같습니다.

제목과 이름의 상하 margin

설정

input 라벨을 조정하는border

Part2 "영웅 편집기"가 완성되었습니다. 모르는 점이 있으면 사양하지 마세요!가능한 한 설명해 주세요!
그럼, 계속Part3 목록 표시.