React is a JavaScript library developed by Facebook. ReactJS focuses on,
- UI : Use React as the V in MVC
- Virtual DOM : DOM diff implementation for high performance
- Data flow : Offers reactive data flow
React is all about building reusable components. (Why Facebook built react). It doesn't manipulate DOM unless it needs to (check react displaying data example). It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you. React components can only render a single root node. If you want to return multiple nodes they must be wrapped in a single root. Why React's Virtual DOM concept is more efficient than dirty model checking. Also check how Virtual DOM and diffing works in React.
Here's a simple hello world example. Here, React.createClass will create a Component. (Read more)
Why use Reactjs
var App = React.createClass({
render: function () {
return React.DOM.h1(null, "Hi there");
}
});
React.render(App(), document.body);
JSX
React believes components are the right way to separate concerns rather than using templates. JSX enables you to create JavaScript objects using HTML syntax.
const element = <h1>Hello, world!</h1>;
JSX is similar to HTML, but not exactly the same. See JSX Gotchas and JSX in depth. You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.
JSX elements gets converted to react elements with Babel. Same as what you create using React.createElement method. Therefore you can only have single root tag for a JSX statement.
React can either render HTML tags (strings) or React components (classes). React JSX transforms from an XML-like syntax into native JavaScript.
JSX elements gets converted to react elements with Babel. Same as what you create using React.createElement method. Therefore you can only have single root tag for a JSX statement.
React can either render HTML tags (strings) or React components (classes). React JSX transforms from an XML-like syntax into native JavaScript.
Components and Props
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Loading Ajax data using JQuery
In Load Initial Data via AJAX example, you can see how to load data from ajax call and show them in the browser. We use JQuery here to make things easier. Typical error you'll get when implementing is mountNode is not defined error.React integration with C# and ASP.NET MVC
You can use ReactJS.NET to integrate your .NET application easily. Take a look at this sample tutorial.What is Flux
Architecture Facebook uses internally when working with react. It is now recommended to use Redux over Fluxhttps://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
http://facebook.github.io/flux/docs/overview.html
http://facebook.github.io/flux/
https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&t=621&v=nYkdrAPrdcw
Why use Redux
Redux has many benefits. Simply Redux is a state management tool. It is a very lightweight library which can be used with many JavaScript frameworks.
Simply Redux keeps state of your application in a store. Each component can access any state that is needed from the store. So why use Redux? As React is based on components, these needs to communicate with each other. Redux helps you by keeping it in a central location.
Redux has three building parts: actions, store and reducers.
- Actions are events: They are the only way you can send data from your application to your Redux store. The data can be from user interactions, API calls or even form submission.
- Reducers: Reducers are pure functions that take the current state of an application, perform an action and returns a new state.
- Store: The store holds the application state. There is only one store in any Redux application.
