강의

멘토링

로드맵

Inflearn brand logo image
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

294 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,417

Learners

672

Reviews

393

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에서 모두 해결되었습니다.. 특히 createContext에서 제너릭을 사용하는 부분에서.. 전율을 느꼈습니다.. 🫨 코어자바스크립트부터 시작해서, 여러 이펙티브 타입스크립트, 리액트 공식문서 스터디, 컴포넌트 강의까지.. 좋은 강의와 자료 너무너무 감사드립니다. 😭👍

    • 정재남
      Instructor

      과분한 칭찬에 몸둘바를 모르겠네요 😅 도움이 되셨다니 다행이고, 앞으로도 더 재밌고 유익한 컨텐츠를 마련하고자 노력하겠습니다!

  • 임하스님의 프로필 이미지
    임하스

    Reviews 2

    Average Rating 5.0

    5

    31% enrolled

    • eddie님의 프로필 이미지
      eddie

      Reviews 7

      Average Rating 5.0

      5

      100% enrolled

      UI를 개발할 때 브라우저, HTML, react, vanilla를 활용하는 방법과 기준을 알게 되는 강의였습니다. 부가적으로 강의를 보면서 UI 개발할 때 흐름을 볼 수 있어서 많은 도움이 되었습니다.

      • working.zima님의 프로필 이미지
        working.zima

        Reviews 14

        Average Rating 4.4

        5

        100% enrolled

        수강기간이 좀 아쉽고, 내용은 100점입니다.

        • tladud112님의 프로필 이미지
          tladud112

          Reviews 2

          Average Rating 5.0

          5

          31% enrolled

          UI 설계 시 많은 도움이 됩니다.

          $53.90

          jaenam's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!