一、What is React?

1. DEFINITION: React is a JavaScript library for building web and mobile user interfaces.
2. FEATURES:
   1. React is a library rather than a framework. React focuses on doing one specific thing really well, whilst a framework tries to handle everything you need when building an app.
   2. React is all about building user interfaces, the parts of websites and apps that users see and interact with, like menus, buttons, forms, etc.
   3. React doesn’t handle routing or managing complex app logic. But React has a massive ecosystem of other libraries. To achieve these functions, just plug in the right tools when necessary.

二、Why should we learn React?

1. Market Reasons :
   • React is the most popular library for building user interfaces.
   • AI models or tools such as ChatGPT, Claude Code, Cursor, Codex and others are dominating at writing react code.
   • React dominates the job market and the open-source ecosystem.
2. Technical Reasons:
   • React has a component-based architecture, it breaks UI into small, reusable pieces, which can be composed to make more complex UIs.
   • For example, we usually divide a page into several parts: Header, Aside, Body and Footer. With a React component we can present content in the Body, but this component can also be used to display data fetched via Next.js or typed with TypeScript. That’s called reusable. As shown in the following figure:
     
   • React is declarative. That means we just describe what we want the UI to look like, and React takes care of building and updating the actual UI. We don’t need to explain how to build or update the UI.
   • For example, think of it like ordering food at a restaurant, we just tell the waiter what we want like a burger with cola and the waiter will take care of the rest. We don’t need to explain how to cook it.
   • React makes no assumptions about the rest of the tech stack you are using for your project.
   • For example, you can use React as a portion of one your pages, or a complete page, or even an entire application. What’s more, you can use React to build mobile applications with React Native. The bottom line is that React will be a great addition to your skill set.

三、Prerequisites for React

• We need a solid understanding of HTML, CSS, JS and ES6. Up has already explained how to use these tech stacks beforehand in our previous columns, so I’ll put the corresponding links as following :

  1. HTML :

     • https://cyan-ra9.blog.csdn.net/article/details/131473958
     • In this article, up explained the constitution of a page and the definition of HTML in the first place, then expounded on how to use HTML labels such as font, character entity, hyperlink, list, form, table and so on, down to the last detail. You just need to click in it and follow my guidance.

  2. CSS :

     • https://cyan-ra9.blog.csdn.net/article/details/131541924
     • In this article, up explained basic usages of CSS in detail, including what’s CSS, how to use its different styles such as font, background-color, div and border-collapse, also how to import CSS and how to use CSS selector. All you need to do is to click in and learn.

  3. JavaScript:

     • https://cyan-ra9.blog.csdn.net/article/details/131619052
     • JavaScript, also JS, takes charge of the behaviors of pages, so it is much more flexible than HTML and CSS. In this article, up firstly introduced the basic properties of JS, including what’s JS, its traits and how to import it. Then we talked about the grammars of JS such as DS, operators, array, objects, events and so on.

  4. ES6:

     • https://blog.csdn.net/tyra9/category_12470065.html?spm=1001.2014.3001.5482
     • ECMA (European Computer Manufacturers Association) Script 6.0, abbreviated as ES6, is the next-generation standard for the JavaScript language. Its purpose is to enable the JavaScript language to be used for writing complex large-scale programs and to become an enterprise-level development language. ES6 was released in June 2015.
     • up has already written 3 articles to explain ES6, so I put an Column Hyperlink right here.