강의

멘토링

커뮤니티

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

311 learners

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

Reviews from Early Learners

What you will gain after the course

  • 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,841

Learners

689

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

  • wonse님의 프로필 이미지
    wonse

    Reviews 6

    Average Rating 5.0

    5

    7% enrolled

    Đó là bài giảng đã giúp tôi tập trung tốt hơn vì tôi cảm thấy như mình đang giao tiếp với học sinh hơn là chỉ cung cấp thông tin!! Tôi cũng thích rằng có một phần được triển khai trong phiên bản JavaScript vanilla 👍

    • jaenam
      Instructor

      Cảm ơn bạn Wonse! Các nghiên cứu và video có hơi khác một chút phải không? cười

  • withkey님의 프로필 이미지
    withkey

    Reviews 2

    Average Rating 5.0

    5

    32% enrolled

    Các vấn đề mà tôi đã suy nghĩ trong vài tháng khi xây dựng hệ thống thiết kế, đặc biệt là những vấn đề liên quan đến không có đầu và phức hợp, đều đã được giải quyết trong Phần 7. Đặc biệt là ở phần sử dụng Generics trong createContext, tôi rất vui mừng 🫨 Core JavaScript Bắt đầu với. nhiều nghiên cứu tài liệu chính thức về TypeScript, React và các bài giảng thành phần hiệu quả... Cảm ơn bạn rất nhiều vì những bài giảng và tài liệu tuyệt vời. 😭👍

    • jaenam
      Instructor

      Tôi không biết phải làm gì với tất cả những lời khen ngợi không đáng có 😅 Tôi rất vui vì bạn thấy nó hữu ích và chúng tôi sẽ cố gắng tạo ra nhiều nội dung thú vị và hữu ích hơn trong tương lai!

  • imhass님의 프로필 이미지
    imhass

    Reviews 2

    Average Rating 5.0

    5

    31% enrolled

    • eddie85님의 프로필 이미지
      eddie85

      Reviews 7

      Average Rating 5.0

      5

      100% enrolled

      Đây là một bài giảng giúp tôi hiểu về cách và tiêu chuẩn để tận dụng trình duyệt, HTML, React, Vanilla khi phát triển UI. Ngoài ra, việc xem bài giảng cũng giúp tôi nắm bắt được quy trình phát triển UI, điều này rất hữu ích.

      • zimablue14님의 프로필 이미지
        zimablue14

        Reviews 14

        Average Rating 4.4

        5

        100% enrolled

        Thời gian học hơi thất vọng và nội dung trị giá 100 điểm.

        $53.90

        jaenam's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!