Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Web Application with React JS and Redux

Ứng Dụng Web với React JS và Redux

Ứng Dụng Web với React JS và Redux

Học cách xây dựng ứng dụng web hiện đại với React JS và Redux. Thành thạo React Router, React Portals, Redux và công cụ create React app!

4.6
(172 đánh giá)
1,309 học viên
Giảng viên
Oak Academy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
21.5 giờ video
178 bài giảng
13 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

React JS
Đi sâu vào ReactJS
Trở thành Lập Trình Viên React
Xây dựng ứng dụng một trang (SPA) với React JS
Components, Props, States và Các Phương Thức Vòng Đời Component trong React JS
Tạo các Component React có thể tái sử dụng
Học JavaScript hiện đại, ES6
Học cách kết nối với API bên ngoài
Dữ Liệu Người Dùng Nhập, Form và Sự Kiện trong React
Định tuyến với React Router
Sử dụng React Portals để render Children Bên Ngoài Cấu Trúc DOM
Các thư viện React-Router, React-Portal và Redux được sử dụng với React JS
Tạo ứng dụng web nhiều trang với React-Router
Cách quản lý dữ liệu ứng dụng với thư viện Redux
Cách truy cập dễ dàng vào dữ liệu toàn cục từ các component
Học cách thao tác dữ liệu lưu trữ trong Redux store bằng cách tạo actions
Khóa học này lý tưởng cho những người đã có kiến thức cơ bản về HTML, CSS và JavaScript
Mỗi khía cạnh của việc tạo website và ứng dụng đều đòi hỏi một bộ kỹ năng riêng biệt.
Phát triển web là một mô tả rộng về các nhiệm vụ và công nghệ để tạo ra một trang web.
Các bước để trở thành một nhà phát triển web là gì? Một số nhà phát triển web sẽ có bằng cấp hoặc chứng chỉ trong lĩnh vực này.
Mất bao lâu để trở thành Nhà Phát Triển Web? Câu trả lời phụ thuộc vào chính bạn.
Bạn càng dành nhiều thời gian phát triển kỹ năng, bạn càng có thể trở thành nhà phát triển web nhanh hơn.
Tin tốt là phát triển web thường sử dụng mã nhẹ, dễ học hơn nhiều ngôn ngữ khác.
Tìm hiểu thêm về React - React là một framework JavaScript thiết yếu cho phát triển web. Đây là framework phổ biến nhất để phát triển web, di động và máy tính để bàn
React là gì? React là một thư viện front-end trong JavaScript được phát triển bởi Facebook.
React dùng để làm gì? React là một thư viện front-end JavaScript mã nguồn mở. Một số nhà phát triển coi nó là một front-end framework vì nó làm được nhiều hơn mức tiêu chuẩn
React hoạt động như thế nào? React khuyến khích các kỹ sư viết mã bằng cách tiếp cận Lập Trình Hàm.
Có đáng học React không? Có, rất đáng học React. Có một vài lý do.
Thứ nhất, React có nhu cầu cao trên thị trường việc làm phát triển phần mềm và đã duy trì điều này trong vài năm qua.
React có khó học không? Mọi công nghệ hay ngôn ngữ lập trình đều có đường cong học tập, và React cũng không ngoại lệ.
Sự khác biệt giữa React Native và ReactJS là gì, và nên học cái nào? React, hay React JS, là một thư viện Javascript front-end để xây dựng các thành phần UI
Tại sao React lại phổ biến? Có nhiều lý do khiến React phổ biến. Một lý do là vì Facebook phát triển nó.
Tìm hiểu thêm về Bootstrap - Bootstrap là một framework phát triển web front-end miễn phí để tạo các website có tính đáp ứng.

Yêu cầu

Không yêu cầu kiến thức trước!
Máy tính Windows PC, Mac hoặc Linux
Kiến thức cơ bản về JavaScript + HTML + CSS là bắt buộc nhưng bạn không cần phải là chuyên gia
Kiến thức ES6 sẽ có lợi nhưng không bắt buộc
Có mong muốn học React và Redux
Mong muốn học phát triển ứng dụng web với react js, redux
Mong muốn học phát triển ứng dụng web với react redux
Mong muốn học react js, redux
Mong muốn trở thành nhà phát triển web, lập trình viên react, lập trình viên front end web
Mong muốn học phát triển ứng dụng web frontend, phát triển website với react js và redux
Mong muốn học full stack react js với redux
Mong muốn học phát triển ứng dụng web với react js, redux
Không cần gì khác! Chỉ cần bạn, máy tính và quyết tâm bắt đầu ngay hôm nay

Đối tượng phù hợp

Người mới bắt đầu muốn trở thành lập trình viên React
Bất kỳ ai muốn trở thành Lập Trình Viên React
Bất kỳ ai muốn xây dựng các ứng dụng web một trang tuyệt vời với React
Các nhà phát triển muốn nâng tầm kỹ năng và học một công nghệ tương lai
Bất kỳ ai quan tâm đến việc học một công nghệ cực kỳ phổ biến được sử dụng bởi các công ty công nghệ hàng đầu như Facebook, Instagram và Netflix
Bất kỳ ai muốn học Redux, React-Router và React-Portals
Bất kỳ ai muốn học kiến trúc front-end phổ biến nhất hiện nay
Học viên muốn đưa kỹ năng Phát triển Web lên cấp độ tiếp theo
Những người muốn trở thành nhà phát triển ứng dụng web, ứng dụng react
Những người muốn học react js, react, react redux
Những người muốn học react js, redux, react redux
Những người muốn tạo ứng dụng web, ứng dụng react với react js và redux
Những người muốn học phát triển ứng dụng web, ứng dụng web react js
Những người muốn tạo ứng dụng web với react js, react redux
Một người hoàn toàn mới bắt đầu, có tư duy tò mò và muốn trở thành nhà phát triển web

Nội dung khóa học

21 phần • 178 bài giảng
1 Chúng Ta Sẽ Học Gì?
2 Tệp Dự Án React và Tài Liệu Khóa Học
3 Câu Hỏi Thường Gặp về Ứng Dụng Web với React, Redux
1 Tại Sao Cần Một Thư Viện Hoặc Framework
2 React là gì?
3 Tại sao chúng ta nên sử dụng React
1 React vs Vanilla JavaScript
2 Thiết lập môi trường phát triển.
3 Xem Tài Liệu Chính Thức Của React
4 Pure React
5 Thiết lập dự án với create-react-app
1 Render component gốc
2 Gỡ lỗi
3 Tạo và tái sử dụng một component
4 JSX là gì
5 Tạo thêm component
6 Logic JavaScript trong component
7 Tách biệt mối quan tâm
8 Tạo kiểu cho ứng dụng React
9 Props
10 Props & luồng dữ liệu một chiều
11 Render danh sách
12 Render có điều kiện 1
13 Render có điều kiện 2
14 Trích xuất JSX vào một component mới
15 Destructuring props
16 React fragments
17 Lớp động
1 Tổng quan phần
2 Hãy xây dựng một dự án mới
3 Xử lý sự kiện
4 State là gì?
5 Tạo một state với useState
6 Đặt state thủ công!
7 Thêm nút mở-đóng
8 Công cụ dành cho Nhà phát triển React
9 Cập nhật state dựa trên state hiện tại
1 Giới thiệu Ứng dụng
2 Tạo bố cục
3 Render một component danh sách
4 Render một component form
5 Các phần tử được kiểm soát
6 Hãy suy nghĩ về state
7 Nâng state lên
8 Xóa một mục
9 Cập nhật một mục
10 Tính toán số lượng gói
11 Sắp xếp các mục
1 Giới thiệu Ứng dụng
2 Thiết lập Dự án
3 Cấu trúc Components
4 Hãy bắt đầu sử dụng dữ liệu
5 Hãy bắt đầu Tạo cấu trúc thẻ
1 Component Dựa Trên Lớp
2 Ví dụ bộ đếm với component dựa trên lớp
3 Làm việc với trình xử lý sự kiện
4 Component dựa trên lớp vs component hàm
1 Hook useEffect
2 Ví dụ bộ đếm với hook useEffect
3 Mảng phụ thuộc
4 Hàm dọn dẹp
5 useState + useEffect + Truy xuất dữ liệu
6 Cấu trúc Dự án
7 Cấu trúc & tạo kiểu component
8 Sử dụng hàm async & axios
1 Tổng quan phần
2 Refs
3 Tại sao chúng ta sử dụng Hook useRef
4 Refs để chọn các phần tử DOM
5 Hook Tùy chỉnh là gì
6 Ví dụ bộ đếm với Hook tùy chỉnh
1 Tổng quan phần
2 React-Router là gì
3 Tạo một ứng dụng thông thường
4 Thêm React-Router vào dự án
5 Link & NavLink
6 Render phía máy chủ & Render phía máy khách
7 Tạo components & Bố cục ứng dụng
8 Bố cục và Tạo kiểu cho Component & Trang
9 Bố cục và Tạo kiểu cho Components & Trang 2
10 Trang Nhân sự
11 Định tuyến động
12 useParams & useLocation
13 Trang Chi Tiết Nhân sự
14 useNavigate vs Link
15 Trang notFound & Navigate
16 Xử lý lỗi
17 Trạng thái tải
18 Các tuyến đường lồng nhau
19 Đường dẫn tuyệt đối & Đường dẫn tương đối
20 Bộ định tuyến riêng tư
1 Giới thiệu Dự án & Nguồn API
2 Cấu trúc tệp
3 Tạo các Route
4 Hãy bắt đầu tạo các trang
5 Thanh điều hướng
6 Trang Chủ
7 Đầu trang
8 Thẻ
9 Trang Chi Tiết
10 Đăng nhập & Đăng xuất
1 Tổng quan phần
2 Tại Sao Cần Các Thư Viện Quản Lý State
3 Context API
4 Các Giai Đoạn Sử Dụng Context API
5 Hãy Bắt Đầu Sử Dụng Context API
6 Context Provider
7 Quản lý Dữ liệu
8 Tạo Nhiều Context
9 LocaleStorage
10 Sử dụng Hook Tùy chỉnh
1 Tổng quan phần
2 useReducer là gì
3 Thiết lập Dự án
4 useReducer
5 Hãy Bắt Đầu Sử Dụng Hàm Reducer
6 Reducer Bộ đếm
1 Tổng quan phần
2 Giới thiệu Dự án và Nguồn API
3 Thiết lập Dự án và Cấu trúc Tệp
4 Tạo Cấu trúc Route
5 Đầu trang và Thanh điều hướng
6 Trang Tìm kiếm
7 Thẻ Tin tức
8 Trang Chủ
9 Bối cảnh và Chủ đề
10 Thanh Trượt
11 Trang Danh mục
12 Lọc theo Quốc gia
13 Trích xuất Dữ liệu với Custom Hook
1 Tổng quan Phần học
2 Redux
3 Thư mục Redux
4 Component Counter và createStore
5 useDispatch và useSelector
6 Cách Sử dụng Thư mục với Redux
7 combineReducer
8 Component Todo
9 Reducer Todo
10 Hành động Clear
1 Tổng quan Phần học
2 Redux Toolkit
3 Bắt đầu sử dụng Redux Toolkit
4 Sử dụng Actions trong Redux Toolkit
5 Ví dụ Todo
6 Todo Slice
7 addTodo & deleteTodo
8 Redux Thunk là gì
9 Bắt đầu sử dụng Thunk trong Redux Toolkit
10 Component Post
1 Giới thiệu Dự án
2 Tạo Cấu trúc Tệp
3 Cấu trúc Route và Navbar
4 Trang Đăng nhập
5 authSlice
6 newsSlice
7 Trang Tin tức và Cấu trúc Thẻ
8 Những gì chúng ta đã làm trong Ứng dụng này
1 Tổng quan Phần học
2 Thiết lập cấu trúc tệp
3 React Router v6.4+
4 Xây dựng Bố cục Ứng dụng & Nested Routes
5 Tải dữ liệu với loaders
6 useNavigation
7 Xử lý Lỗi
8 Đường dẫn Động
1 Tổng quan Phần học
2 Giới thiệu Dự án và Tài nguyên API
3 Tạo Dự án với Vite
4 Tạo Cấu trúc Thư mục
5 Tạo Cấu trúc Route
6 Navbar
7 Trang Đăng nhập
8 Quản lý Trạng thái Người dùng với Redux Toolkit
9 Quản lý Dữ liệu Phim với Redux Toolkit
10 Trang Phim
11 Sử dụng Loader trong Trang MovieDetail
1 Ứng dụng Web với React JS và Redux

Giới thiệu khóa học

Hello there,

Welcome to Web Application with React JS and Redux course
Learn modern web application with ReactJS and Redux Master React Router, React Portals, Redux and create React app!
React
is one of the best choices for building modern web applications If you are new to React or maybe you've been struggling to learn and truly understand what’s going on then this course is the best way for you to learn ReactJS

In this course, we will take you through everything you need to know to master web development using React JS and Redux by providing powerful knowledge through a mixture of diagrams and the creation of a simple application

Each aspect of creating websites and applications entails a unique set of skills Udemy offers a host of courses to bring you up to speed on modern front-end, back-end, and fullstack web development practices and skills

The world of web development is as wide as the internet itself Much of our social and vocational lives play out on the internet, which prompts new industries aimed at creating, managing, and debugging the websites and applications that we increasingly rely on

Whether you’re interested in adding React to your existing dev skillset, or you want to develop full-stack web apps by using tools like NodeJS, Redux, and MongoDB in conjunction with React, Udemy has a comprehensive selection of courses to choose from

React is an essential Javascript framework for web development It is the most popular framework for developing web, mobile, and desktop app user interfaces

No Previous Knowledge is needed!

You don’t need to have previous knowledge about React and Redux This course will take you from a beginner to a more advanced level with hands-on examples

You will be confident in using both React JS, Redux and if you ever get stuck, we will be there to help

Learn by doing!

So we have made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilize ReactJS In this course, we will be teaching React and Redux by creating various projects ate React app

We have explained React and Redux from beginner to all levels We have explained all the topics as simple as possible with examples, slides and diagrams

We have created a lot of projects while explaining the subjects Because we believe that applied educations are much more useful than other teaching methods

We explained all the subjects with simple examples and applications, and explanatory diagrams in a way that the student can understand at all levels

Here is the list of what you’ll learn by the end of the course,

  • How to create a Single Page Web Application with React JS

  • The most important React topics like components, props, state and component life cycle methods

  • How to send a request to an api and fetch data

  • How to create a multi-page web app with react-router

  • How to manage the data of our application with the redux library

  • How to perform asynchronous operations with Redux-thunk

  • How to easily build the largest and most advanced applications using React and Redux

  • Web application development

  • Web Application

  • React js, react, reactjs, react application

  • React redux

  • React

  • React native, react js, reactjs, redux, react redux, redux react, reactjs redux, react redux typescript

  • modern react with redux

  • react web applicaiton

  • Web application security

  • React, react native,

  • react js, reactjs, redux, react redux, redux saga,

  • redux react, angular react, reactjs redux, react redux typescript

  • web app development

  • front end web development

  • website development

  • web application with react, redux

    What is web development?
    Web development is a broad description of the tasks and technologies that go into creating a website It can be as simple as making a static text-based website or as elaborate as developing an interactive dynamic website You can break web development into two different categories: frontend (client-side) and backend (server-side) Frontend code executes on the user's computer This can include HTML, JavaScript, and CSS Backend code runs on the server — this commonly includes communicating with a database and often involves languages like Python, Ruby, Java, or PHP Web development does not necessarily include the design process — it focuses on code A web designer builds wireframes to mockup their vision for a website and then shares that with a developer The developer is responsible for writing the code that implements the design
    What are the steps to becoming a web developer?
    Some web developers will obtain a degree or certification in the field However, most jobs don't require a specific degree or level of education, just demonstrated knowledge of the field So, it is more important that you know how to show off your skills You could highlight your skills through relevant work experience or a portfolio of past projects You might also share code you have developed using a platform like GitHub, or participate in solution-based forums like StackOverflow that reward you for helping others HTML, CSS, and JavaScript are the first three coding languages you'll need to learn to break into web development You need these three essential elements to create a modern website and work as a frontend web developer HTML (Hyper-Text Markup Language) specifies the content of the website and builds the backbone CSS (Cascading Style Sheets) styles the content JavaScript controls the interactive elements of the website
    How long does it take to become a Web Developer?
    The answer to this question will depend on you The more time you spend developing your skills, the faster you can become a web developer The good news is that web development generally uses light-weight code that is easier to learn than many other languages If dedicated, you can learn the basics of web development in a couple of months But good web developers never stop learning A better question might be, "What can I do to become a better web developer faster?" The answer to this question is practice Becoming familiar with coding helps tremendously, but there is also a less obvious benefit of practicing The more you code, the more you will run into problems or find bugs in your code A significant aspect of web development is solving problems and debugging code The better you get at solving problems and tracking down bugs, the faster you will get at coding
    What is React?
    React is a front-end library in Javascript that was developed by Facebook The simplest definition of React is that it is a user interface library used for building UI components for the web But if that was all React did, it would be little more than a template library Developers define components in React by using an HTML-like syntax called JSX These encapsulated components manage their own state, making it simple to pass rich data to a component and keep the state of the application and its components out of the Document Object Model (DOM) These features give React components the ability to react dynamically and efficiently to changes in their state A set of simple components in React can be composed into either simple single-page applications or large, complex web applications
    What is React used for?
    React is an open-source JavaScript frontend library Some developers consider it a frontend framework because it does more than standard libraries usually do The most common use of React is to build dynamic user interfaces for single-page web applications But the structure of React makes it useful for more than just creating websites JSX, which is one feature of React, is a syntax extension for Javascript that provides a template for the HTML and manages the state of the element But JSX can be used as an interface for things other than HTML React Native uses React to build mobile applications Here, JSX becomes an interface for mobile UIs instead of HTML There are even a few libraries that use React and JSX to interact with and manage hardware like React Hardware
    How does React work?
    React encourages engineers to write code using a Functional Programming approach Engineers create components, which are normal Javascript functions These functions return information to tell React what content should be displayed on the screen The real power of React comes from the ability to nest or compose these functions inside of one another This nesting ability encourages code reuse and allows an engineer to write a component a single time, but in many different places
    Is React a framework or library?
    Frameworks provide an opinionated approach to building an entire application Libraries, on the other hand, assist in building a single aspect of an application With this in mind, React is a library It assists engineers in presenting HTML in the browser React has no opinions on how data is fetched, how styling is applied, or how the app is deployed or built
    Is React worth learning?
    Yes, React is worth learning There are a couple of reasons The first one is that React is in high demand in the software development job market and has been for a few years If you learn to code in React and can do it well, you will increase your chances of finding a job This alone is another reason it is worth learning Website users no longer will settle for old-fashioned sites that won't update without a page reload React’s method of dynamically updating the HTML of a web page fits these users' needs and improves their experience React has also been around a few years and has stood the test of time A large portion of websites, both small and large, use React as a frontend framework
    Is React hard to learn?
    Every technology or programming language has a learning curve, and React is no different But it is easy to learn if you are dedicated and determined to create frontend web applications To make learning React simpler, you should stick to the basics of React before you add any extra libraries, as that will only complicate your learning experience in the beginning Since React is a Javascript framework, a solid grounding in Javascript will give you a head start With this knowledge, the unique concept of JSX, React's templating language, and the way React uses state will be much easier to grasp
    What is the difference between React Native and ReactJS, and which one should I learn?
    React, or React JS, is a front-end Javascript library for building UI components for the web If you are interested in web development, React is the perfect library to learn to create interactive, dynamic single-page apps, or even full-scale web applications React Native is a framework for building native mobile applications for both the Android phone and Apple's iPhone React Native is still React, which means the syntax and workflow for building applications are basically the same, but the generated components are different In React, web components are generated In React Native, the generated components interact with a phone's native APIs If your focus is web development, then you should learn React If you want to build mobile applications, it is best to learn React first and become familiar with the technology before you try React Native
    Why is React so popular?
    There are many reasons why React is popular One reason is that Facebook developed it The social proof is that if it is good enough for Facebook, one of the most popular social networks on the web, it should be good enough for other applications React also solved many of the past issues that developers had with developing single-page applications (SPAs) React came out when SPAs were becoming popular, and all the existing frameworks to build them made development complicated and prone to bugs One feature that makes it better than past libraries is that React is relatively easy to use Its components are reusable, plus React's use of the virtual DOM makes it very performant React should remain popular in the future as each new release brings new features and performance improvements

Why would you want to take this course?

Our answer is simple: The quality of teaching

OAK Academy based in London is an online education company OAK Academy gives education in the field of IT, Software, Design, development in English, Portuguese, Spanish, Turkish, and a lot of different languages on the Udemy platform where it has over 1000 hours of video education lessons OAK Academy both increases its education series number by publishing new courses, and it makes students aware of all the innovations of already published courses by upgrading

When you enroll, you will feel the OAK Academy`s seasoned developers' expertise Questions sent by students to our instructors are answered by our instructors within 48 hours at the latest

Fresh Content

It’s no secret how technology is advancing at a rapid rate New tools are released every day, and it’s crucial to stay on top of the latest knowledge for being a better React developer You will always have up-to-date content for this course at no extra charge

Video and Audio Production Quality

All our content is created/produced as high-quality video/audio to provide you the best learning experience

You will be,

  • Seeing clearly

  • Hearing clearly

  • Moving through the course without distractions

You'll also get:

  • Lifetime Access to The Course

  • Fast & Friendly Support in the Q&A section

  • Udemy Certificate of Completion Ready for Download

Dive in now!

Web Application with React JS and Redux

We offer full support, answering any questions

See you in the class!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Redux
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊