Table of Contents
Preamble
React is one of the most popular JavaScript packages for developing web and mobile front ends.Developed by Meta (formerly Facebook), React enables developers to create reusable components to complete front-end pages.
However, it's important to note that React is not technically a framework. That's because it's only responsible for presenting the components of the UI. However, React provides an alternative solution to frameworks such as Angular and Vue, allowing us to work with it on complex front-end page functionality.
This article will explain how React works, its features, and the benefits of using React.js for front-end developers.
Why do I need a front-end framework?
In answering this question, it is good to think about why we need to use front-end frameworks? In the field of web development, front-end framework is indeed a modern tool, and no matter which technology or tool is developed to solve a certain problem. In the old days, a static page could be completed with HTML, CSS or even just some JavaScript.
However, as technology becomes more and more advanced, and more and more people use the Internet, the functions of web pages are becoming more and more complex, whether it is member registration, login, map functions, forums, message functions ... and so on, it has long been more than a simple web page, can be solved.
Therefore, there are front-end engineers and back-end engineers. Front-end engineers are responsible for UI \ UX, visual interface, data and status visualisation... etc. Back-end engineers are responsible for data processing, database operations, server management, API development, and so on.
Because of the increasing complexity of web pages, it is no longer possible to use JavaScript or Jquery to deal with all kinds of complex front-end state, so the birth of the framework.
React、Vue、Angular 則是為了處理複雜的前端狀態而被發展出來的。
What is React JavaScript?
React is a powerful JavaScript suite for creating front-end interfaces through modularity. It revolutionises front-end UI development by introducing declarative and modular approaches.
Unlike DOM manipulation in jQuery, React uses Virtual DOM to optimise performance. React JavaScript (or React.js) handles complex front-end screens, providing developers with a structured and efficient approach.
How React works？
React introduces JSX, a syntactic sugar that seamlessly combines JavaScript and HTML code; JSX tags are similar to XML, but with a few differences.
For example, React uses className instead of CSS's traditional class attribute. Numeric values and expressions are enclosed in curly brackets, and quotes represent strings, similar to JavaScript.
React Elements
React can create all kinds of HTML DOMs (Document Object Models) with its built-in functions, so let's review the basic HTML syntax first.
<body>
<h1>Hello World</h1>
<ul>
<li>dog</li>
<li>cat</li>
</ul>
</body>
From the structure of HTML above, we can know that HTML elements monitor the tree structure, and there is a root element (root element) has two child elements, the first child element for the h1and the second child element is ulAnd if you look at it. ul The list goes on.ul itself is also a parent element, which contains two li The child elements of the.
We're using these DOMs to let the browser know what our page looks like, so the concept of React is the same, building these elements through functions developed by React, and then combining these elements into one big HTML and displaying the page.
React DOM
When we create an element, we need to render the created DOM to the page, we call this action Render. We can use ReactDOM's built-in render to render our created React element into the browser.
const dish = React.createElement("h1", "Hello World"); ReactDOM.render(dish, document.getElementById("root"));
With the above JavaScript code, an HTML element will be created as follows.and passes this element into HTML.
<div id="root">
<h1>Hello World</h1>
</div>
Of course, the above is a simple DOM, but here's an example of HTML built by rendering a list in ReactDOM.
const hello = React.createElement("h1", "Hello") const world = React.createElement("h1", "World") ReactDOM.render([hello, world], document.getElementById("root"))
Why use React.js?
Hundreds of large companies around the world are using React to build their systems, and the following is a brief introduction to the benefits of using React.
Easy to use
Web development engineers with JavaScript skills can usually learn how to use React quickly because it relies on Pure JavaScript and also has modularisation and object orientation concepts, so it's relatively easy to get started.
If you need to learn more about JavaScript, many websites offer free tutorials where you can learn the basics of JavaScript before reading about React to simplify the front-end development process.
Reusable elemental
React allows you to reuse components for other applications. For example, if you develop a form for one page, you can use it for other pages without having to develop it again.
In addition, React can continue to use smaller components within other components to accomplish complex functionality without too much fat code. Each React component has its own state, so it can be easier to maintain.
Simple front-end component implementation
React combines JavaScript objects with HTML syntax and markup. It is also possible to write components and add React to existing HTML pages via JSX (a term we'll continue to cover in a later section). JSX simplifies multifunctional presentation and keeps the code clean without limiting the functionality of the system.
High performance
Virtual Dom allows React to quickly update the DOM Tree, avoiding excessive re-rendering and performance impacts through special mechanisms and algorithms.
Search Engine Optimisation
React improves time on load by increasing performance and shortening JavaScript code loading times, a step towards search engine optimisation (SEO).The implementation of Virtual DOM helps to speed up pages.
It also optimises SEO through the Server Side, solving one of the challenges faced by JavaScript-only websites, which search engines often find difficult and time-consuming to crawl.
Conclusion
This post officially enters the world of React, explaining how React works, including how it generates the HTML DOM into a page through JavaScript.
Continuous improvements in the React team have made React easier to use and work with a variety of technologies, including Bootstrap, Tailwind CSS, Axios, Redux, and Firebase.
Deploying React applications on a VPS is also easy with the help of Node.js and NGINX.
Feel free to leave a comment if you have any suggestions or questions!
If you like this series of articles, please do not hesitate to click like and share it so that more people can see it!
Quote
React Vernacular Campaign Series
JavaScript Higher-Order Function - React Vernacular Campaign 04
JavaScript Async Await - React Vernacular Campaign 03
English 
繁體中文 
简体中文 
한국어 
日本語 
Español