A javascript library for building user interfaces. It was developed at Facebook in 2011 and currently it's the most popular javascript library for building user interfaces. It is also an open source contribution where you can contribute your code with millions of developers.
When Building Application with react we build a bunch of independent isolated and reusable components and build them to compose complex user interface.
A component is typically implemented as a javascript class that has some state and render method.
A javascript library for building user interfaces. It was developed at Facebook in 2011 and currently it's the most popular javascript library for building user interfaces. It is also an open source contribution where you can contribute your code with millions of developers.
When Building Application with react we build a bunch of independent isolated and reusable components and build them to compose complex user interface.
A component is typically implemented as a javascript class that has some state and render method.
A Simple Component
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
root.render(<HelloMessage name="Taylor" />);
SPA VS MPA
When we talk about react and all's about angular and vue as a side note we also have to keep in mind that we can essentially both two kinds of web applications with all these libraries and frameworks we can build a single page application or a multi page application.
What is Single Page Application?
Single page or SPA's load the entire content of site within a single page. The single page is usually index.html file. This means that once the main page is loaded, clicking on links will not reload the entire page but simply update sections within the page itself. The popularity of SPA-based web apps has taken off based on the facts that they allow us to deliver rich, dynamic and fast loading content that mimics that of a desktop applications.
A single application we only get back one single HTML file by the server and we back this fall at the first time the user wizards example.com thereafter everything is managed with javascript with react the entire page consists of components which are rendered and handled by javascript.
What is Multi Page Application?
In multi page application we get back multiple HTML pages where each page has the content for a given router and URL we visited for example.com an example that come slash users we get back two different pages that's important now on multipage applications we might all use react.
In comparison to Single-Page Applications, MPAs look large and complicated to develop. Looking for examples, just think about Amazon, eBay, or any other complex site with multiple pages.
What is Angular?
Angular JS is leading framework for building javascript heavy single page based web applications. In addition to the increases in speed and performance, Angular allows us to write much more succinct code then using plain javascript. We are able to if conditions, loops and local variables directly with our templates.
We are also able to track, process and display changes from the user using the magic of data-binding.
Angular was developed with three concepts in mind.
1) Make it modular.
2) Make it testable.
3) Make it maintainable.
Libraries VS Framework
A library is a collection of functions developers can call at will and still control the flow of the software application. The operations performed to be performed by libraries are precisely and specifically defined.
A framework is a structure in which the application defines the content of the operation by asking the developer to fill in the spaces. The framework defines the concept with the functionality itself is defined by the developer with the end-user in mind.
Frameworks and libraries are code written by third parties to solve regular/common problems or to optimise performance. A key difference between the two is the inversion of control. When using a library, the control remains with the developer who tells the application when to call library functions. When using a framework, the control is reversed, which means that the framework tells the developer where code needs to be provided and calls it as it requires.
Dom vs Virtual DOM
Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.
The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM, because… Well, nobody knows why :).
So, whenever we want to dynamicly change the content of the web page, we modify the DOM
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
First of all - the Virtual DOM was not invented by React, but React uses it and provides it for free.
The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.
There’s no big difference between the “regular” DOM and the virtual DOM. This is why the JSX parts of the React code can look almost like pure HTML:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
Oneway Data Binding vs Two way
One-way data-binding means the data flows in a single direction so that whenever the data changes in a component, it also updates the view with new data.
Have you seen in the above image the data property we defined inside the app.component.ts file is connected to the html template by using syntax.
Now if we change the title property inside app.component.ts file our view also updates with the new change this is called one-way data binding.
Two-way data binding means data flows in both directions, it means any change happens in the view updates the data and any change happens in the data updates the view.
In angular, by using ngModel directive we can create two-way data binding.
In the above image, we have connected the data property title to the input element by using ngModel directive.
Now, if we change the element value in the view it updates the title property. similarly, if we change the title property inside the component file it also the updates the element value.
Top comments (0)