강의

멘토링

로드맵

Programming

/

Front-end

[React / VanillaJS] Creating UI elements directly Part 2

By creating representative UI elements in React and pure JavaScript versions, you can experience various perspectives and methods using Web APIs and further improve your front-end development skills.

(5.0) 8 reviews

302 learners

  • jaenam
실습 중심
바닐라JS
React
vanilla-js
ui
TypeScript
DOM

Reviews from Early Learners

What you will learn!

  • React practical knowledge

  • DOM API

  • Ability to utilize various other Web APIs

🎉 25% discount when you take the course through Roadmap 🎉

Roadmap link: https://inf.run/cNuxY

(If you are already taking one of the two courses, you will still receive a 25% discount on the remaining courses .)

Let's create various UI elements ourselves!

Let's create a pure JavaScript (vanilla-js) version and a React version, and introduce various possible methods.

  • Experiment with different versions of the component and compare their features.


  • Develop your practical skills by applying APIs that are widely used in the field.

I recommend this to these people

UI components are developed by front-end developers who lack confidence in developing solely based on libraries.

For those who are not familiar with the latest HTML5 APIs and DOM APIs.

Anyone who feels thirsty for improving their UI component development skills

After class

  • This one lecture is all you need to know about UI elements ! You can gain development knowledge equivalent to a senior front-end developer when it comes to UI elements.

  • By combining and developing the elements covered in this course, you will gain the confidence to create your own new UI elements.

Learn about these things.

Part 2 This lecture explores ways to reuse existing components.

Part 1

  1. accordion

  2. Tab menu

  3. Tooltip

  4. Responsive Text Box

  5. Multi-line ellipsis

  6. Delayed loading

  7. Infinite scroll

  8. Horizontal scroll box

  9. Scroll Spy

Part 2 (this lecture)

  1. snack bar

  2. Modal

  3. Popover

  4. Image Slide

  5. Carousel

  6. Gallery

  7. Select Box

  8. Autocomplete

  9. Drag and drop list

Features of this course

Vivid live coding

This lecture is recorded and edited as is from the live coding conducted in the online study, and has the advantage of vivid presence and quick feedback. It also presents various perspectives that are not confined to a set framework, and you can experience solutions to unexpected problems.

Step-by-step difficulty adjustment, introduction and application of the latest API

The course is structured so that elements with similar skills are grouped together and the difficulty level gradually increases. In addition, the focus is on familiarizing students with the latest HTML5 and DOM APIs by introducing and applying them.

Things to note before taking the class

Practice environment

You just need to have the following versions or higher:

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

Learning Materials

  • Example code is provided in compressed file format.

Player Knowledge and Notes

  • The class is conducted under the assumption that you are familiar with basic HTML/CSS, JavaScript grammar, and React grammar.

  • Next.js and TypeScript, etc. are only used as tools for convenience and are not covered in detail.

  • This lecture is a recorded and edited version of a study conducted by a knowledge sharer.


Related Lectures 📺

Recommended for
these people

Who is this course right for?

  • Front-end developer aspirant

  • Frontend Junior Developer

Need to know before starting?

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

Hello
This is

32,553

Learners

676

Reviews

395

Answers

4.8

Rating

11

Courses

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

Curriculum

All

42 lectures ∙ (10hr 35min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

8 reviews

5.0

8 reviews

  • withkey님의 프로필 이미지
    withkey

    Reviews 2

    Average Rating 5.0

    5

    32% enrolled

    デザインシステムを構築しながら数ヶ月間悩んでいた問題、特にヘッドレス、コンパウンドなどの問題がセクション7ですべて解決されました。から始めて、いくつかのエフェクティブタイプスクリプト、リアクト公式文書スタディ、コンポーネント講義まで..良い講義と資料ありがとうございます。 😭👍

    • jaenam
      Instructor

      過分な賞賛に身の回りがわかりませんね 😅 役に立ったのは幸いで、今後ももっと面白くて有益なコンテンツを用意しようと努力します!

  • imhass님의 프로필 이미지
    imhass

    Reviews 2

    Average Rating 5.0

    5

    31% enrolled

    • eddie85님의 프로필 이미지
      eddie85

      Reviews 7

      Average Rating 5.0

      5

      100% enrolled

      UIを開発する際に、ブラウザ、HTML、React、Vanillaを活用する方法と基準がわかる講義でした。 付加的に講義を見ながらUI開発をする際の流れを見ることができ、大変 도움이 되었습니다.

      • zimablue14님의 프로필 이미지
        zimablue14

        Reviews 14

        Average Rating 4.4

        5

        100% enrolled

        受講期間が少し残念ですが、内容は100点です。

        • tladud1125661님의 프로필 이미지
          tladud1125661

          Reviews 2

          Average Rating 5.0

          5

          31% enrolled

          UIを設計する際に多くの役に立ちます。

          Limited time deal ends in 6 days

          $6,298.00

          24%

          $53.90

          jaenam's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!