{"id":10340,"date":"2022-02-18T19:56:33","date_gmt":"2022-02-18T16:56:33","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=10340"},"modified":"2023-04-14T19:57:15","modified_gmt":"2023-04-14T16:57:15","slug":"what-is-react","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/what-is-react\/","title":{"rendered":"What is React?"},"content":{"rendered":"<p>Are you curious about <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">React<\/a> and what it can do for you? Have you been wondering what makes React stand out from the competition? Have you been looking for a way to make developing user interfaces easier? With React, you can do all this and more. <\/p><p>The importance of React cannot be overstated. React has quickly become a popular choice for frontend <a href='https:\/\/flatlogic.com\/services\/web-development'>web development<\/a>, and its usage has been steadily increasing since its introduction in 2013. According to a 2020 survey, React was the most popular <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/10\/Frame-8_1-1-600x450.png\"  data-excerpt=\"jQuery vs. JavaScript JavaScript Before we compare jQuery vs JavaScript, let&#039;s recall the basics. What is JavaScript used for? JavaScript allows websites to perform actions such as refreshing specific parts of a page without reloading the entire website, displaying pop-up messages, or introducing animations into 2D or 3D graphics. Overall, the main impact is on&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/jquery-vs-javascript-why-we-removed-jquery-from-our-templates\/\">JavaScript<\/a> library, with nearly 80% of developers using it.<\/p><p>By reading this article, you will learn what React is and how it can help you create powerful user interfaces. You will also get an overview of the core concepts and components of React, as well as an introduction to the popular React libraries. Finally, you will learn how to set up your development environment and get started using React.<\/p><p><iframe data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/kJgSt9HtBslltp\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p><h2 class=\"wp-block-heading\" id=\"intro\">What is React?<\/h2><p><a href=\"https:\/\/reactjs.org\/\">React.js<\/a> was released by a software engineer working for Facebook &#8211; Jordan Walke in 2011. React is a JavaScript library focused on creating declarative user interfaces (UIs) using a component-based concept. It&#8217;s used for handling the view layer and can be used for web and mobile apps. React&#8217;s main goal is to be extensive, fast,&nbsp; declarative, flexible, and simple.&nbsp;<\/p><p>React is not a framework, it is specifically a library.&nbsp; The explanation for this is that React only deals with rendering UIs and reserves many things at the discretion of individual projects. The standard set of tools for creating an application using ReactJS is frequently called the<strong> stack<\/strong>.<\/p><h2 class=\"wp-block-heading\" id=\"why-use\"><strong>Why use React?<\/strong><\/h2><p>Let&#8217;s take a more detailed look at what sets React library aside against other frameworks and libraries and makes it so powerful and popular for application development.<\/p><h3 class=\"wp-block-heading\" id=\"vdom\"><strong>Virtual Document Object Model (VDOM)<\/strong><\/h3><p>The Document Object Model (<a href=\"https:\/\/reactjs.org\/docs\/react-dom.html\">DOM<\/a>) is an API for valid HTML and well-formed XML documents.<\/p><p>A virtual DOM is a representation of a real DOM that is built\/manipulated by browsers. Advanced libraries, such as React, generate a tree of elements in memory equivalent to the real DOM, which forms the virtual DOM in a declarative way. The virtual DOM is one of the features that make the framework so fast and reliable. <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"510\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-vdom-1024x510.png\" alt=\"react dom\" class=\"wp-image-11534 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-vdom-1024x510.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-vdom-600x299.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-vdom-768x383.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-vdom.png 1200w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/510;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Image source: https:\/\/miro.medium.com\/max\/1400\/1*HyoU7X-SMyT8xQD1PjrRGw.png<\/p><h3 class=\"wp-block-heading\" id=\"jsx\"><strong>JSX&nbsp;<\/strong><\/h3><p>React uses a syntax extension to JavaScript called <a href=\"https:\/\/reactjs.org\/docs\/introducing-jsx.html\">JSX<\/a>. We use it to create &#8216;elements&#8217;.<\/p><pre class=\"wp-block-code\"><code>const element = &lt;1&gt;My React element using JSX&lt;\/1&gt;<\/code><\/pre><p>JSX uses <a href=\"https:\/\/babeljs.io\/\">Babel<\/a> preprocessors to convert HTML-like text in JavaScript files into JavaScript objects to be parsed.<\/p><p>React <a href=\"https:\/\/reactjs.org\/docs\/react-without-jsx.html\">doesn&#8217;t require the use of JSX<\/a>, but most developers find that it makes for a more user-friendly experience within the JavaScript code.<\/p><p>We use JSX to create React components, so this is why it is an important part of ReactJS.<\/p><h3 class=\"wp-block-heading\" id=\"native\"><strong>React Native<\/strong><\/h3><p>React Native is an open-source JavaScript framework for building apps on different platforms, such as iOS, Android, and UPD. It is React-based and gives all its greatness to mobile app development.<\/p><p>React Native uses JavaScript to build the UI of an application but also uses OS-native representations. It allows code to be implemented in OS-native languages (Swift and Objective-C for iOS and Java and Kotlin for Android) for more sophisticated functions.<\/p><h2 class=\"wp-block-heading\" id=\"main-components\"><strong>Main components&nbsp;<\/strong><\/h2><p>ReactJS is a component-based library where components make our code reusable and split our UI into different pieces. Components are divided into two types: Class components and Function components. All React components follow the separation of concerns design principle, meaning that we should separate our application into different sections to address separate concerns.<\/p><h3 class=\"wp-block-heading\" id=\"func-comp\"><strong>Function components<\/strong><\/h3><p>React components work similarly to JavaScript functions. A component takes random inputs, which we call props, and must always return a React element that defines what is intended to be displayed to the user.<\/p><p>The simple method to specify a React component is to define a JavaScript function and return a React element. The React component must always return a React element, or it will throw an error.<\/p><pre class=\"wp-block-code\"><code>function HelloWorld (props){return &#91;h1]The first React component&lt;\/h1&gt;;<\/code><\/pre><p>We&#8217;ve defined a ReactJS component called HelloWorld that takes one prop, which stands for properties and returns a ReactJS element, in this case, a simple h1 element.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/flatlogic.com\/services\/reactjs-development\"><img decoding=\"async\" width=\"589\" height=\"269\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-5.png\" alt=\"\" class=\"wp-image-10449 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 589px; --smush-placeholder-aspect-ratio: 589\/269;\" \/><\/a><figcaption><a href=\"https:\/\/flatlogic.com\/services\/reactjs-development \">https:\/\/flatlogic.com\/services\/reactjs-development <\/a><\/figcaption><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"class-comp\"><strong>Class components<\/strong><\/h3><p>The Class component must have the extends `React.Component` statement. This statement sets up a `React.Component` subclass that allows your component to access `React.Component` functions.<\/p><p>The component must also have a `render()` method, which returns HTML.<\/p><h2 class=\"wp-block-heading\" id=\"benefits\"><strong>Benefits&nbsp;<\/strong><\/h2><p>So the main question is why you should choose ReactJS as a frontend development stack while there are a lot of others. Here are some reasons:<\/p><ul class=\"wp-block-list\"><li><strong>Speedless.<\/strong> React allows developers to use individual parts of their application on both the client and server sides, and any changes they make will not affect the application&#8217;s logic. This makes the development process extremely fast.<\/li><li><strong>Components support. <\/strong>The use of HTML tags and JS codes makes it easy to work with a huge dataset containing DOM. React acts as an intermediary that represents the DOM and helps you decide which component requires changes to get accurate results.<\/li><li><strong>Easy to use and learn. <\/strong>ReactJS is incredibly user-friendly and makes any UI interactive. It also allows you to quickly and efficiently build applications, which is time-saving for clients and developers alike.<\/li><li><strong>SEO Friendly. <\/strong>A common problem complained by most web developers is that traditional JavaScript frameworks often have problems with SEO.&nbsp; ReactJS solves this problem by helping developers navigate different search engines easily through the fact that the ReactJS application can run on the server, and the virtual DOM renders and returns it to the browser as a&nbsp; web page<strong>.<\/strong><\/li><li><strong>One-way Data Binding. <\/strong>One-way data-binding implies that absolutely anyone can trace all the changes that have been made to a segment of the data.&nbsp; This is also one of the reasons that makes React so easy.<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"who-uses\"><strong>Who uses React?<\/strong><\/h2><p>Here is the list of popular ReactJS websites:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/facebook.com\">Facebook<\/a><\/li><li><a href=\"https:\/\/www.atlassian.com\/\">Atlassian<\/a><\/li><li><a href=\"https:\/\/discord.com\/\">Discord<\/a><\/li><li><a href=\"https:\/\/www.ubereats.com\/\">Uber Eats<\/a><\/li><li><a href=\"https:\/\/www.netflix.com\">Netflix<\/a><\/li><li><a href=\"https:\/\/airbnb.com\">Airbnb<\/a><\/li><li><a href=\"https:\/\/www.snapchat.com\/en-GB\">Snapchat<\/a><\/li><li><a href=\"https:\/\/trello.com\/home\">Trello<\/a><\/li><li><a href=\"https:\/\/app.grammarly.com\/\">Grammarly<\/a><\/li><li><a href=\"https:\/\/outlook.live.com\/owa\/\">Outlook.com<\/a><\/li><li><a href=\"https:\/\/www.codecademy.com\/\">Codecademy<\/a><\/li><li><a href=\"https:\/\/www.dropbox.com\/\">Dropbox<\/a><\/li><\/ul><h2 class=\"wp-block-heading\" id=\"first-application\"><strong>How to build your first application on React<\/strong><\/h2><h3 class=\"wp-block-heading\" id=\"create-with-ide\"><strong>Create an app on React.js from the terminal of your IDE<\/strong><\/h3><ol class=\"wp-block-list\"><li>First, you should install the framework package using `npx create-react-app`<\/li><\/ol><p>`npx create-react-app my-app`, where is the `my-app` name of your application.<\/p><ol class=\"wp-block-list\" start=\"2\"><li>The next step is navigating to your new application.<\/li><\/ol><p>`cd my-app`<\/p><ol class=\"wp-block-list\" start=\"3\"><li>The last step is to start your application.<\/li><\/ol><p>`npm start`&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"674\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-4-1-1024x674.png\" alt=\"react\" class=\"wp-image-11537 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-4-1-1024x674.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-4-1-600x395.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-4-1-768x506.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-4-1.png 1303w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/674;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>In the end, you will have only a frontend application without any database and backend, which takes a lot of work to get a full-fledged application.<\/p><h2 class=\"wp-block-heading\" id=\"create-with-flatlogic\"><strong>How to create your app with <\/strong><a href=\"https:\/\/flatlogic.com\/projects\/new\"><strong>Flatlogic Platform<\/strong><\/a><\/h2><p>There are two ways to build your application on the Flatlogic Platform: you can create a simple and clear front-end application, generated by the framework <a href=\"https:\/\/en.wikipedia.org\/wiki\/Command-line_interface\">CLI<\/a>, or the <a href='https:\/\/flatlogic.com\/crud-app'>CRUD<\/a> application with frontend+backend+database.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/flatlogic.com\/users\/sign_in\"><img decoding=\"async\" width=\"589\" height=\"332\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-7.png\" alt=\"\" class=\"wp-image-10452 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 589px; --smush-placeholder-aspect-ratio: 589\/332;\" \/><\/a><figcaption>https:\/\/flatlogic.com\/crud-apps<\/figcaption><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"crud-application\"><strong>Creating a CRUD application with Flatlogic<\/strong><\/h2><h3 class=\"wp-block-heading\"><strong>Step 1. Choose a Tech Stack<\/strong><\/h3><p>In this step, you&#8217;re setting the name of your application and choosing the stack: Frontend, Backend, and Database.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"999\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-1024x999.png\" alt=\"stack\" class=\"wp-image-11538 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-1024x999.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-600x585.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-768x749.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1.png 1296w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/999;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>Step 2. Choose the Starter Kit Template<\/strong><\/h3><p>In this step, you&#8217;re choosing the design of the web app.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"544\" height=\"602\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-6-1.png\" alt=\"\" class=\"wp-image-11539 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-6-1.png 544w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-6-1-542x600.png 542w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 544px; --smush-placeholder-aspect-ratio: 544\/602;\" data-original-sizes=\"(max-width: 544px) 100vw, 544px\" \/><\/figure><h3 class=\"wp-block-heading\"><strong>Step 3. Schema Editor<\/strong><\/h3><figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"1024\" height=\"733\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7-1024x733.png\" alt=\"\" data-id=\"11546\" data-full-url=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7.png\" data-link=\"https:\/\/flatlogic.com\/blog\/what-is-react\/image-7-2\/\" class=\"wp-image-11546 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7-1024x733.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7-600x429.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7-768x550.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-7.png 1308w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/733;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure><p>In this part you will need to know which application you want to build, that is, <a href='https:\/\/flatlogic.com\/custom-crm'>CRM<\/a> or E-commerce, also in this part you build a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Entity%E2%80%93relationship_model\">database schema<\/a> i.e. tables and relationships between them.<\/p><p>If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:<\/p><ul class=\"wp-block-list\"><li>E-commerce app<\/li><li>Time tracking app<\/li><li>Book store<\/li><li>Chat (messaging) app<\/li><li>Blog<\/li><\/ul><p>Deploy your app and get a fully functional CMS for your application.<\/p><h2 class=\"wp-block-heading\" id=\"one-page-application\"><strong>Creating a One-Page application with Flatlogic&nbsp;<\/strong><\/h2><p>You can create a frontend-only app with the Flatlogic Platform. This assumes you will host the back-end somewhere else or won&#8217;t need it at all. To generate a one-page application you don&#8217;t need to enter anything in the terminal of your IDE, you just need to go to the page of creating an application on the <a href=\"https:\/\/flatlogic.com\/projects\/new\">Flatlogic <\/a>website and make only 2 steps:<\/p><h3 class=\"wp-block-heading\"><strong>Step 1. Choose Tech Stack<\/strong><\/h3><p>In this step, you set the name of your application and choose the stack: React as Frontend, No-Backend as Backend.<\/p><figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"1024\" height=\"999\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-1024x999.png\" alt=\"choose stack\" data-id=\"11538\" data-full-url=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1.png\" data-link=\"https:\/\/flatlogic.com\/blog\/what-is-react\/image-5-4\/\" class=\"wp-image-11538 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-1024x999.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-600x585.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1-768x749.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-5-1.png 1296w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/999;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure><h3 class=\"wp-block-heading\"><strong>Step 2. Choose Starter Template<\/strong><\/h3><figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"922\" height=\"548\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-9.png\" alt=\"create React app with flatlogic\" data-id=\"11550\" data-full-url=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-9.png\" data-link=\"https:\/\/flatlogic.com\/blog\/what-is-react\/image-9-2\/\" class=\"wp-image-11550 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-9.png 922w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-9-600x357.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/image-9-768x456.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 922px; --smush-placeholder-aspect-ratio: 922\/548;\" data-original-sizes=\"(max-width: 922px) 100vw, 922px\" \/><\/figure><\/li><\/ul><\/figure><p>In this step, you choose the design of the web app. Since this is a standard one-page application created using the CLI framework, it will have the design of a standard one-page ReactJS CLI application.<\/p><p>Now, finally, you can deploy your app and get a one-page React application, which you can further modify if you&#8217;d like.<\/p>","protected":false},"excerpt":{"rendered":"<p>React is a JavaScript library often credited for its scalability and simple, strict logic. In this article we&#8217;re detailing the pros, the cons, and the best practices of React development.<\/p>\n","protected":false},"author":24,"featured_media":10351,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"React is a JS library for declarative, component-based UIs; uses JSX and a Virtual DOM for efficient rendering.\nNot a framework: it handles the view layer; components can be function or class based.\nStart fast with npx create-react-app; you'll get a frontend-only app. Flatlogic Platform can generate full CRUD stacks.\nWidely adopted (Facebook, Netflix, Airbnb); a 2020 survey cites ~80% developer usage.","flatlogic_facts":[{"text":"React.js was released by Facebook engineer Jordan Walke in 2011.","source":""},{"text":"In 2020, React was the most popular JS library, used by nearly 80% of developers.","source":""},{"text":"React is a library, not a framework; it focuses on rendering UIs only.","source":""},{"text":"Create a React app with: npx create-react-app my-app; cd my-app; npm start.","source":""},{"text":"Flatlogic Platform can generate a CRUD app with frontend, backend, and database.","source":"https:\/\/flatlogic.com\/crud-app"}],"footnotes":""},"categories":[28],"tags":[54,35,321,108],"class_list":["post-10340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-javascript","tag-reactjs","tag-reactjs-development","tag-tech-glossary"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is React? - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"React.js is a popular frontend JavaScript library. We&#039;re detailing its pros and cons, and explaining how you can start working on React.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/what-is-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is React?\" \/>\n<meta property=\"og:description\" content=\"React.js is a popular frontend JavaScript library. We&#039;re detailing its pros and cons, and explaining how you can start working on React.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/what-is-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-18T16:56:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T16:57:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alesia S.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alesia S.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is React? - Flatlogic Blog","description":"React.js is a popular frontend JavaScript library. We're detailing its pros and cons, and explaining how you can start working on React.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/what-is-react\/","og_locale":"en_US","og_type":"article","og_title":"What is React?","og_description":"React.js is a popular frontend JavaScript library. We're detailing its pros and cons, and explaining how you can start working on React.","og_url":"https:\/\/flatlogic.com\/blog\/what-is-react\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-02-18T16:56:33+00:00","article_modified_time":"2023-04-14T16:57:15+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","type":"image\/png"}],"author":"Alesia S.","twitter_card":"summary_large_image","twitter_image":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alesia S.","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/"},"author":{"name":"Alesia S.","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9"},"headline":"What is React?","datePublished":"2022-02-18T16:56:33+00:00","dateModified":"2023-04-14T16:57:15+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/"},"wordCount":1432,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","keywords":["Javascript","React","ReactJS Development","Tech Glossary"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/what-is-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/","url":"https:\/\/flatlogic.com\/blog\/what-is-react\/","name":"What is React? - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","datePublished":"2022-02-18T16:56:33+00:00","dateModified":"2023-04-14T16:57:15+00:00","description":"React.js is a popular frontend JavaScript library. We're detailing its pros and cons, and explaining how you can start working on React.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/what-is-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/post_dark_4-1.png","width":1080,"height":1080,"caption":"What is React - Flatlogic Blog"},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/what-is-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is React?"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9","name":"Alesia S.","url":"https:\/\/flatlogic.com\/blog\/author\/alesya\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/10340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=10340"}],"version-history":[{"count":19,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/10340\/revisions"}],"predecessor-version":[{"id":13956,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/10340\/revisions\/13956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/10351"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=10340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=10340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=10340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}