This blog site has been archived. Go to react.dev/blog to see the recent posts.
There are a lot of JavaScript MVC frameworks out there. Why did we build Reactand why would you want to use it?
React isn’t an MVC framework.
React is a library for building composable user interfaces. It encouragesthe creation of reusable UI components which present data that changes overtime.
React doesn’t use templates.
Traditionally, web application UIs are built using templates or HTML directives.These templates dictate the full set of abstractions that you are allowed to useto build your UI.
React approaches building user interfaces differently by breaking them intocomponents. This means React uses a real, full featured programming languageto render views, which we see as an advantage over templates for a few reasons:
- JavaScript is a flexible, powerful programming language with the abilityto build abstractions. This is incredibly important in large applications.
- By unifying your markup with its corresponding view logic, React can actuallymake views easier to extend and maintain.
- By baking an understanding of markup and content into JavaScript, there’sno manual string concatenation and therefore less surface area for XSSvulnerabilities.
We’ve also created JSX, an optional syntaxextension, in case you prefer the readability of HTML to raw JavaScript.
Reactive updates are dead simple.
React really shines when your data changes over time.
In a traditional JavaScript application, you need to look at what data changedand imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,which provides a declarative interface via directives and data binding requiresa linking function to manually update DOM nodes.
React takes a different approach.
When your component is first initialized, the render method is called,generating a lightweight representation of your view. From that representation,a string of markup is produced, and injected into the document. When your datachanges, the render method is called again. In order to perform updates asefficiently as possible, we diff the return value from the previous call torender with the new one, and generate a minimal set of changes to be appliedto the DOM.
The data returned from render is neither a string nor a DOM node — it’s alightweight description of what the DOM should look like.
We call this process reconciliation. Check outthis jsFiddle to see an example ofreconciliation in action.
Because this re-render is so fast (around 1ms for TodoMVC), the developerdoesn’t need to explicitly specify data bindings. We’ve found this approachmakes it easier to build apps.
HTML is just the beginning.
Because React has its own lightweight representation of the document, we can dosome pretty cool things with it:
- Facebook has dynamic charts that render to
<canvas> instead of HTML. - Instagram is a “single page” web app built entirely with React and
Backbone.Router. Designers regularly contribute React code with JSX. - We’ve built internal prototypes that run React apps in a web worker and useReact to drive native iOS views via an Objective-C bridge.
- You can run Reacton the serverfor SEO, performance, code sharing and overall flexibility.
- Events behave in a consistent, standards-compliant way in all browsers(including IE8) and automatically useevent delegation.
Head on over to https://reactjs.org to check out what we havebuilt. Our documentation is geared towards building apps with the framework,but if you are interested in the nuts and boltsget in touch with us!
Thanks for reading!
FAQs
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
What is the main purpose of ReactJS? ›
What is React JS used for? ReactJS's primary goal is to create User Interfaces (UI) which enhance the speed of programs. It makes use of virtual DOM (JavaScript object), which enhances the app's efficiency. Quicker than the standard DOM is the JavaScript virtual DOM.
Why do we need to build a React app? ›
React is a popular JavaScript framework used to build front-end applications. Developed by Facebook, React has made its strong presence in the dev community to build fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax – JSX.
Why did Facebook build React? ›
Facebook created ReactJS to address its challenges with its growing application size and the need for a more efficient way to build and maintain dynamic user interfaces.
Why did React become so popular? ›
One of the primary reasons for React's popularity is its ease of use. React uses a component-based architecture, which makes it easy to break down complex user interfaces into smaller, reusable parts. Developers can easily build and maintain these components, which saves time and reduces the risk of errors.
Why was React created in the first place? ›
React is a powerful abstraction that allows us to write reusable, declarative components. Whereas before, we were writing static HTML pages, spending a lot of time manipulating the browser with imperative JavaScript code, or writing the same repetitive components across multiple files.
What is ReactJS mainly for? ›
React. js, a frontend-focused JS library used mainly for building single-page and multi-page interfaces, is one of the most popular programming technologies worldwide, and the number of companies reaching out to it proves its solid position.
What is the main advantage of using React? ›
We can develop new features in React without re-writing the existing code. It can also render on the server using Node and power mobile apps using React Native. So we can create IOS, Android, and Web applications simultaneously. In conclusion, extensive code reusability is supported by React.
Why do we prefer ReactJS? ›
React shines as a dominant force in web development, and for good reason. Its modular component-based architecture streamlines workflows, enabling efficient and scalable development. The innovative Virtual DOM technology delivers unparalleled performance, ensuring lightning-fast rendering and smooth user experiences.
What is the purpose of create-react-app? ›
Create React App CLI tool removes all that complexities and makes React app simple. For this, you need to install the package using NPM, and then run a few simple commands to get a new React project. The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly.
React promotes the creation of reusable components, saving time and programmers' effort by eliminating the need to write repetitive code for the same features. Changes made to a particular component do not affect other parts of the application, ensuring a modular and maintainable codebase.
Why everyone is using React? ›
React is Easy to Grasp
1 in software development is simplicity and avoiding complexity at all costs, then React JS takes the biscuit. One of the top benefits of React is how easy it is to grasp, particularly if you already are a pro at JavaScript.
Why build a website with React? ›
React is used for building user interfaces for websites and web applications. It allows developers to create reusable components that make up the UI. React. js makes it easier to build complex, interactive websites and web apps.
Why was React introduced? ›
Back in 2011, Facebook had a massive user base and faced a challenging task. It wanted to offer users a richer user experience by building a more dynamic and more responsive user interface that was fast and highly performant. Jordan Walke, one of Facebook's software engineers, created React to do just that.
Why does Netflix use ReactJS? ›
We decided to use React because its one-way data flow and declarative approach to UI development make it easier to reason about our app. Obviously, we'd need our own flavor of React since at that time it only targeted the DOM. We were able to create a prototype that targeted Gibbon pretty quickly.
What was React created for? ›
React is a JavaScript library for building user interfaces that was developed by Facebook. It was released in 2013 and has since become one of the most popular tools for building web applications. React was created by Jordan Walke, a software engineer at Facebook.
What problem did React solve? ›
Traditionally, web development involved manipulating the DOM directly with JavaScript. This approach can be cumbersome, error-prone, and difficult to scale. React solves these problems by providing a more efficient and organized way to build UIs.
What is the main idea of React? ›
React is a JavaScript library for building web app user interfaces. It's open-source and developed by Facebook. With React, you can create a quick and scalable web app by breaking the UI down into smaller components.
What is React mainly used to build? ›
React. js, a frontend-focused JS library used mainly for building single-page and multi-page interfaces, is one of the most popular programming technologies worldwide, and the number of companies reaching out to it proves its solid position.
