inflearn logo

First Meet with React: A Practical Guide for Publishers

First steps in React for publishers! Learn everything from basic syntax to building and deploying a responsive shopping mall website all at once. This is not just a collection of fragmented React examples; you will learn and apply the core syntax necessary for actual web page production.

(5.0) 2 reviews

16 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js

What you will gain after the course

  • A solid understanding of core React concepts (Components, Props, State, Events)

  • Completion of a card list-oriented shopping mall website

  • Experience in JSON API data integration and acquisition of Context API basics.

  • Deploy the completed project to Vercel to obtain a live service URL.

  • Category, brand, and price range filtering

  • Pagination

"It's a loss if you don't get it now! Half off tuition just by subscribing to YouTube"

Subscribe & Like & Comment Event

Complete a simple mission and receive a 50% discount coupon immediately. Grab this all-time great benefit offered for a limited time right now!

Participate in the event: https://forms.gle/wcD2wRVeaG7B7fSj7

Lecture Features ✨

  • Publisher-friendly explanations: Naturally connecting React concepts from existing HTML/CSS mindsets

  • Practical Project-Oriented: Learn React by directly building a shopping mall UI

  • Portfolio Completion: Providing results that can be used immediately for job applications

Shopping mall design examples

Curriculum Summary 📝

Part 1. Orientation

Understand the reasons for learning React and the environment for learning preparation.
Clearly identify why React is necessary from a publisher's perspective.

Key Content
Purpose of learning React, preparing development tools, perspective on transitioning from publisher to front-end developer


Part 2. React Fundamentals

Learn the core syntax and concepts for React development.
The goal is to become familiar with the component-based mindset.

Key Content
Vite + React environment setup, JSX syntax, component structure, Props, State, event handling


Part 3. Publisher-Friendly Syntax

Learn focusing on rendering patterns frequently used by publishers in practice.
Naturally connect HTML/CSS experience to React.

Key Content
Conditional rendering, list rendering (map), key concepts, CSS application methods (CSS Module, etc.)


Part 4. Shopping Mall Mini Project

Apply React fundamentals to actual UI implementation.
Experience the professional workflow through a shopping mall structure.

Key Content
Header/GNB configuration, product card list, shopping cart button, category filtering, responsive UI
Deployment experience using Vercel


Part 5. Wrap-up

Summarize the learning content based on the completed project.
Then, suggest a direction for future frontend learning.

Key Content
Project review, code cleanup points, and frontend expansion roadmap guide

Final Result 🛒

  • Card list-centered shopping mall website

  • Responsive Design (PC / Mobile)

  • Implementation of shopping cart button and category filter functions

  • Fetching real data through API integration

  • Deployed portfolio project



  • Final deployment preview: https://ez-shop-three.vercel.app/

Prerequisites for the course 🛠

  • HTML / CSS / JavaScript Basics

  • Installing Node.js & VS Code

  • GitHub Account (for deployment)

Key Learning Content and Features📚

Practical Style Lecture Progress 📘

Instead of simply learning React syntax, you will implement the entire main page of a website just like a real-world project. While building the project, the course proceeds in an order that allows you to learn the know-how of structuring HTML based on a design, the styling expertise to write CSS that matches the design perfectly, and the logic for writing scripts according to specific functions.


Implement the project by referring to the design.

Creating and Implementing a React Project 📘

Create a project using React, and implement the project using HTML, CSS, and React (JavaScript).

VS Code Development

Implementing filtering and sorting📘

Based on what was learned in the React basics section, product information is retrieved and products are displayed through list rendering (map). From the displayed product list, filtering and sorting are implemented according to specific conditions.

filtering, sorting

Pagination implementation 📘

From the displayed product list, specific products are output based on conditions, and clicking a button displays the products for that corresponding page.

pagination

Implementing Responsive Design 📘

Adjust the number of products displayed to fit various devices using media queries.

responsive

Frequently Asked Questions

Q1. Can I take the course even if I don't know JavaScript well?

A. An understanding of basic syntax (if, for, functions, arrays, objects) is required.

However, advanced syntax or algorithm-level knowledge is not required, and I plan to focus on explaining the JavaScript concepts essential for learning React.

Please learn the basics in the lecture below.

https://inf.run/NC35Q

Q2. I'm a publisher; will learning React be helpful?

Yes, it will be very helpful.

This course is designed to help you understand React from the perspective of an HTML/CSS-focused publisher, making it an excellent starting point for expanding your career as a front-end developer.

Q3. I'm new to functional components and Hooks; is it okay to take this course?

It is no problem at all.

Class components will not be covered; instead, we will provide step-by-step explanations of functional components and essential Hooks such as useState and useEffect.

Q4. Do I need to have a design or plan prepared in advance?

Since designs are provided, there are no resources you need to prepare.

It is based on the examples and structures provided in the lecture, and it is designed to help you focus on UI implementation and understanding React syntax.

Q5. Can I use the project for my portfolio?

Yes, it can be utilized.

The shopping mall mini-project includes component separation, state management, and the deployment process, making it suitable for use as a portfolio example.

Q6. Does it cover the actual deployment process?

Yes, we do cover it.

We will guide you through the process of deploying a React project using Vercel, allowing you to experience the actual service deployment workflow.

Q7. What should I study after taking this course?

I recommend learning in the following order: Next.js, TypeScript, state management libraries (Zustand, Redux), and then API integration.

I will also provide a frontend learning roadmap in the final part of the lecture.

Recommended for
these people

Who is this course right for?

  • A publisher who has learned HTML/CSS/JS but finds React unfamiliar

  • Those who want to add a React-based project to their portfolio

  • Web designers/web publishers preparing to expand their careers into front-end development

Need to know before starting?

  • HTML / CSS / JavaScript Basics

  • Installing Node.js & VS Code

  • GitHub Account (for deployment)

Hello
This is ezweb

2,824

Learners

64

Reviews

4

Answers

4.9

Rating

14

Courses

■ [Current] ESTSOFT KDT Frontend Instructor
■ Green Computer Art Academy Web Publishing and Frontend Instructor
■ Operator of Web Publishing YouTube Channel 'Rock's Easyweb'
■ The Joeun Computer Academy Web Publishing Instructor
■ Hanbit Computer Academy Web Publishing Instructor
■ Frontend Publisher, Professional Frontend Publishing Instructor
■ UI/UX Web Design Portfolio Instructor


[ Books ]
Published on 2021.07.19 / The Complete Figma Guide for Web Design & Web Publishing / BJ Public

Published on 2022.08.25 / Coding for the First Time with Web Publishing / Youngjin Publishing

Published 2023.10 /2024 SD Edu Yu-seonbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

2024.11 Reprint /2025 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

2025.11 Reprint /2026 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

 

[ Awards ]
2022.08 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2021.06 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2018.06 Green Computer Academy Sinchon Branch - Outstanding Instructor 2017.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2016.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2015.10 Green Computer Academy Sinchon Branch - Outstanding Instructor

 

 

 

More

Curriculum

All

33 lectures ∙ (9hr 28min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • qjagkrfn5041님의 프로필 이미지
    qjagkrfn5041

    Reviews 10

    Average Rating 5.0

    5

    30% enrolled

    • lhy19731919님의 프로필 이미지
      lhy19731919

      Reviews 1

      Average Rating 5.0

      5

      30% enrolled

      ezweb's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!

      $59.40