@@ -8,9 +8,9 @@ React таны програм болон дизайнаа хэрхэн бүтэ
88
99</Intro >
1010
11- ## Mock загвартай эхэлцгээе {/* start-with-the-mockup* /}
11+ ## Mockup загвартай эхэлцгээе {/* start-with-the-mockup* /}
1212
13- Та аль хэдийн JSON API-тай ба мөн mock загвар дизайнераасаа авчихсан гэж төсөөлье.
13+ Та аль хэдийн JSON API-тай ба мөн mockup загвараа дизайнераасаа авчихсан гэж төсөөлье.
1414
1515JSON API дараах байдалтай өгөгдөл буцаадаг:
1616
@@ -25,15 +25,15 @@ JSON API дараах байдалтай өгөгдөл буцаадаг:
2525]
2626```
2727
28- Mock дараах байдлаар харагдана:
28+ Mockup дараах байдлаар харагдана:
2929
3030<img src="/images/docs/s_thinking-in-react_ui.png" width="300" style={{margin: '0 auto'}} />
3131
3232React дээр UI-аа бүтээхдээ дараах 5 алхамыг дагах хэрэгтэй.
3333
3434## Алхам 1: UI-аа компонентын шатлал болгон салгая {/* step-1-break-the-ui-into-a-component-hierarchy* /}
3535
36- Эхлээд бүх компонент болон дэд компонентуудыг mock загварын дагуу зурж тэдгээрийг нэрлэнэ. Хэрвээ та дизайнертайгаа ажиллаж байгаа бол тэд аль хэдийн диэайн зурдаг хэрэгсэл дээрээ нэрлэсэн байж магадгүй. Тэднээс асуугаарай.
36+ Эхлээд бүх компонент болон дэд компонентуудыг mockup загварын дагуу зурж тэдгээрийг нэрлэнэ. Хэрвээ та дизайнертайгаа ажиллаж байгаа бол тэд аль хэдийн диэайн зурдаг хэрэгсэл дээрээ нэрлэсэн байж магадгүй. Тэднээс асуугаарай.
3737
3838Таны юу хийдгээс хамааран өөр, өөр арга замаар хуваасан байж магадгүй юм.
3939
@@ -63,7 +63,7 @@ React дээр UI-аа бүтээхдээ дараах 5 алхамыг дага
6363
6464Хэрвээ ` ProductTable ` (лаванда)-г харах юм бол, та хүснэгтийн толгой ("Name" ба "Price") нь тусдаа компонент биш байгааг анзаарна. Энэ нь гэхдээ сонголтын асуудал юм. Энэ жишээнд энэ нь ` ProductTable ` -ын нэг хэсэг юм. Гэхдээ хэрвээ толгой хэсэг цаашид нэмэгдэхээр бол (жишээ нь эрэмбэлэгдэх хэсэг) та тусдаа ` ProductTableHeader ` гэдэг нэртэй компонент шинээр үүсгэж болох юм.
6565
66- Одоо mock дизайн дээрх компонентүүдийг шаталсан бүтцээр харуулцгаая.
66+ Одоо mockup дизайн дээрх компонентүүдийг шаталсан бүтцээр харуулцгаая.
6767
6868* ` FilterableProductTable `
6969 * ` SearchBar `
0 commit comments