How does React use JavaScript?
React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript’s syntax so that HTML-like code can live alongside it. For example:
const heading =Mozilla Developer Network
;
This heading constant is known as a JSX expression. React can use it to render that tag in our app.
Suppose we wanted to wrap our heading in a tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
const header = (Mozilla Developer Network
);
Note: The parentheses in the previous snippet aren’t unique to JSX, and don’t have any effect on your application. They’re a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
const header =Mozilla Developer Network
;
However, this looks kind of awkward, because the tag that starts the expression is not indented to the same position as its corresponding closing tag.
Of course, your browser can’t read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:
const header = React.createElement( "header", null, React.createElement("h1", null, "Mozilla Developer Network"), );
It’s possible to skip the compilation step and use
React.createElement()
to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, modern front-end development almost always involves a build process anyway — you have to downlevel modern syntax to be compatible with older browsers, and you may want to minify your code to optimize loading performance. Popular tooling like Babel already comes with JSX support out-of-the-box, so you don’t have to configure compilation yourself unless you want to.
Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you’re comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance.
To read more about JSX, check out the React team’s Writing Markup with JSX article.
Hello React
As its official tagline states, React is a library for building user interfaces. React is not a framework – it’s not even exclusive to the web. It’s used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications.
To build for the web, developers use React in tandem with ReactDOM. React and ReactDOM are often discussed in the same spaces as — and utilized to solve the same problems as — other true web development frameworks. When we refer to React as a “framework”, we’re working with that colloquial understanding.
React’s primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.
Licensing[edit]
The initial public release of React in May 2013 used the Apache License 2.0. In October 2014, React 0.12.00 replaced this with the 3-clause BSD license and added a separate PATENTS text file that permits usage of any Facebook patents related to the software:[51]
The license granted hereunder will terminate, automatically and without notice, for anyone that makes any claim (including by filing any lawsuit, assertion or other action) alleging (a) direct, indirect, or contributory infringement or inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, (ii) by any party if such claim arises in whole or in part from any software, product or service of Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, or (iii) by any party relating to the Software; or (b) that any right in any patent claim of Facebook is invalid or unenforceable.
This unconventional clause caused some controversy and debate in the React user community, because it could be interpreted to empower Facebook to revoke the license in many scenarios, for example, if Facebook sues the licensee prompting them to take “other action” by publishing the action on a blog or elsewhere. Many expressed concerns that Facebook could unfairly exploit the termination clause or that integrating React into a product might complicate a startup company’s future acquisition.[52]
Based on community feedback, Facebook updated the patent grant in April 2015 to be less ambiguous and more permissive:[53]
The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the Software. […] A “Patent Assertion” is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim.[54]
The Apache Software Foundation considered this licensing arrangement to be incompatible with its licensing policies, as it “passes along risk to downstream consumers of our software imbalanced in favor of the licensor, not the licensee, thereby violating our Apache legal policy of being a universal donor”, and “are not a subset of those found in the [Apache License 2.0], and they cannot be sublicensed as [Apache License 2.0]”.[55] In August 2017, Facebook dismissed the Apache Foundation’s downstream concerns and refused to reconsider their license.[56][57] The following month, WordPress decided to switch its Gutenberg and Calypso projects away from React.[58]
On September 23, 2017, Facebook announced that the following week, it would re-license Flow, Jest, React, and Immutable.js under a standard MIT License; the company stated that React was “the foundation of a broad ecosystem of open source software for the web”, and that they did not want to “hold back forward progress for nontechnical reasons”.[59]
On September 26, 2017, React 16.0.0 was released with the MIT license.[60] The MIT license change has also been backported to the 15.x release line with React 15.6.2.[61]
Use cases
Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app’s entire user interface.
While React can be used for small pieces of an interface, it’s not as easy to “drop into” an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.
In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learned.
This article is going to focus on the use case of using React to render the entire user interface of an application with the support of Vite, a modern front-end build tool.
Notable features[edit]
Declarative[edit]
React adheres to the declarative programming paradigm.[10]: 76 Developers design views for each state of an application, and React updates and renders components when data changes. This is in contrast with imperative programming.[11]
Components[edit]
React code is made of entities called components.[10]: 10–12 These components are modular and reusable.[10]: 70 React applications typically consist of many layers of components. The components are rendered to a root element in the DOM using the React DOM library. When rendering a component, values are passed between components through props (short for “properties”). Values internal to a component are called its state.[12]
The two primary ways of declaring components in React are through function components and class components.[10]: 118 [13]: 10
import React from “react”; /** A pure component that displays a message with the current count */ const CountDisplay = props => { // The count value is passed to this component as props const { count } = props; return (
The current count is {count}.); } /** A component that displays a message that updates each time the button is clicked */ const Counter = () => { // The React useState Hook is used here to store and update the // total number of times the button has been clicked. const [count, setCount] = React.useState(0); return (
); };
Function components[edit]
Function components are declared with a function (using JavaScript function syntax or an arrow function expression) that accepts a single “props” argument and returns JSX. From React v16.8 onwards, function components can use state with the
useState
Hook.
// Function syntax function Greeter() { return
Hello World; } // Arrow function expression const Greeter = () =>
Hello World;
React Hooks[edit]
On February 16, 2019, React 16.8 was released to the public, introducing React Hooks.[14] Hooks are functions that let developers “hook into” React state and lifecycle features from function components.[15] Notably, Hooks do not work inside classes — they let developers use more features of React without classes.[16]
React provides several built-in Hooks such as
useState
,[17][13]: 37
useContext
,[10]: 11 [18][13]: 12
useReducer
,[10]: 92 [18][13]: 65–66
useMemo
[10]: 154 [18][13]: 162 and
useEffect
.[19][13]: 93–95 Others are documented in the Hooks API Reference.[20][10]: 62
useState
and
useEffect
, which are the most commonly used, are for controlling state[10]: 37 and side effects[10]: 61 respectively.
Rules of hooks[edit]
There are two rules of Hooks[21] which describe the characteristic code patterns that Hooks rely on:
- “Only Call Hooks at the Top Level” — Don’t call hooks from inside loops, conditions, or nested statements so that the hooks are called in the same order each render.
- “Only Call Hooks from React Functions” — Don’t call hooks from plain JavaScript functions so that stateful logic stays with the component.
Although these rules can’t be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of Hooks and the implementation of custom Hooks,[22] which may call other Hooks.
Server components[edit]
React server components or “RSC”s[23] are function components that run exclusively on the server. The concept was first introduced in the talk Data Fetching with Server Components Though a similar concept to Server Side Rendering, RSCs do not send corresponding JavaScript to the client as no hydration occurs. As a result, they have no access to hooks. However, they may be asynchronous function, allowing them to directly perform asynchronous operations:
async function MyComponent() { const message = await fetchMessageFromDb(); return (
Message: {message}); }
Currently, server components are most readily usable with Next.js.
Class components[edit]
Class components are declared using ES6 classes. They behave the same way that function components do, but instead of using Hooks to manage state and lifecycle events, they use the lifecycle methods on the
React.Component
base class.
class ParentComponent extends React.Component { state = { color: ‘green’ }; render() { return ( ); } }
The introduction of React Hooks with React 16.8 in February 2019 allowed developers to manage state and lifecycle behaviors within functional components, reducing the reliance on class components.
React Hooks, such as
useState
for state management and
useEffect
for side effects, have provided a more streamlined and concise way to build and manage React applications. This shift has led to improved code readability and reusability, encouraging developers to migrate from class components to functional components.
This trend aligns with the broader industry movement towards functional programming and modular design. As React continues to evolve, it’s essential for developers to consider the benefits of functional components and React Hooks when building new applications or refactoring existing ones.[24]
Routing[edit]
React itself does not come with built-in support for routing. React is primarily a library for building user interfaces, and it doesn’t include a full-fledged routing solution out of the box.
However, there are popular third-party libraries that can be used to handle routing in React applications. One such library is
react-router
, which provides a comprehensive routing solution for React applications.[25] It allows you to define routes, manage navigation, and handle URL changes in a React-friendly way.
To use
react-router
, you need to install it as a separate package and integrate it into your React application.
-
Install
react-router-dom
using npm or yarn:npm install react-router-dom
-
Set up your routing configuration in your main application file:
import React from ‘react’; import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’; import Home from ‘./components/Home’; import About from ‘./components/About’; import Contact from ‘./components/Contact’; function App() { return ( ); } export default App;
- Create the components for each route (e.g., Home, About, Contact).
With this setup, when the user navigates to different URLs, the corresponding components will be rendered based on the defined routes.
Virtual DOM[edit]
Another notable feature is the use of a virtual Document Object Model, or Virtual DOM. React creates an in-memory data-structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently.[26] This process is called reconciliation. This allows the programmer to write code as if the entire page is rendered on each change, while React only renders the components that actually change. This selective rendering provides a major performance boost.[27]
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.
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](https://i.ytimg.com/vi/U9sDK8zTJ8Y/hqdefault.jpg "[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒")
React JS Benefits
Building interactive user faces, no matter the development platform is an undoubtedly tedious and tricky task. Here are 6 ReactJS advantages that prove the reliability of ReactJS for a web applications.
It allows you to determine how you want to handle routing, testing and even folder structure. It is easier to update and manage due to its modular structure.
- Build Rich User Interface
ReactJs or React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React makes it painless to create interactive UIs.
- Offers a Huge set of Built-in libraries
ReactJS offers a heavy third-party library that is easier to include in your web development projects. Here are some mature component libraries that can be used.
- Material UI
- React Bootstrap
- React Router
- Redux
- Graph QL
Each React app contains components that represent specific screens or elements in the app. Components are building blocks of React and they represent classes or functions that accept input and render the various HTML elements.
An application always ranks high on Google if it has a lower page load time and fast rendering speed. Because of its high rendering capability, ReactJS apps can help apps rank high in Google search engine results.
React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize the performance. Nevertheless, there are several ways you can speed up your React application.
Now we will understand where the react.js with front-end can be used for building applications. Also, if you want to learn more about front-end development then this course front-end development Bootcamp will help you to upgrade skills.
If you want to learn more about front-end & back-end do follow full-stack web developer Bootcamp course which help you understand more deeply.
Examples of React JS Development
There are various big companies that are using react.js to boost their performance in web applications.
Facebook is the creator of React. Facebook web page is created using ReactJS.
Instagram features like Google Maps, Geolocation, search engines etc. are built on ReactJS features.
Credit the app’s startup speed, runtime performance, modularity, and other functionalities to ReactJS.
Looking to kickstart your career in programming? Join our online Python course with placement opportunities. Learn the language that powers tech giants and start building your own innovative projects. Don’t miss out, enroll now!
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ể.
![React Course - Beginner's Tutorial for React JavaScript Library [2022]](https://i.ytimg.com/vi/bMknfKXIFA8/hqdefault.jpg "React Course - Beginner's Tutorial for React JavaScript Library [2022]")
![Front End Development Course Using React Js [33 Hours] | Learn Html & Css, Bootstrap 5, React Js - Youtube](https://i.ytimg.com/vi/srBwRDiC3Pg/sddefault.jpg "Front End Development Course using REACT JS [33 Hours] | Learn HTML & CSS, Bootstrap 5, React JS - YouTube")
