강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

[React / VanillaJS] Creating UI elements directly Part 1

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) 24 reviews

539 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 1 (this lecture)

  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 (scheduled to open in May)

  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.


Knowledge sharer's
Are you curious about other 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,796

Learners

688

Reviews

395

Answers

4.8

Rating

11

Courses

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

Curriculum

All

49 lectures ∙ (12hr 7min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

24 reviews

5.0

24 reviews

  • 71summernight님의 프로필 이미지
    71summernight

    Reviews 2

    Average Rating 5.0

    5

    7% enrolled

    As a lecture collector, I have taken many lectures, but this is the best lecture! First of all, the instructor is proficient in the latest TypeScript grammar and React grammar, so just by looking at it and thinking about when to use that, I feel like my skills are improving. Originally, I didn't understand it well just by looking at the book and the document, but I learned it again by thinking, "Oh, that's how to apply it like that." I think it would be better for juniors with 1-3 years of experience rather than beginners. First of all, the lecture itself can be applied directly to practice, and it even covers the advanced parts of React. I definitely recommend it to those who want to grow from juniors to mid-level developers by thinking about how to make better codes, not just simple implementations. Now, I feel confident that I can implement any UI I encounter. ㅋㅋㅋㅋ Even if I don't understand it 100%, I think it's great that I can apply it to practice by looking at the code organized by chapter again. Just by taking this lecture and having the completed UI code, I think it's worth the lecture. I hope the next part comes out soon!

    • jaenam
      Instructor

      Thank you for your sincere review 😃 I'm glad and encouraged that what I expected while planning this lecture was conveyed well! I'll also work hard on editing the video for the next part so that I can open it as soon as possible 😂

  • myne님의 프로필 이미지
    myne

    Reviews 2

    Average Rating 5.0

    5

    13% enrolled

    It's so informative because it doesn't just teach you one way to implement it, but introduces several methods!! And it goes beyond simply implementing the basic behavior of UI elements, and it teaches you really detailed behaviors, such as the function that opens when you search with the accordion ctrl+F, and how to make tooltips appear on the screen. When I was developing a UI that I hadn't implemented before, I would follow along by Googling or YouTube, but after listening to the lecture, I got a sense that 'this UI should be implemented like this', and I think I gained a lot of confidence in implementing it. Considering the price, I think I can get a lot more out of it than other lectures. Part 1 was helpful, but I'm really looking forward to Part 2 after seeing the list of elements!!! It seems like the best lecture for junior front-end developers. Thank you for always giving great lectures :)

    • jaenam
      Instructor

      Minhye, thank you for your valuable lecture review! I think you introduced the lecture content better than I did. ㅎㅎ :D

  • pangoons3126님의 프로필 이미지
    pangoons3126

    Reviews 8

    Average Rating 5.0

    5

    15% enrolled

    Actually, I'm not the type to write reviews often, but I thought this lecture was really good. In the beginning, it was about setting up a project as a preview of Next 14, and the methods you can think of when creating a left sidebar, and then, it explains well through live coding how to write vanilla code in React, and how to implement and think about each reusable component. I originally planned to listen to all the lectures and write a review, but I'm writing it now. ㅎㅎ I think it would be good to take just one component lecture a day~ Thank you for making such a great lecture!

    • jaenam
      Instructor

      Thank you for your sincere course review 😄 I'm worried that it will get harder as you go on, watching one component a day. I hope you can finish it steadily without overdoing it.

  • didgusdhdk3님의 프로필 이미지
    didgusdhdk3

    Reviews 1

    Average Rating 5.0

    5

    12% enrolled

    I thought this lecture provided a perspective to look deeper into the essential aspects of JS. The instructor's books and lectures are always helpful. Thank you.

    • jirehmuze님의 프로필 이미지
      jirehmuze

      Reviews 3

      Average Rating 5.0

      Edited

      5

      31% enrolled

      This is a fun and informative lecture. You can learn how to apply the basic concepts of React, TS, and JS to real-world scenarios. It was very beneficial because I was able to implement the same UI in many different ways and learn many good methods for each requirement. I think it's a lecture in the style of a professor who suggests realistic directions like a mentor, but also encourages thinking without telling you everything. So, when I listen to the lecture, I naturally think, "I think I would do it this way?" and I can enjoy listening while thinking, "Why did you write this part like this?" For example, in the part where the hidden attribute is written in capital letters because React forcibly type-converts it, I thought, "Since I accessed it with ref anyway, can't I just assign the attribute with the setAttribute method?" I had the opportunity to think, and I also learned a lot of practical tips, such as using closures and how to handle the type of GNB more safely and readably. Thank you for creating this great lecture. I'm learning a lot thanks to you!

      • jaenam
        Instructor

        Irae, thank you for your heartfelt review! I'm thrilled to hear you were able to think for yourself while taking the course – that's exactly the kind of ideal student I'm hoping for! If you have any ideas for better methods along the way, please feel free to share them in the community; it would be a great help to everyone.

    $53.90

    jaenam's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!