If you're a JavaScript developer, you've probably heard of React; maybe you even worked with it. The React repository is one of them.the most popular projectsof all time on GitHub, and you can find the framework at theKopfSections of millions of websites, from personal blogs to e-commerce stores to the world's largest websites like Facebook and Airbnb.
React's component-based architecture is exactly what many developers need to build great web apps at scale. Some choose React because it's easy to combine with almost any other tool: React doesn't force you to use functionality you don't need. Thanks to its huge community and many contributors, React is well documented and you can find thousands of sample apps written on the framework all over the web.
But even though React is the go-to for many companies, does that mean it's the right framework for your next project? In this article, we'll take a deep dive into React to help you decide. We'll cover what React is, how it came to be, how it can be used, and some of its pros and cons.
What is react?
Reactis an open source JavaScript library used in front-end development to build applications that consist of reusable components and pieces of code for different parts of your application. Each component is independent and has its own state; For example, a contact form and a button are often different components in React. You can reuse the same component many times on your website. React logic efficiently updates only necessary components when their data changes. It fits wellnode.jsin the backend to build full-stack applications, but as we'll see, React works with a variety of backend languages.
Answer: a short story
React was first released as an open source project by Facebook in 2013. The framework became popular for apps that, like Facebook, need to constantly update their pages to reflect changing data. Facebook named the framework React because when users trigger events that change data, the view "reacts" to these changes by updating components to reflect a current state. To better understand the origins of React, let's examine the architectural design pattern at its inception.
Many of the frameworks built before React follow thisMVC (Model-View-Controller)meeting. However, Reactis is based on a different pattern developed by Facebook, calledFlow. Both application architectures have a three-tier development architecture, but they differ drastically in the way they work.
In an MVC design pattern, themodelmaintains the data and behavior of the application thatOpiniondisplays the model in the user interface and theStandardsIt serves as the interface between the model and the view. A user event tells the controller to activate the model and view, generating a response that is sent to the user.
How does this relate to React? After working with the complexity of the MVC pattern for some time, the Facebook development team decided to make some major changes to the system. These changes led to the architectural design of the Flux application, which they released as an alternative to the MVC architecture. The flow model consists of a dispatcher, one or more stores, and views, which are themselves React components. Let's take a closer look at the Flux framework to get an idea of the logic behind React.
This is how React works
How do the three layers of Flux work together? When a user clicks on an element in one of the components or views, that user event fires the dispatcher. The dispatcher gets its name from its function of dispatching methods to update the state in any given store.
The Dispatcher helper methods namedaction Creator, they support a semantic API that describes all possible changes to the application. You can think of actions as the fourth level of the Flux model: they act as intermediaries between the dispatcher and the view. As soon as the status of the store is updated, the view will show new data.
Flux is designed to support unidirectional data flow, complementing React's structural cycle of going from components to dispatcher to storage and back to components. If you'd like to understand the nuances behind the Flux model, as well as the integration between Flux and React, we recommend checking it out.Detailed description of Facebook.
Reply for mobileLet's quickly move on to React's mobile counterpart,Respond natively. While React was built for desktop web browsers, React Native allows developers to apply the same web framework to mobile devices. The framework accomplishes this by allowing you to write HTML, CSS, and JavaScript, and then render them in the native UI components for your mobile operating system. Because most of the code you write can work across platforms, you can use React Native to develop for both Android and iOS at the same time.
Now let's explore the pros and cons of using React.
Benefits of using React
Perhaps the most important advantages of using React, which set it apart from other front-end frameworks, are its performance, its reusable components, the huge ecosystem that surrounds it, the ease with which React is presented on a server, and the flexible way it is fact, how it integrates with other libraries and frameworks. Let's explore these benefits in more detail.
speedReact's speed on the web largely depends on how the framework interacts with it.vihouse real estate.The virtual DOM is a representation of the realdomsave, which syncs React with the "real" UIreact-domLibrary. React uses the virtual DOM instead of the actual DOM to see when the app has changed; The nodes are then re-rendered in the browser's actual DOM only when necessary. react uses areconciliation algorithmto minimize the number of DOM updates made. Fewer updates means a faster website.
While React pages can be very fast, that doesn't mean that simply using React will necessarily speed up your web application. Still, to take full advantage of the framework's speed potential, you need to pay attention to how information flows within components and how React updates the DOM.
reusable componentsEach component in a React app has its own logic and controls its own rendering. These components can be reused anywhere you need them. For example, if you need to add ten buttons to your web application, you can write just one component and use it with different options to create all the buttons you need.
Component reuse makes it easy to develop, maintain, and scale your applications. If you change the button component, all buttons are updated because they are just instances of that component. Component reuse reduces errors and saves development time while achieving a consistent look and feel throughout the web application.
community and librariesThe ecosystem surrounding React is supportive and resourceful. It's easy to find training content, React samples, and articles written by experienced developers and someone to answer your niche Stack Overflow question. Additionally, there are a large number of pre-built component libraries and development tools that work with the React environment.
possibility F**Ö**r server side renderingServer Side Rendering (SSR) is a common practice where you render an application on the server that would normally be a single page application on the client side, and then send that fully loaded application to the client on its first request. Using SSR with React speeds up application loading: users don't have to wait for JavaScript to load before viewing a website. Once a page is submitted, the client's JavaScript bundle can take over and the application can function normally. However, if your application is heavier, using SSR can increase response time and size. here is adetailed summarydel proceso React SSR.
react c**and combined with other frameworks** React's flexibility extends to interoperability with other library frameworks. With proper and careful configuration, you can embed React in apps written primarily with other libraries, or integrate other libraries into apps written primarily in React. Also, React supports incremental migration, so developers who want to deploy the library in stages can easily start with just a small component. MoneyThis articleyoIntegrationwith libraries describing some of the best practices for using React with other popular frameworks.
Now, before you get too excited about the benefits of React, let's cover some potentially negative aspects of using it in your projects.
Disadvantages of using React
As revolutionary as React was, it still has its downsides. We'll briefly touch on two of the most important ones: the speed with which new versions come out and the massive and complex tools available to React developers.
Fast developing TempoFrom the constant updates to React to the many add-on libraries that are constantly being built to support it, React technologies accelerate so quickly that it can be hard to keep up. Although the documentation is carefully updated, React's rapid development means it's easy to get stuck in an older version.
This might not sound like a problem, but constantly updating the library, especially with major changes between versions, can cost your development team a lot of time. This is especially relevant when using React with other libraries and frameworks.
Complex development tools.React has a full set of design and debugging tools, but it can be difficult to navigate through them or even know which ones to use. We recommend using a browser extension calledRespond to developer toolsWith it, you can browse React components and manage their hierarchies in the virtual DOM. But beyond that, figuring out which tools best suit your application and programming style and then learning them can be a tedious process.
Now that you're familiar with the ins and outs of using React, let's take a look at some use cases that fit well within the framework.
What is React for?
As you've probably figured out by now, React is used to create interactive user interfaces. The library is mainly used for user interfaces in web applications, and its cousin React Native supports mobile applications. React often appears on static websites and has a permanent place in what is known asJAMstack(short for "JavaScript, API, and Markup"), a set of tools and concepts for creating static websites that do not require a web server to function. Here are some examples of projects where React might be a good fit.
Web UIWeb user interfaces are the be all and end all of React. Use it in the frontend of web apps of all sizes, from your parents' food blog to the next Airbnb. React shines on complex user interfaces with lots of reusable components, but its speed advantages apply to all kinds of websites.
mobile appsWith React Native, you can build Android and iOS apps just by writing regular React code. By using React Native, the two mobile platforms can generally share most of the codebase, and you can add native extensions for each platform.
static websitesThe large number of API libraries and tools for React makes it a great solution for more complex static websites where some of the content is obtained via an API.
So while we can think of React as just another front-end framework, it's the features and variety of use cases that set it apart from other frameworks that achieve the same goal.
frequent questions
Many questions arise when using a framework as complicated and extensive as React. We will go through some of them below. For more detailed questions about React, we recommend taking a look at the FAQ section.The reaction glossary.
Can I use React with a PHP backend?Absolutely! Although a node/express server is the most common backend for React applications, PHP and other backend technologies can certainly be a substitute. here is aBitsrc tutorial to create aContact Formwith React and PHP, and here's a more general oneguideby DavisonProon the use of both languagesin a project. And here are some examples from Github using React andwalk,rosa, yRub.
¿Google React lo usa?Google is developing two competing technologies:Polymerand especiallySquare. While cross-functional teams may be using Google React, the company has its own massive Angular infrastructure responsible for most of its front-end functionality. However, some notable companies using React are Instagram, Netflix, Whatsapp, Dropbox, Airbnb, Microsoft, and Slack.
What is the difference between React and React Native?React Native doesn't use HTML or CSS, but instead provides components that work like typical HTML elements and an animation API. (In the web world, thanks to CSS animations, such an API is redundant.) Another difference is that if you start a new project with React, you'll probably choose a package likewebpackoBabeland then determine which modules you need to bundle for your project. By contrast, ReactNative offers everything you need; You probably won't need any other dependencies. Some additional differences are explainedin this medium post.
In this article, we talk about Reactorigenand history, and how it now impliesDevelopment for mobile applicationsWe also discuss the key benefits and challenges, highlighting performance, strong community, and flexibility that come at the expense of other libraries for building a full-stack application and keeping up with a fast pace of development.
For more information on React, we recommend ourReaction Code ExamplesyReact's own documentation..