Introduction to react.js

20 comments
React is a JavaScript framework built at Facebook, it was built to answer the question "How should we structure JavaScript applications".
There are a lot of JavaScript frameworks that try to answer this question, most of them are MVC based (or MVVM or MVW) - basically they're all based around models - which are just observable objects that have some events api that allows you to subscribe to some changes on that object. So developers set up bi-directional data-binding that allow you to subscribe to changes on you r model, so whenever something changes you can mutate and update your view.

React is a JavaScript library for building user interfaces, you get all the good parts of a complete render, but without the downsides such as performance and loss of data.

At the heart of react is, declarative components - describing what components look at at any point in time

Initial Render

There is no explicit data binding, in react we just define one render function, and the purpose of this render function is to describe what your view looks like in any point in time. It returns a representation of your view. We recursive call render to build up this hierarchy. When we want to generate the mark-up of this representation for the first time, we take the representation and iterate over it generate a string and inject it into the document. This does something called two-pass rendering which is generating the string, then later, after the string is injected into the document we attach the event handlers at the top-level, which exposes some really interesting opportunities, since your generating your string somewhere separate from where your hooking up your events, you can render on the server.

Update Rendering

Instead of mutation for updating react uses a process called reconciliation, the purpose of this is to keep you UI up-to-date as your data changes, automatically updates your views and DOM. The render function that does the initial rendering and returns a string representation of what our components should look like at that point in time, and react compares that with the current DOM and finds all the differences, based on those differences creates some DOM representations of just the relevant parts and updates the view.

Building DOM Representations

Since the HTML is defined in JavaScript it would get a bit hard to understand for larger pages with a lot of nesting, there would be curly braces everywhere, so for that reason JSX syntax is used to define the elements. This is very similar to other templating engines and uses ordinary HTML-type syntax.




This post is based on information given by Tom Occhino from Facebook on his series about react.js

20 comments :

  1. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
    iOS App Development Company
    Android App Development Company
    Mobile App Development Company

    ReplyDelete
  2. A great way to learn about Reactjs. Your content is very useful. Thanks for sharing..

    ReplyDelete
  3. It is very useful information about React js. This is the place for learner and glad to be here in this blog Thank you React js Training in Hyderabad
    React js course in Hyderabad

    ReplyDelete
  4. Always ready to appreciate innovative thoughts and iam very glad to be part in this blog very useful for vistors.React js Training in Hyderabad
    Enroll

    ReplyDelete
  5. Excellent article! It is very helpful for me. keep sharing such quality post.
    Full Stack online Training
    React JS Training
    Node JS Training

    ReplyDelete
  6. Nice job keep it up visit good reactjs resource Reactjs Tutorial

    ReplyDelete
  7. An astounding web diary I visit this blog, it's inconceivably magnificent. Strangely, in this current blog's substance made point of fact and sensible. The substance of information is instructive.
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training
    oracle Fusion Technical online training

    ReplyDelete

  8. Thanks for the great article this is very useful info thanks for the wonderful post. Best Devops Training Institute

    ReplyDelete
  9. Thanks a lot for sharing us about this update. Hope you will not get tired on making posts as informative as this. 

    ReactJS Online Training

    ReplyDelete
  10. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

    Tableau online training

    ReplyDelete
  11. Nice information, Thanks for sharing informative information about ReactJs. If you want to know more or from the beginning. Get best React Js course & training here.

    ReplyDelete
  12. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well. reactjs training in Hyderabad

    ReplyDelete

  13. thanks for the shared such a informative information.

    Thanks
    Cpa offers

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete