Chuyển tới nội dung
Home » React Js For Frontend | Htmlreact Impact On User Experience

React Js For Frontend | Htmlreact Impact On User Experience

React Tutorial for Beginners

Mục tiêu môn học

Sau khi học xong môn này, học viên sẽ đạt được các chuẩn kiến thức, kỹ năng đầu ra như sau:

Trình bày được ReactJS là gì, ứng dụng trong việc phát triển Web App như thế nào.

Trình bày được bức tranh tổng quát về lập trình viên Full Stack.

Trình bày được cách setup git repository offline, online. Tạo được project sample của reactjs bằng command line tool và commit lên git.

Trình bày được hiểu biết về Javascript frameworks và libraries, architecture của ứng dụng React.

Tạo được React component, sử dụng component đó ở view JSX và view JavaScript.

Phân biệt và tạo được 3 loại components: presentational, container, functional.

Cài đặt được router để có thể điều hướng giữa các component.

Sử dụng được React router để thiết kế SPA.

Trình bày được cách sử dụng wireframe diagram để tạo prototype.

Tạo và sử dụng được controlled form trong ứng dụng React.

Tạo và kiểm soát được form submission đối với uncontrolled form.

Cài đặt và cấu hình được Redux.

Cấu hình để tạo Controlled form bằng cách sử dụng react-redux-form, lưu trạng thái (state) của form trong Redux store.

Định nghĩa được Redux action (tạo hàm sử dụng ActionCreator rồi return action object).

Thực hành được chia reducer thành nhiều hàm nhỏ hơn và kết hợp lại khi sử dụng ở root.

Biết cách sử dụng Redux Thunk middleware và logger moddleware.

Biết cách lấy dữ liệu dạng json từ server (từ brower, từ third party app).

Cài đặt và sử dụng được Fetch để giao tiếp giữa ứng dụng React với REST API server.

Biết cách tạo hiệu ứng chuyển động bằng cách sử dụng react-transition-group.

Trình bày được cách đóng gói các ứng dụng thành các gói, cách sử dụng react-script để build thư mục phân phối trong Webpack.

Write components with code and markup

React components are JavaScript functions. Want to show some content conditionally? Use an

if

statement. Displaying a list? Try array

map()

. Learning React is learning programming.

This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.

React Tutorial for Beginners
React Tutorial for Beginners

Add interactivity wherever you need it

React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.

You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.

What is React Js?

React Js is an open-source JavaScript framework with which developers create interactive designs effortlessly. React Js is an open-source technology that combines JavaScript and HyperText Markup Language (HTML) to display small pieces of the large UI. It is used in web development to build interactive elements on website User Interfaces (UI) based on UI components. It was developed and maintained by Facebook with an open-source community called JS ‘library’.

Checkout: 42% of the developers use React JS.

React Responsive Gym Website Tutorial Using ReactJs | React js Projects for Beginners | Deploy
React Responsive Gym Website Tutorial Using ReactJs | React js Projects for Beginners | Deploy

Kết luận

Sau một quá trình ngắn tìm hiểu và làm thử React, tôi thấy nó khá phù hợp với một lập trình viên thích làm FrontEnd như tôi. Cấu trúc và cách viết React khá sáng sủa, tuy nhiên lại đòi hỏi người viết có một tư duy lập trình ở một mức nhất định.

Những bài toán nhỏ, những hệ thống chỉ có một chút UI cần dùng đến Javascipt tôi nghĩ không nên dùng React. React thích hợp hơn với những hệ thống vừa và lớn, yêu cầu khả năng duy trì và mở rộng cao. Việc phân tích cấu trúc, kết nối các thành phần stateless cũng khá đau đầu và mất thời gian, tuy nhiên nếu làm được chúng ta sẽ có một hệ thống được cấu trúc tốt, đẹp và dễ dàng duy trì và mở rộng.

TL,DR? Cảm ơn các bạn đã đọc bài viết của tôi. Chúc các bạn thành công với React!

All rights reserved

ReactJS and NodeJS are both JavaScript technologies. But the uses of NodeJS and ReactJS are entirely different. NodeJS is a framework of JavaScript which is mainly used for working with the backend of our application or building the backend using JavaScript, whereas ReactJS is a JavaScript front-end library. It is mainly used for building the user interface or the frontend of our application. Though both are used for different purposes, both these technologies make our application faster and easy to handle.

The developers should know about the technology well before using it in their projects. So, let us learn about these technologies first to decide when we can and should use these and when we shouldn’t.

Create user interfaces from components

React lets you build user interfaces out of individual pieces called components. Create your own React components like

Thumbnail

,

LikeButton

, and

Video

. Then combine them into entire screens, pages, and apps.

Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.

[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒
[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒

Is it Possible to Spot the Difference Between HTML and React?

It’s difficult to spot the difference between a React vs. an HTML website or web application. No matter what framework (Angular, Vue, etc.) you use, the browser must render HTML, CSS, and Javascript.

Even websites like BuiltWith cannot be certain about a digital product’s tech stack without the developers explicitly sharing this information or publicizing the project’s repository (i.e., a public GitHub repo).

Why Developers Choose HTMLReact

Why do developers choose HTML?

Even though HTML may seem more straightforward and less powerful than React, it still has a crucial role in web development. Here’s why:

  • Fundamental and universal: HTML is the foundational language of the web. Every browser can interpret HTML, making it universally recognized and supported.
  • Perfect for static content: HTML is a straightforward and efficient choice when building a website with mostly static content.
  • Easy to learn: HTML is one of the easiest languages for beginners. It’s an excellent starting point for anyone interested in web development.
  • SEO friendly: Search engines can easily crawl and understand HTML, making it favorable for SEO.

For example, HTML is perfect for a business that wants a simple website to showcase its products and services. It’s also an excellent option for beginners learning about web development.

Why do developers choose React?

React offers several features that make it a preferred choice for many developers:

  • Component-based architecture: React’s component-based approach promotes reusability and consistency across the application, making development more efficient.
  • Efficient updates: React uses a Virtual DOM to only update parts of the page that need to change, making it highly performant, especially for complex applications.
  • Advanced JavaScript: React utilizes advanced JavaScript features and concepts, giving React developers more power and flexibility.
  • Strong community and ecosystem: React has a large and active community, which means plenty of resources for learning and troubleshooting, as well as a rich ecosystem of libraries and tools.

For example, Facebook, Instagram, and WhatsApp use React for their complex, highly interactive UIs. Startups and tech companies also favor React for its efficiency, scalability, and productivity. Organizations also use React to build design systems due to the component-based nature of the front-end library.

HTML or React: which one should you choose?

Choosing between HTML and React depends on your project’s needs:

  • For static websites: HTML is often the preferred choice for building a simple, mostly static website.
  • For dynamic, complex applications: React is a far better option to HTML for building complex, highly interactive web applications.
How To Create Full Stack E-Commerce Website Using React JS, MongoDB, Express & Node JS 2024
How To Create Full Stack E-Commerce Website Using React JS, MongoDB, Express & Node JS 2024

Ưu điểm của ReactJS

Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance website thì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn “chốt sale” với ReactJS và bắt đầu tìm hiểu nó từ bây giờ:

  • Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp.
  • Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể thoả các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.
  • Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dung lại các Business Logic trong ứng dụng.
  • Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google. Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!
  • Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc quá trình release sản phẩm cung như quá trình coding của bạn.
  • Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào.

Go full-stack with a framework

React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.

React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.

Frontend developer | front end developer mock interview | Interviewing my Subscriber
Frontend developer | front end developer mock interview | Interviewing my Subscriber

Join a community of millions

You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.

This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.

ReactJS Developer Roadmap

Dưới đây là hình ảnh của React Developer RoadMap được thiết kế bởi adam-golab, trong đó phác thảo những điều bắt buộc, những điều cần biết và một số nội dung bổ sung mà bạn có thể học để trở thành một React Developer.

Vì vậy, nếu bạn đang tự hỏi, bạn nên học gì tiếp theo để trở thành một React Developer thì roadmap dưới đây có thể giúp bạn.

Bây giờ, chúng ta hãy xem qua RoadMap từng bước một và tìm hiểu cách bạn có thể học các kỹ năng cần thiết để trở thành React Developer nhé:

4.1 Basic

Bất kể bạn học framework hay thư viện nào để phát triển web, bạn phải biết những điều cơ bản. Và những điều cơ bản này chính là HTML, CSS và JavaScript, ba thứ này là ba trụ cột của phát triển web.

HTML

Đây là một trong những trụ cột đầu tiên và là kỹ năng quan trọng nhất đối với các nhà phát triển web vì nó tạo nên cấu trúc cho một trang web.

CSS

Đây là trụ cột thứ hai của phát triển web và được sử dụng để tạo kiểu cho các trang web sao cho chúng nhìn trông đẹp mắt hơn.

JavaScript

Đây là trụ cột thứ ba của việc phát triển web và được sử dụng để làm cho các trang web của bạn trở nên có tính tương tác. Đó cũng là mục đích của thư viện React. Do đó bạn nên biết JavaScript và biết rõ về nó trước khi cố gắng học React JS.

4.2 Những kỹ năng Development chung

Không quan trọng bạn là frontend developer hay backend developer hay thậm chí là full-stack software engineer. Bạn phải biết một số kỹ năng phát triển chung để tồn tại trong thế giới lập trình và đây là danh sách một số kỹ năng đó

Sử dụng GIT

Hãy thử tạo một vài repositories trên GitHub, chia sẻ code của bạn với người khác và tìm hiểu cách tải code xuống từ Github trên IDE yêu thích của bạn.

Hiểu về giao thức HTTP(S)

Nếu bạn muốn trở thành một web developer, thì bạn nhất thiết phải biết HTTP và biết rõ về nó. Không nhất thiết phải đọc tất cả thông số kỹ thuật, nhưng ít nhất bạn nên quen thuộc với các phương thức yêu cầu HTTP tiêu chuẩn như GET, POST, PUT, PATCH, DELETE, OPTIONS và cách thức hoạt động của HTTP / HTTPS nói chung.

Hiểu về terminal

Mặc dù một frontend developer không cần phải học Linux hoặc terminal nhưng việc làm quen với terminal cũng không mất gì phải không.

Thuật toán và cấu trúc dữ liệu

Đây lại là một trong những kiến thức lập trình nền tảng không nhất thiết phải có để trở thành một React developer nhưng bắt buộc phải có nếu bạn muốn đi xa hơn với nghề lập trình.

Tìm hiểu về Design Patterns và Software Architecture

Cũng giống như Thuật toán và Cấu trúc dữ liệu, bạn không bắt buộc phải học design patterns để trở thành React Developer. Nhưng bạn sẽ làm việc tốt hơn rất nhiều nếu bạn học nó. Design patterns là các giải pháp đã được thử và kiểm tra cho các vấn đề hàng ngày xảy ra trong quá trình phát triển phần mềm.

4.3 Học React cơ bản

Đây là phần kiến thức chính. Bạn phải học React và học nó thật tốt để trở thành một nhà phát triển React. Nơi tốt nhất để học React là trang web chính thức, nhưng đối với người mới bắt đầu thì có thể hơi quá sức đối với bạn. Bạn có thể tham khảo khóa học ReactJS căn bản trên kênh youtube của 200Lab.

Hoặc bạn có thể tham khảo thêm series này nhé!

4.4 Tìm hiểu về Build Tools

Nếu bạn muốn trở thành một nhà phát triển React chuyên nghiệp, thì bạn nên dành một chút thời gian để làm quen với các tools mà bạn sẽ được sử dụng như built tools, unit testing tools, debugging tools v.v.

Đây là một số build tool được đề cập trong lộ trình này:

Package Managers

  • npm
  • yarn
  • pnpm
  • Task Runners
  • npm scripts
  • gulp
  • Webpack
  • Rollup
  • Parcel

Không cần thiết phải học tất cả các công cụ này, chỉ cần học npm và webpack là đủ cho người mới bắt đầu. Khi bạn hiểu rõ hơn về phát triển web và Hệ sinh thái của React, bạn có thể khám phá các công cụ khác.

4.5 STYLING

Nếu bạn đang muốn trở thành một front-end developer, thì việc biết một chút về Styling sẽ không thiệt thòi gì. Mặc dù RoadMap đề cập đến rất nhiều thứ như CSS Preprocessors, CSS Frameworks, CSS Architecture và CSS trong JS nhưng bạn cần học Bootstrap trước. Framework CSS quan trọng nhất mà bạn sẽ sử dụng mọi lúc, mọi nơi.

4.6 STATE MANAGEMENT

Đây là một lĩnh vực quan trọng khác mà một React Developer cần tập trung vào. Roadmap đề cập đến các khái niệm và frameworks mà bạn cần để nắm vững:

  • Component State/Context API
  • Redux
  • Async actions (Side Effects)
  • Redux Thunk
  • Redux Better Promise
  • Redux Saga
  • Redux Observable
  • Helpers
  • Rematch
  • Reselect
  • Data persistence
  • Redux Persist
  • Redux Phoenix
  • Redux Form
  • MobX
  • React Hooks

Nếu danh sách trên khiến bạn ngợp thì bạn chỉ cần tập trung vào Redux trước nhé

4.7 TYPE CHECKERS

Vì JavaScript không phải là một ngôn ngữ strongly typed, nên bạn không có đủ điều kiện để có một trình biên dịch bắt những bug liên quan đến type.

Khi ứng dụng của bạn phát triển, bạn có thể gặp rất nhiều lỗi khi kiểm tra loại. Bạn có thể sử dụng các tiện ích mở rộng JavaScript như Flow hoặc TypeScript để kiểm tra toàn bộ ứng dụng của mình.

200lab có một khóa học ReactJS nâng cao trong đó có topic về TypeScript bạn có thể xem qua nhé!

4.8 FORM HELPERS

Ngoài Type Checkers, bạn cũng nên học các Form Helps như Redux Form, cung cấp cách tốt nhất để quản lý trạng thái biểu mẫu của bạn trong Redux. Ngoài Redux Form, bạn cũng có thể xem Formik, Formsy và Final form.

4.9 ROUTING

Các Components là trung tâm của React và Routing components là một phần thiết yếu của bất kỳ ứng dụng nào.

Ngoài React-Router, bạn cũng có thể xem qua Router 5, Redux-First Router và React Router.

4.10 API CLIENTS

Trong thế giới ngày nay, bạn sẽ hiếm khi xây dựng một GUI riêng biệt. Thay vào đó bạn sẽ tạo ra thứ gì đó giao tiếp với ứng dụng khác bằng cách sử dụng các API như REST và GraphQL. Rất may, có rất nhiều ứng dụng API clients có sẵn cho các nhà phát triển React:

REST

  • Fetch
  • SuperAgent
  • Axios

GraphQL

  • Apollo
  • Relay
  • urql

Apollo Client là ứng dụng xuất sắc. Nó cung cấp một cách thức dễ dàng cho chúng ta sử dụng GraphQL xây dựng các ứng dụng client.

Khóa học ReactJS của 200Lab cũng chia sẻ rất sâu về GraphQL và Apollo.

4.11 Utility Libraries

Đây là những thư viện giúp công việc của bạn trở nên dễ dàng hơn. Có rất nhiều thư viện tiện ích có sẵn cho các nhà phát triển React, như danh sách dưới đây:

  • Lodash
  • Moment
  • classnames
  • Numeral
  • RxJS
  • Ramda

4.12 Testing

Đây là một trong những kỹ năng quan trọng đối với các React Developer mà thường bị bỏ qua. Thế nên nếu bạn muốn trở nên đắt giá thì bạn nên tập trung vào việc học các thư viện sẽ giúp bạn trong quá trình thử nghiệm.

Dưới đây là danh sách các thư viện được đề cập trong roadmap:

Unit Testing

  • Jest
  • Enzyme
  • Sinon
  • Mocha
  • Chai
  • AVA
  • Tape

End to End Testing

  • Selenium, Webdriver
  • Cypress
  • Puppeteer
  • Cucumber.js
  • Nightwatch.js

Integration Testing

  • Karma

Testing cũng là một chủ đề khá hay trong khóa học ReactJS nâng cao của 200Lab.

4.13 Internationalization

Đây là một chủ đề quan trọng khác để phát triển giao diện người dùng được sử dụng trên toàn thế giới. Bạn có thể cần hỗ trợ phiên bản GUI cục bộ cho Nhật Bản, Trung Quốc, Tây Ban Nha và các quốc gia Châu Âu khác.

RoadMap gợi ý bạn nên tìm hiểu công nghệ sau:

  • React Intl
  • React i18next

Cả hai thư viện này đều cung cấp các thành phần React và một API để định dạng ngày tháng, số và chuỗi, bao gồm các bản dịch đa dạng hóa và xử lý.

4.14 Server-Side Rendering

Trong RoadMap đề xuất Server-Side Rendering như sau:

  • Next.js
  • After.js
  • Rogue

Tận 3 cái nhưng bạn chỉ cận học Next.js thôi là đủ.

4.15 Static Site Generator

Gatsby.js là một static site generator hiện đại. Bạn có thể sử dụng Gatsby để tạo trang web cá nhân hóa và có chức năng đăng nhập. Chúng kết hợp dữ liệu của bạn với JavaScript và tạo nội dung HTML được định dạng chuẩn.

4.16 Backend Framework Integration

React on Rails tích hợp Rails với framework front-end React của Facebook. Nó cung cấp Server rendering, thường được sử dụng để lập chỉ mục trình thu thập thông tin SEO và hiệu suất UX, và không được cung cấp bởi rails / webpacker.

4.17 Mobile

Đây là một lĩnh vực khác mà việc học React có thể thực sự mang lại lợi ích vì React Native đang nhanh chóng trở thành tiêu chuẩn để phát triển ứng dụng di động bằng JavaScript với giao diện native.

RoadMap gợi ý bạn nên tìm hiểu các thư viện sau:

  • React Native
  • Cordova / PhoneGap

Nhưng bạn chỉ cần học thêm React Native là đủ tốt rồi.

4.18 Desktop

Cũng tồn tại một số framework dựa trên React để xây dựng GUI trên desktop như React Native Windows, cho phép bạn tạo các ứng dụng UWP và WPF native với React.

Framework gợi ý các thư viện sau:

  • Proton Native
  • Electron
  • React Native Windows

Tuy nhiên, tất cả chúng đều dành cho việc tìm hiểu nâng cao. Nếu bạn đã thành thạo React, bạn có thể xem qua chúng.

4.19 Virtual Reality

Nếu bạn quan tâm đến việc xây dựng các ứng dụng dựa trên Thực tế ảo, thì bạn cũng có một số framework như React 360, cho phép bạn có những trải nghiệm 360 và VR thú vị bằng cách sử dụng React.

Đó là tất cả những gì về React RoadMap.

Bạn đã nhìn thấy được bức tranh toàn diện. Có thể bạn sẽ cảm thấy phấn khích hoặc hơi choáng ngợp trước những kiến thức mình cần phải học. Tuy nhiên hãy cứ bắt đầu từ từ từng bước một. Khi đã có nền tảng vững chắc thì những kiến thức sau này bạn sẽ càng học nhanh hơn thôi.

Qua bài viết này, mình hy vọng sẽ đem đến cho bạn một cái nhìn tổng quan hơn về ReactJS, cũng như những lợi ích thực sự mà ReactJS mang lại cho chúng ta.

Các bài viết bạn sẽ thích:

ReactJS Tutorial for Beginners Phần 3

ReactJS Tutorial for Beginners Phần 2

ReactJS vs React Native – Gà cùng một mẹ liệu có giống nhau?

ReactJS: Tìm hiểu thông qua ví dụ

Lên trình senior ReactJS với những kỹ năng sau

TỪ QUỐC HƯNG

Đam mêm lập trình Frontend, Yêu thích việc setup workspace theo phong cách tối giản

follow me :

Wondering whether to choose React for your project? Below you’ll find a concise analysis of the top 6 reasons why development teams choose React. Just enough to make an initial decision.

A QUICK SUMMARY – FOR THE BUSY ONES

TABLE OF CONTENTS

There are many frameworks and libraries available for frontend development. Not all of them are good. React is one of the most popular and widely used libraries (it’s not a framework) for frontend development.

To give you a gentle introduction, React is an open-source JavaScript library used for frontend development, which was developed by Facebook. Its component-based library lets you build high-quality user-interfaces for web apps.

This library allows you to place HTML code inside JavaScript and it works with Virtual DOM.

The official site of React can be found at Reactjs.org. And you can find it on GitHub here.

If you have heard of React but are not sure why you should select it for your work, this post can help. What are the benefits of using React? This post will give you 6 reasons to choose React for frontend development.

React is easy to learn and that is one of the most important reasons to choose this library. As it doesn’t take much time to learn this technology, you can quickly become a React developer.

If a technology is hard to learn, you will probably find it difficult to start. That, as it happens, it’s human nature. We avoid things that are hard to learn.

React is easy to learn not just because there are a great number of easy-to-understand tutorials available on the internet but mainly because it’s a very simple library. Unlike Angular, it’s not a complex tool. The learning process becomes easier when you have great JavaScript skills.

React lets you build rich user-interfaces easily. Quality of user-interfaces is important because a poorly designed user-interface is generally less user-friendly and the users will not like a poorly designed UI.

If your web app has cool, high-quality UIs, your users will love to use your app. So building high-quality user-interfaces is crucial to business success.

Yes, you can build cool interfaces with other technologies too, but React lets you do it easily using the declarative components.

You can increase your productivity by using the reusable components and development tools. Developer’s productivity is important because if you can get things done quickly, you can earn more money in less time, which is a common goal of companies and startups.

If it takes a huge amount of time to build a simple thing, you’ll lose money. On the contrary, if you can deliver products quickly, you can earn cash quickly and your clients will also be happy.

There are many development tools available for React which speed up your work. For example, there’s a browser extension called React Developer Tools, which can make your coding work a lot easier.

You can add it to your browser and can use it to examine React components hierarchy. This extension can be installed on Chrome and Mozilla Firefox.

React is used by great companies and startups such as Facebook, Dropbox, Khan Academy, CodeAcademy, Netflix, Airbnb, PayPal, Walmart, Tesla Motors, IMDb, and so on. There are many, many popular apps that use React.

Why are so many great companies and startups using this technology? The answer is that it’s undoubtedly a very high-quality tool for frontend development.

Considering that super successful companies like Facebook and PayPal use React, that must mean that it’s a truly useful library.

React is hot and trending. It’s one of the most popular frontend technologies in the market.

The following chart demonstrates increasing global interest.

When a technology is adopted by more and more people every day, it’s clear that it’s for a reason – it’s good quality.

The number of React lovers is increasing day by day. Every day new people fall in love with this technology. So why not try it?

One of the biggest reasons why you should choose React for frontend development is that it has a very strong community support. A large community of React developers is making it better as it’s an open-source library and coders from around the world are helping people learn the technology in different ways.

Some people upload free React tutorial videos on YouTube while others write useful tutorials, in-depth articles, and blog posts. As of writing this article, this library has 1,198 contributors and 106,128 stars on GitHub.

The following screenshot shows that Google gives 82,500,000 results for the search term ‘react tutorial’.

The tutorials, articles, and blog posts written about React will definitely help you and make you a better React coder. Besides, there are a huge number of people in the world that constantly help new learners learn the technology by answering their questions on QA sites like StackOverflow and Quora.

So while working with React, if you face problems, you can post them on QA sites and you will get reliable answers given by experts. There are also many Facebook groups focusing on React, where you can post your issues.

We have learned from this post that React has impressive benefits. So does Angular! So why should we use React? Why not Angular or any other framework?

Not all frameworks and libraries will be the right fit for your work. They can be great tools but may not be the ideal choice for your development work.

Just like React, Angular is also a great, high-quality framework and it’s also been developed by the technology giant – Google.

But there’s a problem with Angular which makes React better in my opinion. The problem is that Angular is hard to learn as it’s not a simple framework. It’s a very complex framework for frontend development. On the other hand, React is a very simple, easy-to-use technology.

This article gave you 6 main reasons to choose React for frontend development. I hope you enjoyed this post!

Our promise

Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.

Authors

A serial entrepreneur, passionate R&D engineer, with 15 years of experience in the tech industry.

Read next

Popular this month

Get smarter in engineering and leadership in less than 60 seconds.

Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.

previous article in this collection

It’s the first one.

next article in this collection

It’s the last one.

Thời lượng: 75 giờ

Địa chỉ: Tầng 6 – Tòa nhà Viện Công Nghệ, Số 25, Vũ Ngọc Phan – Láng Hạ – Đống Đa – Hà Nội

Hotline: 0969 609 003 | 0978 611 889

1. Lập trình frontend – reactjs có nhu cầu thị trường rất lớn và có nhiều sự lựa chọn cho bạn.

2. Devmaster đồng hành cùng thành công của bạn.

Với mô hình đào tạo thực chiến “Học thực tế – Làm thực tế “, môi trường học tập và thực tập hoàn chỉnh, phương pháp đào tạo và các dịch vụ hỗ trợ tích cực cùng đội ngũ chuyên gia giàu kinh nghiệm và tâm huyết đồng hành giúp bạn trang bị đầy đủ các kỹ năng cho sự thành công cho công việc sau này.

Khóa học lập trình và thiết kế giao diện 𝗙𝗿𝗼𝗻𝘁𝗘𝗻𝗱 là một khóa học toàn diện giúp bạn học cách xây dựng giao diện người dùng (UI) hấp dẫn và tương tác trong lĩnh vực phát triển web. Khóa học này sẽ giúp bạn nắm vững các kỹ năng cần thiết để trở thành một lập trình viên 𝗙𝗿𝗼𝗻𝘁𝗘𝗻𝗱 chuyên nghiệp.
Trong khóa học này, bạn sẽ học được những kiến thức và kỹ năng quan trọng sau đây:

Nội dung chi tiết
01. Tổng quan về ngôn ngữ lập trình Web
02. Ngôn ngữ đánh dấu văn bản HTML, HTML5
03. Table và form trong HTML, HTML5
04. Các thẻ bố cục nội dung trong HTML5
05. CSS và CSS3 cơ bản
06. CSS, CSS3 các tính năng nâng cao
07. Sử dụng javascript trong trang web
Nội dung chi tiết
08. Đối tượng và xử lý sự kiện trong javascript
09. JQUERY, AJAX, và các hiệu ứng
10. Sử dụng bootstrap trong thiết kế giao diện web
11. Photoshop trong lập trình Web
12. Cắt ghép giao diện Web

Lập trình web kết hợp 𝗙𝗿𝗼𝗻𝘁𝗘𝗻𝗱 với 𝗥𝗲𝗮𝗰𝘁𝗝𝘀 là một khóa học được thiết kế để giúp bạn học cách xây dựng ứng dụng web động và tương tác sử dụng thư viện ReactJS. ReactJS là một thư viện JavaScript phổ biến được phát triển bởi 𝗙𝗮𝗰𝗲𝗯𝗼𝗼𝗸, giúp phát triển giao diện người dùng (UI) linh hoạt, dễ dùng và dễ bảo trì.
Trong giai đoạn này, bạn sẽ học được các khái niệm cơ bản của ReactJS, bao gồm:

Nội dung chi tiết
01. Tổng quan về ReactJS
02. Tổng quan về Component
03. Props và State
04. Vòng đời, Form và Event
Nội dung chi tiết
05. Tổng quan React Hooks
06. Rounting trong ReactJS
07. Redux
08. Làm việc với APIs trong ReactJs
09. React Performance và React Patterns, React Unit Test
10. Triển khai ứng dụng lên Heroku

React JS- Complete Guide for Frontend Web Development [2024]

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind
Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Bài toán


Viết một trang HTML mô tả màn hình Cart (giỏ hàng) của một trang bán hàng trực tuyến. Người dùng có thể thêm /xoá mặt hàng, thay đổi số lượng, giá tiền của từng loại mặt hàng và số tiền tổng sẽ được cập nhật tự động khi thêm/xoá hay thay đổi số lượng.

Hình vẽ dưới là hình dung về trang HTML đơn giản này, người dùng có thể thêm sản phẩm bằng cách chọn trong selection box, xoá bằng nút [X], thay đổi số lượng bằng các nút [+] và [-]. Giá ở cột Price và hai vị trị Total sẽ được cập nhật ngay khi có thay đổi trong giỏ hàng.

Để có một hình dung tốt nhất về bài toán, đây là link của sản phẩm đã hoàn thành.

https://jsfiddle.net/bs90/189txdh2/29/embedded/result/

Bài viết này tôi chỉ đi sâu vào chia sẻ luồng tư duy của cá nhân tôi trong việc giải quyết bài toán này với React, chứ không đi sâu vào việc phân tích viết code thế nào và tại sao nó chạy.

Deeper Dive into HTML

How HTML works

When a user requests a webpage, the browser fetches the HTML file from a server and interprets it to display the page’s structure and content. HTML uses a set of predefined HTML tags to define content types, such as

for paragraphs,

to for headings, for links, , and for images, to name a few.

HTML structure

HTML uses a tree-like structure, with the

tag as the root with the

and

tags acting as the two main branches.

The

tag houses metadata, stylesheets, and scripts for the page’s styling and functionality. The

tag contains all the visible content, such as text, images, and links. Within these main branches, other tags, known as child elements, define and structure the content.

Page loading

When a page loads, the browser reads the HTML from top to bottom. It interprets the tags to construct the Document Object Model (DOM), a representation of the page structure.

The browser then displays the content according to the DOM. If the HTML includes links to CSS stylesheets or JavaScript files, the browser fetches and applies these, which can affect how the content looks (CSS) or behaves (JavaScript).

HTML’s structure makes it easy for browsers to interpret and for developers to understand and manipulate. It’s a fundamental building block of the web, providing the foundation upon which styles (CSS) and interactivity (JavaScript or libraries/frameworks like React) are added.

Landing Page Tutorial React Js | How To Build A Simple Landing Page In React?
Landing Page Tutorial React Js | How To Build A Simple Landing Page In React?

Frontend vs Backend

  • The front-end is where the users interact directly whereas the backend is how everything works and users can’t interact directly.
  • The visual aspect always comes under Frontend Development whereas what happens in the background comes under Backend Development.
  • Languages used for the front end are HTML, CSS, and JavaScript whereas the backend languages include Java, Ruby, Python, and .NET.

React Js Developer Tools

React Js developer tools are essential tools used to develop React Js apps, debug any React Js app issues, and React Js app troubleshooting. React Js DevTools is a browser plugin that allows developers to investigate the React Js component hierarchy in a React Js application. React Js DevTools is available in Chrome, Firefox, and Edge.

React Js DevTools usage

React Js.js presence detection in the application:

  • Open the browser and navigate to the “React Js DevTools” extension.
  • If the “React Js DevTools” extension is colorful, then it means the application is available in React Js.js format.
  • If the “React Js DevTools” extension is colorless, then the application was not created with React Js.js.

Pros and Cons

Pros:

React Js helps to find developers easily – The popularity of React Js helps in delivering a bunch of skilled React Js developers with a wide range of React Js knowledge, for any business at an ease.

React Js aids in Rapid Development – React Js developers can help businesses by writing complex codes to build a small MVP.

React Js Creates cross-platform products – if there is a business that wants to develop a cross-platform then React Js has the ability to do that. React Js native can develop for android and iOS. It will reduce the cost as they will only hire one developer for both platforms.

React Js builds a wider community – React Js Developers have a wider community with tons of React Js libraries and tutorials to help you fix a bug to speed up the process easily.

React Js owns reusable components – The components in React Js are reusable. Developers can create an app using all ready-made components and also, and you can combine smaller components to make a bigger component as well.

Cons:

React Js apps are shouldered by third-party libraries – Since React Js doesn’t have any base tools they seek the help of third-party libraries. So to keep your React Js version updated you need to update the library as well.

React Js has no conventions – Since React Js doesn’t execute any conventions, JavaScript developers create React Js apps in a different manner which results in messy codes because of various developers with different sets of knowledge.

These are the basic concepts of React Js framework, frontend vs backend, and the pros and cons of React Js.

Is React Js frontend or backend?

Finally, it’s time to reveal the real mystery.

React Js Js is a globally used Front-end JS framework and is popular with both software developers and project sponsors. Well, React Js is not a backend development.

Read our blog: Flutter vs React Native – The framework you should choose in 2020

While building a project, React Js Js Developers focus mainly on the user’s experience and so it’s called Frontend. No doubt front-end developers are in high demand.

Conclusion

As we conclude, React Js is a frontend library used for client-side programming in building things where the users can interact directly with the website. It’s a firm framework that can easily be developed and has a wider community. From a developer’s perspective, React Js is not better or worse as compared to other JavaScript frameworks. As all the frameworks have their own pros and cons and it’s up to the developer to choose the better one. But from the perspective of a business owner, React Js is definitely the best because of its larger community which makes the development much faster and much easier.

Looking for React Js Development Services? Get in touch for a free consultation with our experts.

Share This Article

What is React?

React (ReactJS) is an open-source JavaScript library developed by Facebook. Developers initially used React primarily for single-page applications, but it has evolved to support multi-page websites with SEO features.

Unlike HTML, which structures content, React allows developers to create reusable components. Each component in React has its own logic and controls its rendering. This rendering is crucial because it allows a single element to change while the rest of the page remains static and doesn’t have to reload.

For example, when you like a post on social media, only the thumbs-up or heart icons change. If the same page used HTML, CSS, and Javascript, the entire page would have to reload whenever you liked or interacted with content.

React also has many workflow benefits over traditional HTML, CSS, and Javascript code. The ability to break down complex UI into simpler components makes React highly popular among developers for its efficiency and flexibility.

Modern React Web Development Full Course - 12 Hours | 4 Real Industry Web Applications
Modern React Web Development Full Course – 12 Hours | 4 Real Industry Web Applications

HTMLReact Impact on User Experience

Performance

HTML-based websites generally load quickly due to their static nature. However, they might be slower to navigate if each user interaction requires a new page to load.

Conversely, React’s ability to update only the components that change leads to smoother and faster interactions, providing a more fluid experience for users, especially in complex applications.

Interactivity

HTML alone isn’t capable of creating dynamic, interactive user experiences. It requires JavaScript or similar languages to add interactive elements.

Being a JavaScript library, React excels at building dynamic and interactive UIs that can respond instantaneously to user input. This interactivity can lead to a more engaging, app-like user experience.

Consistency

With React’s component-based architecture, developers can ensure consistent implementation of UI elements across an application.

This uniformity promotes a consistent look and feel, which is critical to a good user experience. With HTML, this would require careful manual coding to ensure consistency.

Progressive Web Apps (PWAs)

Developers often use React for building Progressive Web Apps (PWAs). PWAs can offer app-like experiences on the web, including offline functionality, which can significantly enhance user experience. While you can develop PWAs using HTML, CSS, and JavaScript, the process is more complex and time-consuming.

SEO and initial load time

HTML is straightforward for search engines to crawl and index, which can lead to better SEO. Also, an HTML page can start rendering immediately after the initial HTML file is loaded.

In contrast, a React application generally needs to load the entire JavaScript bundle before it can start rendering. This rendering can lead to longer initial load times, impacting the user experience and SEO. However, techniques like Server-Side Rendering (SSR) and Next.js can help address these issues in React applications.

Nguồn học liệu

Khóa học MOOC này được cung cấp trên nền tảng Coursera. Đây là nền tảng cung cấp các khóa học trực tuyến đại chúng mở được đánh giá rất cao trong các nền tảng MOOC.

Việc liệt kê nguồn dưới đây không nhất thiết hàm ý rằng FUNiX có sự hợp tác chính thức với chủ sở hữu của nguồn: Front-End Web Development with React .

ReactJS là gì? Vì sao ReactJS cần thiết đối với các nhà lập trình web? Cùng tìm hiểu về các ứng dụng và khái niệm cần nắm rõ về ReactJS nhé!

Đối với một web developer, nếu bạn muốn tìm kiếm một công việc có giờ giấc linh hoạt, được trả một mức lương cao, thì điều đó hết sức dễ dàng để biến thành sự thật. Tuy nhiên, cái khó ở chỗ là bạn cần phải xác định được đâu là những kỹ năng cần thiết và quan trọng để bạn tìm kiếm được một công việc phù hợp với nhu cầu mong muốn của bạn.

Nếu bạn đang lên kế hoạch học xây dựng website để tìm kiếm thu nhập cho bản thân, ít nhiều gì bạn cũng biết bạn cần phải học những thứ như là HTML, CSS và JavaScript. Nhưng nếu bạn chỉ dừng lại ở những kiến thức này thôi thì chắc chắn bạn sẽ không thể apply vào bất kỳ một công ty phát triển website nào bởi vì những yêu cầu hiện nay đòi hỏi bạn phải biết sử dụng thêm những framework hay thư viện để tăng tốc quá trình phát triển website hơn nữa.

Chắc hẳn bạn đã từng nghe đến ReactJS? Nhưng liệu bạn đã biết chính xác ReactJS là gì? Nó có phải là một ngôn ngữ lập trình khác không? Để trả lời cho những thắc mắc của bạn và giúp bạn dễ dàng tiếp cận với ReactJS, chúng tôi đã tổng hợp những thông tin hữu ích trong bài viết này để giải đáp các thắc mắc trên của bạn.

37 x Interactive React JS Components to Try - Aceternity UI
37 x Interactive React JS Components to Try – Aceternity UI

Nếu giải quyết bằng JQuery?

Như tôi có nói ban đầu, với tôi JQuery là toàn năng, sau khi biết về React điều này vẫn không có thay đổi. Tuy nhiên lượng vấn đề trên FrontEnd tôi giải quyết bằng JQuery có lẽ sẽ giảm đi, thay vào đó tôi sẽ dùng React.

Ví dụ như bài toán bên trên, nếu làm bằng Jquery, việc xử lý các hành động diễn ra sẽ khá là mệt mỏi. Hành động xoá sản phẩm đi chẳng hạn, ngoài việc tính toán lại hai mảng chứa sản phẩm như làm bằng React, chúng ta sẽ phải cập nhật hai giá trị Total, tìm đúng hàng chứa sản phẩm để xoá nó đi khỏi bảng, sau đó còn phải tính toán lại để hiển thị số thứ tự cho đúng. Ngoài ra cũng còn tương đối những rắc rối khác nữa. Thực ra ban đầu rồi định giải quyết bài toán này bằng cả JQuery nữa để có một phép so sánh chính xác nhất. Tuy nhiên nghĩ đến nhức rắc rối trên, tôi quyết định từ bỏ. Trong bài toán này, việc React hoàn toàn vượt trội là điều dễ nhìn thấy.

Tất nhiên bạn có thể thắc mắc rằng, nếu không dùng React vẫn có thể xây dựng được một hàm render tương tự như React, mỗi khi có thay đổi cũng chỉ cần chạy hàm render đó là xong? Không sai, nhưng các kỹ sư của Facebook đã kỳ công nghiên cứu và cải tiến các thuật toán để Vitual DOM của React trở nên siêu nhanh thì tại sao chúng ta không dùng! React nhanh ra sao các bạn có thể tìm trong Viblo và tham khảo các bài viết khác.

Mở đầu

Tôi là một lập trình viên thích làm Frontend (chắc là ai cũng biết nó là các thứ như HTML, CSS và Javascipt). Tất nhiên cũng chỉ ở dạng xoàng xĩnh thôi.

Ngày tôi bắt đầu học làm Frontend, người ta cũng bảo tôi là nên học Javascipt trước rồi hãy học Jquery. Tuy nhiên, sự đơn giản và tiện dụng của Jquery đã khiến tôi làm điều ngược lại, học Jquery và chỉ quay lại tìm hiểu thêm về Javascipt (không có Jquery) khi cần thiết.

Càng học và làm việc với Jquery và các thư viện của nó nhiều tôi càng thấy Jquery toàn năng. Đúng như tiêu chí “Write Less, Do More”, Jquery (và các thư viện đi kèm) rất dễ đọc, dễ viết, dễ sửa, cộng đồng sử dụng lớn… Và tôi dùng Jquery để giải quyết hầu hết các vấn đề gặp phải trên Frontend.

Gần đây, người ta hay nhắc đến và tán dương React – một thư viện Javascript được phát triển bởi Facebook. Sau khi tham dự một buổi seminar ngắn của một bạn cùng công ty về React, tôi bị ấn tượng khá mạnh về VIRTUAL DOM và DATA FLOW của thư viện này. Tôi hình dung ra những bài toán Frontend mình gặp từ trước đến nay, và có một số vấn đề có vẻ khá sáng sủa nếu làm bằng React. Vì vậy tôi quyết định đặt ra một bài toán nhỏ và thử giải quyết bằng React – một người bạn mới gặp lần đầu.

React JavaScript Framework for Beginners – Project-Based Course
React JavaScript Framework for Beginners – Project-Based Course

Understanding HTML and React

Let’s understand the basic foundation of HTML & React including the functionality & structure of both for better comparison.

HTML: The Foundation

First, let’s begin with the basics, HTML, which stands for HyperText Markup Language. It is the backbone of web pages. It uses tags to define the structure and content of a webpage, including headings, paragraphs, images, and links. It gives web pages their structure and content. With its simple yet effective markup system, It’s the canvas upon which the web is painted, ensuring your content looks and behaves as intended.

To read more about it: HTML Tutorial

React: The Game Changer

Now, meet React. Developed by Facebook, React is a JavaScript library designed for building user interfaces. It’s not just about structure; React is all about making your web applications come alive. It specialises in creating dynamic, interactive, and responsive user interfaces.

To read more about it: ReactJS Tutorials

Giải quyết bài toán

Nếu như bình thường, việc đầu tiên tôi sẽ làm là viết HTML và CSS, sau đó bắt đầu viết JavaScript( Jquery). Tuy nhiên, việc đầu tiên cần làm với React là thiết kế các Vitual DOM.

Ai biết về HTML chắc hẳn cũng sẽ biết khái niệm DOM (Document Object Model), ví dụ đơn giản nhất là một trang HTML cũng là một DOM đã được trình duyệt dịch ra và hiển thị, một cấu trúc cây gồm gốc là thẻ html, hai con là thẻ head và thẻ body, head thì có con là thẻ title, meta, body thì có con là thẻ div, a… Thông thường chúng ta sẽ viết Javascipt tác động trực tiếp lên các thành phần của DOM trên view để thay đổi chúng.

React cung cấp một khái niệm tên là Vitual DOM. Vitual DOM – DOM ảo đúng như tên gọi của nó, chứa toàn bộ các thông tin cần thiết để tạo nên một DOM, tuy nhiên lại nằm hoàn toàn trong code Javascript cho phép chúng ta tạo, xoá, sửa, thực hiện đủ loại thao tác trên nó trước khi được render thành (real)DOM trên view.

Tại sao nên dùng Vitual DOM? Bạn có thể search trên VIBLO. Đã có sẵn một số bài viết về vấn đề này.

Chính vì dùng Vitual DOM nên file HTML của tôi lần này sẽ chẳng có nội dung gì trong thẻ body cả, điều kỳ lạ đầu tiên!


<br /> ReactJS - VibloCart<br />


Thiết kế cấu trúc Vitual DOM

Quay lại việc thiết kế các Vitual DOM đã nói ở trên. Việc thiết kế này, hay là việc tách các thành phần trong nội dung trang ra thành các React Class riêng theo cấu trúc cây, giúp cho ta có một hình dung mạch lạc về luồng dữ liệu (DATA FLOW) của bài toán.

Lần này tôi thiết kế như hình vẽ dưới đây.

Root là CartDiv, nó chính là cái sẽ được render vào trong thẻ body của trang. CartDiv có hai con là Banner và ItemTable. Banner là phần banner của trang, có phần title và phần tổng giá tiền TOTAL, phần này đơn giản nhất là cho vào trong CartDiv luôn, nhưng tôi muốn tách ra để có cơ hội nắm rõ về Data Flow của React. ItemTable là phần bảng còn lại, mỗi thẻ tr chứa thông tin của một sản phẩm tôi lại cho thành 1 con của ItemTable, tên là OneItem.

Giải thích về Data Flow thì không có gì dễ bằng bắt tay vào code và thuyết mình về nó. Đầu tiên là phần CartDiv


var CartDiv = React.createClass({ render: function() { return ( ); } }); React.render(, document.body);

Đó là trạng thái sơ khai nhất, cho chúng ta nhìn thấy là CartDiv chứa hai React Class con là Banner và ItemTable. Bây giờ chúng ta xem xét về data, one-way binding của React yêu cầu data phải truyền từ cha xuống con, data ở đây không chỉ là các biến mà còn là cả các method nữa. Chúng ta phân tích từ từ xem cần truyền gì từ CartDiv xuống cho Banner và ItemTable?

Banner thì đơn giản, truyền cho nó cái tổng tiền là xong. ItemTable thì phức tạp hơn một chút, ngoài tổng tiền thì còn phải truyền thông tin về sản phẩm đang ở trong giỏ hàng kèm theo số lượng và thông tin sản phẩm chưa được mua nữa.

Thêm những phần đó thì class CartDiv sẽ thành như sau.


... ...

total_cost, items và left_items sẽ được khởi tạo trong hàm getInitialState


var CartDiv = React.createClass({ getInitialState: function() { var items = []; // Ban đầu chưa có hàng nào được chọn var total_cost = caculate_total_cost(items); // Hàm caculate_total_cost là hàm để tính tổng số tiền hiện tại var left_items = [{id:1, name:"Framgia Super Server", price:5000}, {id:2, name:"Framgia Super Laptop", price:4000}, {id:3, name:"Framgia Super Watch", price:3000}, {id:4, name:"Framgia Super Keyboard", price:2000}, {id:5, name:"Framgia Super Mouse", price:1000}]; // Set sẵn 5 sản phẩm ví dụ trong kho hàng return {items: items, left_items: left_items, total_cost: total_cost}; // Khi trang vừa load state của CartDiv sẽ thành thế này }, ...

Tạm ổn như thế, chúng ta sẽ đi xây dựng hai class con Banner và ItemTable. Banner thì quá đơn giản như sau.


var Banner = React.createClass({ render: function() { return (


YOUR VIBLO CART


TOTAL: {this.props.total_cost}$F

); // Sau mỗi lần được render lại, tổng số tiền sẽ được cập nhật bằng total_cost mới được truyền lên. Nhân tiện để thiết lập class (để viết cSS chẳng hạn) ta dùng attribute className } });

Về ItemTable thì tôi thiết kế nó là một HTML Table, nhận thấy khi có sản phẩm thì cấu trúc của các thẻ tr hiển thị một sản phẩm là như nhau. Vì vậy tôi quyết định viết một class khác tên là OneItem. Phần ItemTable tôi viết như dưới đây.


var ItemTable = React.createClass({ render: function() { // Hàm rederItem để render 1 dòng, tương ứng với một sản phẩm có trong giỏ hàng hiện tại. Truyền cho nó thông tin cần thiết từ cha của nó là ItemTable var renderItem = function(itemData, index) { return ( ); }.bind(this); var left_items_html; // Phần HTML thể hiện những sản phẩm còn lại trong kho, khi không có gì nó chỉ là dòng text "You're awsome!", còn không nó là 1 form với selection box và nút submit. if (this.props.left_items.length == 0) { left_items_html = "You're awsome!"; } else { left_items_html = (



); }; return (

{this.props.items.map(renderItem)}
No Item name Unit Price Quantity Price Action
{left_items_html} TOTAL {this.props.total_cost}$F

); } });

OneItem thì khá đơn giản, nó chỉ là 1 dòng tr với số thứ tự, thông tin sản phẩm và các nút [+], [-] để tăng giảm số lượng, nút [X] xoá sản phẩm mà thôi.


var OneItem = React.createClass({ render: function() { return (

{this.props.itemIndex + 1} {this.props.itemData.name} {this.props.itemData.price}$F {this.props.itemData.quantity} {this.props.itemData.price*this.props.itemData.quantity}$F

); // Như các bạn thấy, hàm render dùng những giá trị được gửi xuống từ cha để render ra nội dung trả về của OneItem. Khi có thay đổi về các giá trị này, OneItem cũng sẽ đượcc cập nhật theo ngay lập tức. } });

Như vậy là chúng ta thiết kế xong cấu trúc theo hình vẽ bên trên. Chạy thử bây giờ nó sẽ ra trạng thái đầu tiên của link https://jsfiddle.net/bs90/189txdh2/29/embedded/result/, tuy nhiên chả button nào hoạt động cả. Đó chính là việc tiếp theo chúng ta cần làm, làm cho các button hoạt động.

Thiết kế sự kiện (event) – làm cho các button hoạt động

Nếu mà cứ giữ như trên thì viết luôn 1 cái trang HTML tĩnh là xong, chả phải mất công chia chác làm gì cả. Giờ là lúc làm cho mọi thứ hoạt động.

Chúng ta cùng nhau phân tích các sự kiện có thể diễn ra trong trang hiện tại. Cũng không nhiều.

  • Sự kiện thêm hàng vào giỏ
  • Sự kiện xoá hàng khỏi giỏ
  • Sự kiện thay đổi số lượng của từng mặt hàng trong giỏ

Như đã nói ở trên, các method cũng sẽ được truyền từ cha xuống con, vì vậy chúng ta sẽ viết các method ứng với mỗi sự kiện ở class CartDiv.


... // Thêm sản phẩm được chọn vào giỏ, xoá sản phẩm đó ra khỏi kho hàng còn lại, render lại CartDiv AddItemHandle: function(id) { var left_items = this.state.left_items; var item = left_items.filter(function(item){return item.id==id})[0]; left_items.splice(left_items.indexOf(item), 1); item.quantity = 1; var items = this.state.items.concat(item); this.setState({left_items: left_items, items: items, total_cost: caculate_total_cost(items)}); }, // Xoá sản phẩm được chọn ra khỏi giỏ, thêm lại sản phẩm đó vào kho hàng còn lại, render lại CartDiv RemoveItemHandle: function(id) { var items = this.state.items; var item = items.filter(function(item){return item.id==id})[0]; items.splice(items.indexOf(item), 1); delete item.quantity; var left_items = this.state.left_items.concat(item); this.setState({left_items: left_items, items: items, total_cost: caculate_total_cost(items)}); }, // Tăng/Giảm số lượng sản phẩm tương ứng, render lại CartDiv QuantityHandle: function(item_index, method) { var items = this.state.items; if (method == "plus") { items[item_index].quantity++; } else if(this.state.items[item_index].quantity > 0) { items[item_index].quantity--; } this.setState({items: items, total_cost: caculate_total_cost(items)}); } ...

Và 3 methods này sẽ được truyền xuống cho các con cần dùng đến nó.


... ...


... ...

Chuẩn bị xong phần methods, bây giờ chúng ta làm nốt phần cuối cùng, bắt các sự kiện vào các methods đó. Cùng xem lại các sự kiện có thể xảy ra.

  • Sự kiện thêm hàng vào giỏ → Chọn ở selection box (1) và ấn nút submit form (2)
  • Sự kiện xoá hàng khỏi giỏ → Ấn vào nút [X] (3)
  • Sự kiện thay đổi số lượng của từng mặt hàng trong giỏ → Ấn vào nút [+] hoặc [-] (4)

Vậy là có 4 events tất cả. Chúng ra bổ sung code cho 4 event này.


// (1) ... onChange: function(e) { this.props.selected_id = e.target.value; } ...


// (2) ... handleSubmit: function(e) { e.preventDefault(); this.props.addItemHandle(this.props.selected_id); } ...

...


// (3) ... ...


// (4) ...

{this.props.itemData.quantity} ...

SAVE! And you done! https://jsfiddle.net/bs90/189txdh2/29/embedded/result/

Bạn có thể xem và nghịch source code tôi đã viết tại đây http://jsfiddle.net/bs90/189txdh2/29/

Mọi thứ diễn ra khá dễ dàng phải không các bạn!

Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS
Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS

Instructors

EdYoda is re-imagining skill based education, educating on job-relevant real world skills.

Edyoda courses are on job-relevant technical skills. We have professional team of instructors, some of the courses we specialize in are Web development, Mobile App Development, Cloud & DevOps, Machine Learning, Artificial Intelligence and Big Data.

We believe that access to education and opportunities is the biggest enabler, and we are on a mission to enable the same for everyone across the world.

Qaifi is a front-end developer, product designer, and tech evangelist. He has been coding since he was 13 years old. He has worked with numerous technologies over the years. Currently, he is working with HTML, CSS, JavaScript, and React. In the past, he has also worked on Android with Java and Python with Django.

He absolutely loves working on the front-end stack and sharing his knowledge with people interested in front-end development. He has more than 3000 hours of fresher training experience. Currently, he is working on a React book for job seekers which will be out by the end of Dec’22.

Core Coursework

(take these in order)
  • +

    Editor’s Notes

    Learn to build a real-world, modern application from scratch using the latest features of React.

  • Complete Intro to React, v8

    Learn to build real-world apps with modern React 18.x+. You’ll use the latest React features to build a complete app for browsing adoptable pets.

  • +

    Editor’s Notes

    Continue building a real-world application with advanced React features like code-splitting and server-side rendering. You’ll also add TypeScript to the project. We have more TypeScript content in our TypeScript Learning Path

  • Intermediate React, v5

    Learn to build scalable React applications using the latest tools and techniques. Topics include hooks, TailwindCSS, code splitting, server-side rendering, TypeScript, Redux Toolkit, and testing with Vitest.

  • +

    Editor’s Notes

    Learn to write performant React apps and use the React Profiler to diagnose and solve performance issues.

  • React Performance

    Write performant React apps by learning to structure components and memoize to avoid re-renders, load code on-demand, and leverage new concurrent features in React 18.

  • +

    Editor’s Notes

    TypeScript is now critical for most larger React apps to write scalable React apps. We recommend taking TypeScript Fundamentals before taking this course.

  • React and TypeScript, v2

    Use TypeScript with Components, Context API, React Hooks, and type props to build more robust and reliable React applications at scale.

  • +

    Editor’s Notes

    Next.js enables you to create full-stack Web applications by extending the latest React features and integrating powerful tooling for the fastest builds.

  • Introduction to Next.js 13+, v3

    Next.js is a complete full-stack framework built on top of React.js. Use Next.js to create basic blog websites up to full-blown, full-stack apps and APIs. Plus, learn new features like using the app router, server and client components, and server actions!

  • +

    Editor’s Notes

    Learn how to lead a team of engineers by managing large-scale applications, migrating codebases, and enforcing high code quality.

  • Enterprise UI Development: Testing & Code Quality

    Ideal for lead UI developers: learn unit testing, continuous integration, accessibility testing, mocking, and coding standards enforcement. Guide your team toward coding scalability!

  • +

    Editor’s Notes

    We have more React courses! Go deeper with Redux, learn patterns for writing React and JS apps, dive deeper into Next.js or Remix, make mobile apps with React Native, or learn to use State Machines! There’s so much to explore in the React ecosystem.

Elective Coursework

  • The Hard Parts of UI Development

    Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch! Master UI frameworks such as React, Angular, Vue, and Svelte by seeing exactly what problems they solve.

  • A Tour of JavaScript & React Patterns

    Learn a suite of design patterns to improve your JavaScript and React code architecture!

  • Redux Fundamentals (feat. React)

    Learn the Redux API from scratch, then learn to hook the Redux React application. You’ll also learn how to extend Redux with various tools from its ecosystem.

  • Advanced Redux with Redux Toolkit

    Write more performant and maintainable Redux at scale. In this course, you’ll use Redux Toolkit to simplify reducer logic and actions, use TypeScript with Redux, add tests, and use RTK Query to fetch data in real-world projects.

  • React Native, v2

    Build a React Native application from scratch. Use Expo to get started quickly, learn the native components available in React Native, add navigation and more.

  • State Modeling in React with XState

    Explore using XState and React together to model state in real-world React apps. State machines make complex application logic visually clear, flexible.

  • Remix Fundamentals

    Build static websites and dynamic web apps with Remix. Learn how to fetch data, leverage nested routing, eliminate pending states, and handle errors in Remix.

  • Client-Side GraphQL in React

    Use queries and mutations to interact with GraphQL APIs on the client using Apollo Client and React hooks. Learn more about the React Apollo GraphQL tutorial.

React JS: Is it a Frontend or Backend Framework?

Share This Article
Why to choose react native and how to make your react native application a success
Table of Contents
Subscribe to Our Blog

We’re committed to your privacy. SayOne uses the information you provide to us to contact you about our relevant content, products, and services. check out our privacy policy.

People still wonder if React Js JS is frontend or backend? No doubt, React Js is a front-end JavaScript library used in web development to build interactive elements on website User Interfaces (UI) based on UI components. It can be used to develop full-stack web applications as it is used in both frontend and backend. It’s an open-source technology that combines JavaScript and HyperText Markup Language (HTML) to display small pieces of the large UI.

React Js permits developers to describe their User Interfaces and version the state of these interfaces. React Js developer tools are essential tools used to develop React Js apps, debug any React Js app issues, and React Js app troubleshooting.

Conclusion

In this article, we saw how big companies are making huge profits using React.js and Node.js technologies. It depends entirely on which technology we want to use to develop our application. For example, if we are developing a scalable server-side application, we can use NodeJS. Using NodeJS online streaming platforms is always a good option. Whereas ReactJS is the best option if we want to create an application with changing states such as dynamic buttons, inputs, etc.

To know more about ReactJS and NodeJS, you can enroll in the Post-Graduate Program in Full-Stack Web Development offered by Simplilearn in collaboration with Caltech CTME. This Web Development course is a descriptive online bootcamp that includes 25 projects, a capstone project, and interactive online classes. In addition to ReactJS and NodeJS, the course also details everything you need to become a full-stack technologist and accelerate your career as a software developer.

Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these free courses to upgrade your skills and improve your career prospects.

React vs HTML – Can You Spot a Difference?

HTML is a markup language while React is a JavaScript library. Both are used in front-end development and you might have heard about them while designing websites or web apps. Without further ado, let’s see what’s the difference between HTML and React.

Key takeaways:

  • HTML is a markup language, while React is a JS library.
  • React is component-based, while HTML doesn’t support such a structure by default.
  • HTML can’t manage interactivity or states on its own; React can manage states.
  • HTML websites need full refresh, while React can update only elements that change.
  • React enables one-way data binding, while HTML doesn’t have any data binding by default.
  • HTML typically structures content for static websites. React builds dynamic app UIs.

Create React app design much faster with UXPin. Bring real React components to design and move them around to build an app layout that is 100% interactive. Discover UXPin Merge.

Responsive INDUSTRY Website using REACT JS & TAILWIND CSS | Frontend | React Tailwind Project 2024🔥
Responsive INDUSTRY Website using REACT JS & TAILWIND CSS | Frontend | React Tailwind Project 2024🔥

Use the best from every platform

People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.

Stay true to the web

People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.

Go truly native

People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform.

With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.

Deeper Dive into React

How React works

React creates a virtual representation of the DOM (the Virtual DOM), which it uses to improve performance.

When a user interacts with the application, instead of updating the entire DOM (which can be slow), React only updates the parts of the Virtual DOM where the state has changed. It then reconciles the Virtual DOM with the actual DOM in the most efficient way possible, updating only the changed parts in the actual DOM. This process is known as “diffing.”

React structure

React organizes code into components, reusable pieces of code that return JSX. These components can be as simple as a button or as complex as an entire page template.

Components can maintain their own state (data that can change over time), receive data from parent components via props, and pass data to child components. This data flow establishes a clear and predictable coding structure.

Page loading

When a React application loads, it initializes the components and renders the JSX to the actual DOM using the ReactDOM library. During this process, it also sets up event listeners for user interactions.

When a user interacts with the application (e.g., clicks a button), this may trigger state changes in one or more components. React then updates the Virtual DOM to reflect these state changes and efficiently updates the actual DOM to match.

React’s structure and approach to DOM manipulation make it excellent for building complex, interactive web applications that must be fast and responsive. While the learning curve can be steeper than plain HTML, the performance and code organization benefits are substantial.

Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course
Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course

FAQs

React Js is an open-source technology that combines JavaScript and HyperText Markup Language (HTML) to display small pieces of the large UI.

React Js is a globally used Front-end JS framework and is popular with both software developers and project sponsors.

A React Js Js developer is a frontend developer who works with React Js to build UIs, focus on frontend development, and use JavaScript and CSS to design UI elements and layout of the pages. A good React Js developer must have deep knowledge in soft skills and technical skills in both frontend and backend development which includes language coding, libraries and packages.

Description

What’s this course about?This course is a complete guide to become an expert front-end web developer. It contains all the tools and technologies that you should be proficient in work as a React Developer.

  • We will go through the journey of learning HTML5, CSS3, Javascript, ES6, jQuery, and React JS.

  • Each of these course modules has a project which you can work on.

  • Along with the project problem statement video, you will also find the solution video for that project. It is advised to first try working on the project by yourself.

  • Once you have completed working on it, you can see the solution video to know what are the best practices and the most optimized way to complete it.

  • As you keep on creating new projects, start adding them to your GitHub repository so that by the end of the course you will be having a place to showcase all your work.

  • You will definitely enjoy the journey while completing the course!

Who’s teaching you in this course?

I am a Computer Science graduate highly rated instructor with a rating of 4.3 and more than 200k students on Udemy, I have been part of the corporate circle since his college days. In his early days, I was part of a startup team delivering production grid android apps. Currently, I am a lead developer at EdYoda. I’m responsible for the entire front-end development & integration with the back-end. React, Python, Django is my areas of expertise. I have been delivering corporate training for Android, React, Javascript, Python & Django. I have eyes for details & that makes him suited for delivering a finished product. I’m a fitness freak & working out is his favorite thing to do in his spare time.I want everyone should enjoy learning and I have shared my knowledge that gonna be helpful for React developers.Why ReactJs?

You know Companies Worldwide Require React JS Developers.

React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing ReactJs. Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, eBay, Airbnb, and more. Why are businesses so interested in React.js implementation? Here are the benefits of adopting the framework:

  • Increased app development speed. The framework accepts HTML code input and has excellent subcomponent rendering support. Development teams can benefit from JSX as well — it’s an extension with a range of shortcuts that cuts the amount of code writing time.

  • Improved code stability. React.js reduces the impact of change in the code file since the changes in parent components don’t affect the children. Such a data binding approach facilitates software testing and helps ensure stable app performance after update deployments.

  • SEO-friendliness. React.js deals with the inability of search engine crawlers to process JS-heavy pages. Even a beginner with an entry-level react developer salary can deploy React on a server and use the virtual DOM to view the code as a regular web page in a browser.

  • Robust toolkit. React.js has a wide range of debugging and interface design tools.

  • Strong user community and an affordable remote react developer salary. Since a large number of teams are deploying the framework, the tool is regularly updated. There’s no shortage of user-generated content either — you can find dozens of helpful React tutorials and case studies to make the most out of the framework.

Asking for a Senior react developer salary. It’s one of the most in-demand frameworks at the moment — that’s why business owners are willing to find professionals with a moderate mid-level react developer salary within and beyond their home regions.Enroll now!! see you in class.

Happy learningTeam Edyoda

Web Developer Portfolio - 9.5/10 (Front End, React)
Web Developer Portfolio – 9.5/10 (Front End, React)

What you’ll learn

  • Learn to create basic web pages using HTML5
  • Learn to style and add animations to bring those basic web pages to life using CSS3
  • Learn the Javascript language from basic to advanced along with the Next Gen JS – ES6
  • Learn to create responsive and interactive web pages using Javascript and jQuery
  • Create user-friendly, beautiful, light and fast websites using React JS
  • Become an expert front end developer using ReactJs

Key Differences Between HTML and React

While you can build the same website or web application using either React or HTML, they often work together, with HTML structuring the content and React adding interactivity and a component-based architecture.

Therefore, it’s fair to say that HTML vs. React is a redundant comparison because these are two different front-end technologies with different applications which mostly complement each other.

This comparison examines what would happen if you built a website or web application using HTML or React.

  • Functionality: HTML structures content on the web, while React, a JavaScript library, creates dynamic and interactive user interfaces.
  • Component-based: React employs a component-based architecture. Each component represents a part of the UI and can be reused throughout the application, enhancing development efficiency and consistency. In contrast, HTML doesn’t inherently support a component structure.
  • Interactivity: HTML, on its own, can’t create dynamic content or manage application state. It needs JavaScript or similar languages to add interactivity to a webpage. As a JavaScript library, React creates interactive UIs and effectively manages the application state.
  • Rendering: Traditional HTML-based applications often require a full page refresh to implement view changes. React uses a Virtual DOM (Document Object Model) to update only the components that change, eliminating the need for a full page refresh and offering more efficient, smoother updates.
  • Data Binding: HTML lacks a built-in system for data binding. Changes in the UI, like user input, don’t automatically update the application data. React enables one-way data binding, allowing efficient updates to UI components without affecting underlying data.
  • Use Cases: HTML typically structures content for static websites. React builds dynamic and interactive UIs, making it ideal for complex single-page applications (SPAs) and mobile applications with React Native.
React Course - Beginner's Tutorial for React JavaScript Library [2022]
React Course – Beginner’s Tutorial for React JavaScript Library [2022]

React Js Developer

A React Js developer is a frontend developer who works with React Js to build UIs, focus on frontend development, and use JavaScript and CSS to design UI elements and layout of the pages. A good React Js developer must have deep knowledge in soft skills and technical skills in both frontend and backend development which includes language coding, libraries and packages.

Download our eBook for FREE: “Global Software Development Rates – an Overview”.

React Js Tools

The tools used in React Js are Redux, Basel, JSX, Git and npm.

Redux is a state management library used to manage any API changes from any library to make sure that React Js components operate as expected.

Basel is a JavaScript-based tool that transforms HTML text format from JavaScript files into standard JavaScript objects.

JSX describes React Js’s object tree using a syntax similar to an HTML template and is an abstraction on top of React Js.create.Element API.

Git is an open-source tool designed to handle projects with speed and efficiency. It is used to track changes with add, commit, push, and pull.

Node is a cloud storage platform used as an online directory that contains a variety of already registered open- source packages.

More about Frontend and Backend Development

Well, let me be clear if you have any confusion regarding Frontend and Backend. Frontend and Backend are the two commonly used and very important terms in web development.

Frontend Development

In Frontend Development, the developer implements the design, content, and structure of the website which is directly accessible to the users. Responsiveness and Performance are the two main objectives of the frontend developer. It’s the responsibility of the developer to check whether the website is correctly visible on all devices. This part of the website is visible to the users and includes colors, buttons, text, styles, etc. HTML, CSS, and JavaScript are the common languages used in frontend development. Let’s take a peep into these languages.

  • HTML – Hypertext Markup Language is the core of any website which provides Design and Functionality.
  • CSS– Cascading Style Sheet provides flexible and interactive designs.
  • JavaScript – It creates dynamic elements on HTML web pages.

Read our blog on “Conversion of Native Android and iOS apps to React Native”.

Building Interactive Prototypes in UXPin With Merge

UXPin’s Merge technology enables product teams to import UI components from a repository to build fully functioning interactive prototypes in UXPin’s design canvas.

Design teams use the same UI elements for prototyping as engineers use to develop the final product, creating a single source of truth between design and development.

With Merge, designers don’t have to learn React to create React applications. They simply drag and drop components to build interactive prototypes. These advanced prototypes enhance testing, giving design teams meaningful, actionable results to iterate and refine.

Ready to join the code-to-design revolution? Visit our Merge page for more details and how to request access.

In the world of web development, two prominent names often pop up in conversations: HTML and React. As a beginner web developer, you’re probably wondering which one to choose and why. This comprehensive guide aims to shed light on the differences between HTML and React, their functionality, performance, and structure, and why developers favor one over the other. By the end of this article, you’ll be better equipped to make an informed decision for your web development journey.

Học React JS cơ bản trong 30 phút
Học React JS cơ bản trong 30 phút

Backend Development

This part of the website ensures that the frontend is working perfectly fine. This part of the website is not visible to the clients and they aren’t directly interacting with this side. Backend Developer implements writing APIs, creating libraries, working with the system, etc. Languages used in Backend Development are PHP, C++, and Java.

  • PHP – PHP is called a server-side scripting language and is designed just for web development.
  • C++ – It is a widely used competitive programming language.
  • Java – It is a highly scalable language whose components are easily available.

Functionality Comparison

1.A – HTML’s Functionality: Simple and traditional

HTML’s functionality lies in its simplicity and universality. It’s the fundamental language of the web and forms the basis for structuring content. HTML is particularly suitable for static websites and content-heavy pages due to its straightforward nature.

1.B – React’s Functionality: Unbreakable functionalities

React shines in terms of interactivity and code reusability. It’s ideal for building complex web applications with dynamic user interfaces. React components encapsulate HTML, CSS, and JavaScript logic, making it easier to manage and maintain code. React’s functionality is hard to beat.

Làm front-end nên lựa chọn Angular hay ReactJS hay VueJS
Làm front-end nên lựa chọn Angular hay ReactJS hay VueJS

Upgrade when the future is ready

React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.

The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.

Latest React News

Tại sao các JavaScript developer lại sử dụng ReactJS?

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI. Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng. UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lý tương tác.

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sử dụng “vanilla JavaScript”(JavaScript thuần) và JQuery để xây dựng UI. Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro hơn. Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạo ReactJS với mục đích chính là cải thiện quá trình phát triển UI.

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra trong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm:

  • JSX.
  • Virtual DOM.

Để hiểu rõ hơn về ReactJS và tại sao bạn nên sử dụng nó, chúng ta cùng nhau tìm hiểu 2 khái niệm trên để xem chúng thực sự làm việc như thế nào.

2.1 JSX

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents. Trình duyệt Web đọc những document này để hiển thị nội dung của website trên máy tính, tablet, điện thoại của bạn. Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là Document Object Model (DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào. Lập trình viên có thể thêm bất kỳ dynamic content nào vào những dự án của họ bằng cách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM.

JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc.

2.2 Virtual DOM

Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn giản, static website. Nhưng đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang).

Tuy nhiên, nếu bạn sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo). Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bất kỳ).

Ví dụ, khi người dùng bình luận vào khung comment vào bất kỳ bài Blog nào trên website của bạn và nhấn “Enter”. Dĩ nhiên, người dùng của bạn sẽ cần phải thấy được bình luận của mình đã được thêm vào danh sách bình luận. Giả sử trong trường hợp không sử dụng ReactJS, toàn bộ cây DOM sẽ phải cập nhật để báo hiệu sự thay đổi mới này. Còn khi bạn sử dụng React, nó sẽ giúp bạn scan qua Virtual DOM để xem những gì đã thay đổi sau khi người dùng thực hiện hành động trên (trong trường hợp này, thêm mới bình luận) và lựa chọn đúng nơi đúng chỗ cần cập nhật sự thay đổi mà thôi.

Với việc cập nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất nhiều tài nguyên cũng như thời gian xử lý. Ở các website lớn và phức tạp như thương mại điện tử, đặt món ăn, v.v bạn sẽ thấy việc này là vô cùng cần thiết và quan trọng để làm tăng trải trải nghiệm của khách hàng và performance được cải thiện đáng kể.

How to learn ReactJS in 30 Days 👩‍💻 #technology #programming #software #react #career
How to learn ReactJS in 30 Days 👩‍💻 #technology #programming #software #react #career

Structure Comparison

The structure of HTML and React differs significantly.

3.A – HTML’s Structure: Simple and Linear

HTML documents follow a hierarchical structure, with elements like

,

, and

defining the document’s structure. Tags like

, , and are used to create content within thisIt’s ideal for projects that don’t require complex interactions.

HTML structure

This is a simple HTML template that includes the essential elements of an HTML document:

`

`: This tells the computer we’re using a modern kind of web code.
“: It’s like the main container for everything on your web page.
“: Think of it as the place where you put important info about your web page, like its name and language.
“: This helps the computer understand the language your web page speaks, like English or French.
“: It’s where you give your web page a name, like “My Cool Website.”
“: This is where you put all the stuff you want people to see on your web page, like text, pictures, andIt’s like the pages of a book inside the cover.

You can replace the “Hello, World!” and Use your own content to make your web page from this simple HTML document
3.B – React’s Structure : Complex and Dynamic
React encourages a component-basedYou break down your user interface into reusable components, making it easier to manage and scale yourThis approach shines when you’re building complex, dynamic web apps.
The basic structure of a React application involves creating components, defining their behaviour, and rendering them within theHere’s a simplified example of a basic React structure:

React Structure

In this Structure:

We import the necessary React libraries, `React` and `ReactDOM`.
We define a functional component called `App`. This component returns JSX, which represents the structure of the user interface.
Inside the `App` component, we have an HTML-like structure using JSX, including an “ and a “ element.
We use `ReactDOM.render()` to render the `App` component into theThe `App` component is inserted into the HTML element with the `id` of “root.”

This is a simplified example, and a real-world React application would typically have multiple components, state management, and more complexReact allows you to build dynamic and interactive user interfaces by breaking down your UI into reusable components.
Developers’ Choice Between HTML & React
Why Do Developers Choose HTML?
Developers opt for HTML in specific scenarios due to several reasons.

Simplicity: HTML is easy to learn and implement, making it an excellent choice for beginners.
SEO Friendliness: Search engines index HTML content effectively, aiding in better search rankings.
Quick Loading Times: Lightweight HTML pages lead to fast loading times, enhancing user experience.

Why Do Developers Choose React?
React offers a different set of advantages that attract developers.

Interactivity: React enables the creation of highly interactive user interfaces, perfect for web applications.
Code Reusability: React’s component-based structure promotes code reusability and maintainability.
Community Support: A robust community of developers provides resources and solutions for React-related challenges.

HTML or React: Which One Should You Choose?
As a budding web developer, the choice between HTML and React depends on your project’s requirements.
Key Factors by which HTML and React Differ
Here’s a table comparing HTML and React based on the information provided above:

Static markup language that structures web content with tags.

JavaScript library for building interactive user interfaces using components.

Follows a structure hierarchy with HTML tags and elements.

Relies on components that encapsulate HTML,CSS and JavaScript logic.

Rapid page loading due to static content.

May have longer initial loading times but offers improved interactivity post-load.

Chosen for simplicity, SEO-friendliness and quick loading times.

Preferred for building dynamic, interactive web applications with code reusability and community support.

Straightforward and lightweight for static content.

Involves a learning curve but offers advanced capabilities.

Minimal complexity leads to SEO-friendly websites.

Requires optimization for SEO but can achieve solid rankings.

Limited code resume, often results in repetitive code.

Promotes code reusability through components ,saving development time.

Limited code resume, often results in repetitive code.

May have longer initial loading due to JavaScript bundles.

Best suited for static content with limited interactivity.

Ideal for projects requiring high interactivity and dynamic content updates.

Conclusion
So, HTML or React? The answer depends on your project’sIf you’re starting with web development and need a simple, static website, HTML is yourIt’s easy to grasp and does the job effectively.
However, if you’re aiming for highly interactive, dynamic web applications, React is the way toIts speed, efficiency, and rich functionality make it the preferred choice for modern web development.
In the end, the choice between HTML and React boils down to your specific project goals and your level ofBoth technologies have their strengths, and mastering both can be a valuable skill for any web developer.
In this HTMLReact showdown, we’ve explored the working, functionality, performance, structure, and the factors that drive developers’Now, armed with this knowledge, you can make an informed decision for your next web development venture.
Remember, the web development landscape is continually evolving, so stay curious and keepKeep coding!
Also Read
React vs HTML FAQsIs HTML or React better for beginners in web development?

The choice between HTML and React largely depends on your specific project andHTML is a foundational language that’s relatively easy to learn forReact, on the other hand, is more complex and suitable for building interactive webConsider your project’s requirements and start accordingly.Does using React mean slower page loading times?

Initially, React can lead to slower loading times due to JavaScriptHowever, its dynamic nature improves performance and interactivity after the initial load, making it a viable choice for many projects.What are the key advantages of HTML in web development?

HTML is known for its simplicity, SEO-friendliness, and rapid pageIt’s a preferred choice for static websites and content-heavy pages.How does React enhance code reusability?

With React, you can create website parts that you don’t have to build from scratch every time . This modularity streamlines development and maintenance.Can I use both HTML and React in the same project?

Yes, it’s possible to use HTML and ReactThis approach is often employed when integrating React components into an existing HTML-based website.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key toWe provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-boundJoin the millions we’ve already empowered, and we’re here to do the same forDon’t miss out – check it out now!

Last Updated :
17 Oct, 2023

Like Article

Save Article

Share your thoughts in the comments

Please Login to comment…


React

The library for web and native user interfaces

Performance Comparison

When comparing the performance of HTML and React, several factors come into play.

2.A – HTML’s Performance: Lightweight and Swift

HTML-based websites are known for their rapid page loading times. Since HTML is static and lightweight, web browsers can quickly render pages, resulting in a seamless user experience.

2.B – React’s Performance: Efficiency and Optimization

React’s virtual DOM and efficient rendering make it a performance beast, especially for applications with frequent updates. It ensures that your web app runs smoothly, even when dealing with dynamic content.

React for the Haters in 100 Seconds
React for the Haters in 100 Seconds

What is HTML?

HTML (HyperText Markup Language) is the fundamental programming language structure of the web. Every website you visit, whether or not it uses a front-end framework, comprises HTML, CSS, and Javascript.

HTML uses various tags to define elements such as headings, paragraphs, links, and media objects, allowing browsers to interpret and correctly interpret and display the content.

A basic understanding of HTML is vital for anyone involved in web design or development, as it’s the starting point for all websites and many web applications.

Thông tin chung

Môn học này đào tạo về ReactJS – là một framework javascript được sử dụng rộng rãi cho việc phát triển phía front-end.

ReactJS tạo ra cấu trúc dạng ứng dụng cho phía front-end thông qua việc cung cấp các thành phần trang web, điều khiển và tương tác giữa các thành phần với nhau, cũng như với phía back-end. Nhờ vậy, thông qua ReactJS, việc phát triển phía front-end được chuẩn hoá hơn và đi theo một số nguyên tắc được chấp nhận và ứng dụng rộng rãi.

ReactJS đặc biệt thích hợp trong việc phát triển front-end cho các ứng dụng chạy trên nền tảng web mà đòi hỏi trải nghiệm chất lượng cao như các ứng dụng kiểu SPA (Single Page Application)

Top 5 React JS projects for Beginners
Top 5 React JS projects for Beginners

NodeJS and ReactJS

NodeJS

NodeJS, developed by Ryan Dahl, is mainly powered by the V8 engine of Google chrome. The NodeJS technology is mainly a framework of JavaScript, and the backend of the application is made with JavaScript using NodeJS. As NodeJS uses event-driven and non-blocking models, it is considered a very efficient and lightweight framework. NodeJS is mainly used to access databases, host APIs, and serve HTTP requests.

So mainly NodeJS is an open source cross platform runtime environment and almost foe every type of project , it a very popular tool

Many tech giants and companies like Netflix, Uber, Trello are using NodeJS and making huge profits. Outside the browser , NodeJS runs the V8 engine and the core of the google chrome and for this reason NodeJS allowed it to be very performant.

Without creating a single thread for every request , in a single process NodeJS application runs. A set of asynchronous input output primitives in its standard library are provided by NodeJS. These primitives help to prevent the JavaScript from blocking .

Whenever the input and output operations like reading a request or accessing a database or accessing a file are done by NodeJS , then the operation is resumed by NodeJS when the response is returned instead of blocking the thread or wasting the CPU cycle waitings .

A thousand concurrent connections with a single server can be handled by NodeJS without introducing the burden of managing thread concurrency .

We can say NodeJS can be considered as an advantage for those frontend developers who write the client side code in JavaScript code only for browsers , now in addition they can use JavaScript for their server side code also and they do not need to learn any extra language for that.

Example:
Netflix:

We all are familiar with the OTT platform Netflix. It is one of the biggest platforms for online video streaming. The A/B testing is conducted by Netflix so that 209.18 million users can get a rich experience. However, the problems of app scalability and conditional dependencies are very common, and therefore, NodeJS is mainly used as it is a lightweight and high-speed technology.

Uber:

NodeJS is considered as one of the crucial tech solutions by the two-sided carpooling service like Uber. NodeJS enables scaling-up in line with the rising demand for their services.

Trello:

As we all know, Trello is used for managing projects, and it uses NodeJS for its server-side. Trello developers find NodeJS very useful because it can easily manage system updates that require a lot of open connections.

Features of NodeJS

  • The developers can perform non-blocking operations using NodeJS, making our web application faster.
  • NodeJS is an open-source and free framework.
  • Using NodeJS, the developers can make different servers such as the HTTP server, the TCP server, the DNS server, etc. There are many in-built APIs in NodeJS.
  • For quickly testing the ready code using NodeJS, unit testing is available in NodeJS called Jasmine.
  • To improve our application’s performance, the applications built using NodeJS can be scaled horizontally and vertically.
  • The standard ECMAScript can be used in NodeJS without any kind of problems.
  • We do not need to wait for our users to update the browsers , by choosing the version of NodeJS , we are in charge of deciding which ECMAScript version to use .

ReactJS

ReactJS was developed by a Facebook software engineer named Jordan Walke. ReactJS is mainly a front-end open source and a JavaScript front-end library used for building the user interfaces of our web applications or websites. There are many alternatives to ReactJS, such as AngularJs and VueJs. Initially, to show the news feed during chatting, React.js was used. Allowing the development of a dynamic library with high performance was the main motive of building the ReactJS.

From the New York Times to Twitter, the front-end library ReactJS is used in many content-based applications.

Many applications like Facebook rely mainly on user interactions with the user interface elements. Most of the dynamic elements of the Facebook web application are mainly built with the ReactJS front-end library.

Social web applications like Instagram, which Facebook maintains, also use ReactJS. For features like Google Map APIs and geolocations, Instagram uses ReactJS.

For the Gibbon platform of the video streaming applications like Netflix, the ReactJS library is used. This platform applies low-performance TV devices instead of DOM used in web browsers. The modularity, runtime performance, speed, etc., are provided to Netflix by ReactJS.

Now, let us discuss the key features of the ReactJS applications:

Features of React.js

  • The app performance is enhanced or improved due to the virtual DOM or Document Object Model in ReactJS because virtual DOM updates the component states or props without reloading the page.
  • Ensuring the high performance of the ReactJS, the debugger and the developer’s tools are provided to the developers.
  • The code stability and the better performance of the application are guaranteed in ReactJS because it uses unidirectional or downward data flow.
  • The rich UI native apps can be built using the same patterns of ReactJS, and these applications are supported by both the Android and the iOS mobile operating systems.

Now, let us go through the advantages and the disadvantages of NodeJS and ReactJS:

Advantages of NodeJS:

  • Caching of individual modules is done.
  • It is highly extensible.
  • Scaling can be done in both horizontal and vertical ways.
  • Using NodeJS, the JavaScript code can be converted to be made by the V8 engine of Google chrome.
  • As NodeJS handles many connections simultaneously, it is a good option for working with the API services.
  • For writing microservices like API gateway, NodeJS can be used because it is fast and lightweight.

Disadvantages of NodeJS:

  • Instead of following the linear I/O blocking, asynchronous programming is followed by NodeJS.
  • Though NodeJS has many features, a rich library is absent.

Advantages of ReactJS:

  • The code components can be reused in ReactJS.
  • It uses virtual DOM that provides better performance to our application.
  • Faster debugging is done.
  • It is supported by both mobile operating systems such as Android and iOS.
  • Easy UI test cases.

Disadvantages of ReactJS:

  • Sometimes it becomes difficult for the developers to keep pace with the newly released tools and tech.
  • Sometimes it becomes difficult or complex to learn using JSX and JavaScript.

Now let us discuss how we can connect Node with React,

We are going to use ExpressJs with NodeJs for creating the backend. ExpressJS is a rapid application development framework and using this framework we can build our application very quickly on the NodeJS platform.

Our First step will be to make a custom API in ExpressJS and then we are going to connect the API endpoint with the client side React application.

First you need to be sure that NodeJS is already installed in your system.

Let us make the client side react application first :

First install your React Application for your client side by writing the below command :

npx create-react-app client

Then run this default React application in your localhost:3000 by writing the command written below :

cd client

npm start

In your http://localhost:3000 you are going to see the application like following:

Now lets create the backend application:

For that go back to the parent directory by typing cd.. And the type the following command :

npx express-generator api

After writing this command an express application will be generated on NodeJS named api.

After that go to your api application folder by cd api and there type

npm install

This command will install all the required packages in your package.json file .

Now close the client application in your terminal with ctrl + c and the go back to your api folder in your terminal and then type the below command

npm start

Now you are going to see the standard default express application in your localhost:3000.

Now we will go to the bin folder and and will go www file and will change the port no from 3000 to 9000.

After changing the port number the www file will look like the following :

#!/usr/bin/env node

/**

* Module dependencies.

*/

var app = require(‘../app’);

var debug = require(‘debug’)(‘api:server’);

var http = require(‘http’);

/**

* Get port from environment and store in Express.

*/

//change the port number from 3000 to 9000

var port = normalizePort(process.env.PORT || ‘9000’);

app.set(‘port’, port);

/**

* Create HTTP server.

*/

var server = http.createServer(app);

/**

* Listen on provided port, on all network interfaces.

*/

server.listen(port);

server.on(‘error’, onError);

server.on(‘listening’, onListening);

/**

* Normalize a port into a number, string, or false.

*/

function normalizePort(val) {

var port = parseInt(val, 10);

if (isNaN(port)) {

// named pipe

return val;

if (port >= 0) {

// port number

return port;

return false;

/**

* Event listener for HTTP server “error” event.

*/

function onError(error) {

if (error.syscall !== ‘listen’) {

throw error;

var bind = typeof port === ‘string’

? ‘Pipe ‘ + port

: ‘Port ‘ + port;

// handle specific listen errors with friendly messages

switch (error.code) {

case ‘EACCES’:

console.error(bind + ‘ requires elevated privileges’);

process.exit(1);

break;

case ‘EADDRINUSE’:

console.error(bind + ‘ is already in use’);

process.exit(1);

break;

default:

throw error;

/**

* Event listener for HTTP server “listening” event.

*/

function onListening() {

var addr = server.address();

var bind = typeof addr === ‘string’

? ‘pipe ‘ + addr

: ‘port ‘ + addr.port;

debug(‘Listening on ‘ + bind);

Now go to the routes folder and make a file named restAPI.js , here we are going to make our custom API.

Write following code in testAPI.js :

const express = require(“express”)

const router = express.Router()

router.get(“/”,(req,res)=>{

res.send(“API works perfectly”);

})

module.exports=router

Now go to your app.js file and import the testAPI from routes folder and use it in your app .

After doing all the required changes in app.js , your app.js will look like the following :

var createError = require(‘http-errors’);

var express = require(‘express’);

var path = require(‘path’);

var cookieParser = require(‘cookie-parser’);

var logger = require(‘morgan’);

var indexRouter = require(‘./routes/index’);

var usersRouter = require(‘./routes/users’);

testAPIRouter = require(“./routes/testAPI”)

var app = express();

// view engine setup

app.set(‘views’, path.join(__dirname, ‘views’));

app.set(‘view engine’, ‘jade’);

app.use(logger(‘dev’));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, ‘public’)));

app.use(‘/’, indexRouter);

app.use(‘/users’, usersRouter);

app.use(“/testAPI”,testAPIRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get(‘env’) === ‘development’ ? err : {};

// render the error page

res.status(err.status || 500);

res.render(‘error’);

});

module.exports = app;

Now again go to your terminal and go to the api folder , type npm start , after that open http://localhost:9000/testAPI and you are going to see the following page and that means that your custom API is working properly.

Now go to your client folder and there go to your src/App.js and edit it , so that we can fetch the API endpoint and we will show the data in your client side application .

After editing the App.js will look like the following :

import logo from ‘./logo.svg’;

import React from ‘react’

import ‘./App.css’;

class App extends React.Component{

constructor(props){

super(props)

this.state={apiResponse:””};

callAPI(){

fetch(“http://localhost:9000/testAPI”)

.then(res=>res.text())

.then(res=>this.setState({apiResponse:res}))

componentWillMount(){

this.callAPI()

render() {

return (

{this.state.apiResponse}

);

export default App;

Now go back to your api folder , here we need to set up one more thing that cross origin resource sharing so that our React application can communicate with backed which is running on a different port number , we must allow this setting otherwise it will block the request coming from other applications.

For that cross origin module needs to be installed globally within your api folder and for installing it , write the following command :

npm i –save cors

Now go to your app.js file of api folder and include cors

After doing all the changes the app.js file in your api folder will look like the following :

var createError = require(‘http-errors’);

var express = require(‘express’);

var path = require(‘path’);

var cookieParser = require(‘cookie-parser’);

var logger = require(‘morgan’);

const cors = require(“cors”)

var indexRouter = require(‘./routes/index’);

var usersRouter = require(‘./routes/users’);

testAPIRouter = require(“./routes/testAPI”)

var app = express();

// view engine setup

app.set(‘views’, path.join(__dirname, ‘views’));

app.set(‘view engine’, ‘jade’);

app.use(logger(‘dev’));

app.use(express.json());

app.use(cors())

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, ‘public’)));

app.use(‘/’, indexRouter);

app.use(‘/users’, usersRouter);

app.use(“/testAPI”,testAPIRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get(‘env’) === ‘development’ ? err : {};

// render the error page

res.status(err.status || 500);

res.render(‘error’);

});

module.exports = app;

Now go back to your terminal, stop both the client and api folder and run them again .

Open your http://localhost:9000/testAPI :

You are going to see the following:

Then open your http://localhost:3000 and you are going to see how the data from the backend has been fetched to your frontend through an API call.

If you’re eager to gain the skills required to work in a challenging, rewarding, and dynamic IT role – we’ve got your back! Discover the endless opportunities through this innovative Post Graduate Program in Full Stack Web Development course designed by our partners at Caltech CTME. Enroll today!

Keywords searched by users: react js for frontend

React Js: Is It A Frontend Or Backend Framework?
React Js: Is It A Frontend Or Backend Framework?
React For Beginners – A React.Js Handbook For Front End Developers
React For Beginners – A React.Js Handbook For Front End Developers
Using React.Js For Frontend Development : Features And Benefits
Using React.Js For Frontend Development : Features And Benefits
React Vs Vue.Js For Frontend Development
React Vs Vue.Js For Frontend Development
How To Connect Node.Js Backend To A React.Js Frontend 2020 | Nodejs + React  Tutorial For Beginners - Youtube
How To Connect Node.Js Backend To A React.Js Frontend 2020 | Nodejs + React Tutorial For Beginners – Youtube
Create A React Frontend, Express Backend And Connect Them Together
Create A React Frontend, Express Backend And Connect Them Together
Complete Guide On Front End Web Development With React
Complete Guide On Front End Web Development With React
Is React Frontend Or Backend? - Zapone.Io
Is React Frontend Or Backend? – Zapone.Io
Front End Development Course Using React Js [33 Hours] | Learn Html & Css,  Bootstrap 5, React Js - Youtube
Front End Development Course Using React Js [33 Hours] | Learn Html & Css, Bootstrap 5, React Js – Youtube
React Js Developer Vs. Frontend Developer: Unveiling The Distinction
React Js Developer Vs. Frontend Developer: Unveiling The Distinction
Complete Guide: Why Choose React Js For Frontend Development?
Complete Guide: Why Choose React Js For Frontend Development?
Front End Development Course Using React Js [33 Hours] | Learn Html & Css,  Bootstrap 5, React Js - Youtube
Front End Development Course Using React Js [33 Hours] | Learn Html & Css, Bootstrap 5, React Js – Youtube
Front-End With React.Js, Back-End With C++ (Part 1) - Youtube
Front-End With React.Js, Back-End With C++ (Part 1) – Youtube
Complete Guide On Front End Web Development With React
Complete Guide On Front End Web Development With React
How To Create A React Frontend And A Node/Express Backend And Connect Them
How To Create A React Frontend And A Node/Express Backend And Connect Them
Front-End Xịn Mịn Là Phải Biết Reactjs - R2S Academy
Front-End Xịn Mịn Là Phải Biết Reactjs – R2S Academy

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *