Introduction to react.js

Alicia Sykes 13:37 35 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

35 comments :

  1. Unknown28 July 2017 at 13:01

    Nice post. This is a great way for a simple quick start with ReactJS. I’m looking forward to read more of your work.

    Best Regards,
    ReactJS Online Training in India
    ReactJS Training in Hyderabad
    ReactJS Online Training in Hyderabad
    ReactJS Online Training
    Learn ReactJS Online
    ReactJS Training
    ReactJS Online Course
    React JS Online Training
    ReactJS Training Institutes in Hyderabad
    ReactJS Training Hyderabad
    ReactJS Institutes in Hyderabad
    ReactJS Classroom Training in Hyderabad
    Best ReactJS Training in India
    Learn ReactJS Course in Hyderabad
    CourseIng

    ReplyDelete
  2. Unknown6 December 2017 at 04:27

    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
  3. Unknown27 February 2018 at 13:26

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

    ReplyDelete
  4. Unknown20 April 2018 at 12:55

    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
    Best React js Online Training
    React js Training in Ameerpet
    React js Online Training
    React js course in Hyderabad

    ReplyDelete
  5. chenna23 April 2018 at 11:33

    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
  6. Unknown3 May 2018 at 11:51

    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
  7. sudam11 January 2019 at 11:40

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

    ReplyDelete
  8. Unknown15 January 2019 at 18:14

    Nice job keep it up visit good reactjs resource Reactjs Tutorial

    ReplyDelete
  9. Augurs Technologies Pvt Ltd.15 March 2019 at 08:21

    Best Website Designing and Development Company in London,
    React JS Developer in London,
    React Native Developers in UK,
    Hire Mean Stack Developer London UK,
    Hire Hybrid App Developers in UK,

    ReplyDelete
  10. shivani26 March 2019 at 11:34

    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
  11. anirudh8 April 2019 at 13:32


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

    ReplyDelete
  12. sasireka28 June 2019 at 07:12

    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
  13. jayapriya2 July 2019 at 13:00

    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
  14. Urvi4 July 2019 at 10:57

    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
  15. sonusingh131319 July 2019 at 08:05

    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
  16. MindtechAffiliates25 July 2019 at 09:39


    thanks for the shared such a informative information.

    Thanks
    Cpa offers

    ReplyDelete
  17. Zinavo-Web Design | Web Development | SEO | Mobile Apps | ERP/CRM27 July 2019 at 11:56

    Your post is just outstanding! thanks for such a post,its really going great and great work Website Designing Companies in Bangalore | Website Designing Company in Bangalore | Website Designers in Bangalore | Web Design & Development Company in Bangalore

    ReplyDelete
  18. Venkatesh CS8 August 2019 at 03:31

    This comment has been removed by the author.

    ReplyDelete
  19. Venkatesh CS8 August 2019 at 03:31

    Excellent Blog. Thank you so much for sharing.
    best react js training in chennai
    react js training in Chennai
    react js workshop in Chennai
    react js courses in Chennai
    react js training institute in Chennai
    reactjs training Chennai
    react js online training
    react js online training india
    react js course content
    react js training courses
    react js course syllabus
    react js training
    react js certification in chennai
    best react js training

    ReplyDelete
  20. Ramakrishna31 August 2019 at 11:59

    I really enjoyed your blog Thanks for sharing and it was very usefully to me
    ReactJs Online Training
    ReactJs Training
    ReactJs Training Institute
    ReactJs Training in Hyderabad
    ReactJs Training in Ameerpet
    ReactJs Training in Hyderabad
    Best ReactJs Training in Hyderabad

    ReplyDelete
  21. Priya21 September 2019 at 10:31

    very nice blog thanks for the valuable information
    Full Stack online Training
    Full Stack Training
    Full Stack Developer Online Training

    ReplyDelete
  22. adhi2 October 2019 at 10:18

    wow it's very nice and excellent. very amazing blog. i really impressed your article.it's very different and useful.thanks for it.web design company in velacheryweb design company in chennai

    ReplyDelete
  23. BrnInfotech11 October 2019 at 12:04

    Thank you for your post. This is useful information.
    Here we provide our special one's.
    iphone job training center
    iphone training classes in hyderabad
    iphone training institute in hyderabad
    apple ios training institutes in Hyderabad
    iphone app development in hyderabad

    ReplyDelete
  24. Asif Sarkar29 November 2019 at 05:17

    Really Good blog post. Provided a helpful information. I hope that you will post more updates like this. seo services in kolkata | seo company in kolkata | seo service provider in kolkata | seo companies in kolkata | seo expert in kolkata | seo service in kolkata | seo company in india | best seo services in kolkata | digital marketing company in kolkata | website design company in kolkata

    ReplyDelete
  25. meritstep Technology6 December 2019 at 09:02

    Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training

    ReplyDelete
  26. python training in vijayawada25 February 2020 at 04:01

    This is a wonderful article, Given so much info in it, Thanks for sharing. CodeGnan offers courses in new technologies and makes sure students understand the flow of work from each and every perspective in a Real-Time environmen python training in vijayawada. , data scince training in vijayawada . , java training in vijayawada. ,

    ReplyDelete
  27. Webgurukul IT Training Institute2 March 2020 at 09:51

    Very informative share read here and don't left this fact without reading as it gives best understating to ReactJS. Techie peoples must read.
    Web design classes in nagpur

    ReplyDelete
  28. Astrum Infotech10 April 2020 at 07:43

    Astrum InfoTech Agency is the Best Digital Marketing Company in Delhi, They help to generate the profit and visitors traffic on website. If you are looking for grow the online visibility of your business then please contact us. We Offer Best Digital Marketing Service like SEO Service, SMO Service, PPC Service, Facebook Marketing Services, Email marketing service, graphic design services, website designing service and website development service etc.

    ReplyDelete
  29. subham kumar16 April 2020 at 19:35

    Well explained tutorials. There is also good reactjs tutorials click here

    ReplyDelete
  30. DevOps6 May 2020 at 13:11

    Thanks for posting such a Useful information .You have done a great job.
    React JS Online training

    React JS training in hyderabad

    ReplyDelete
  31. varsha20 May 2020 at 09:51

    This post is much helpful for us. This is really very massive value to all the readers and it will be the only reason for the post to get popular with great authority.
    AWS training in chennai | AWS training in anna nagar | AWS training in omr | AWS training in porur | AWS training in tambaram | AWS training in velachery

    ReplyDelete
  32. lavanya5 June 2020 at 08:27

    Really you have done great job,There are may person searching about that now they will find enough resources by your post
    Software Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery

    ReplyDelete
  33. shankarjaya21 July 2020 at 14:41

    Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    Salesforce Training in Chennai | Certification | Online Course | Salesforce Training in Bangalore | Certification | Online Course | Salesforce Training in Hyderabad | Certification | Online Course | Salesforce Training in Pune | Certification | Online Course | Salesforce Online Training | Salesforce Training

    ReplyDelete
  34. keerthana22 July 2020 at 06:08

    I am really happy with your blog because your article is very unique and powerful for new reader.Prefer to study this kind of material. Nicely written information in this post,the quality of content is fine and the conclusion is lovely. Things are very open and intensely clear explanation of issues. PHP Training in Chennai | Certification | Online Training Course | Machine Learning Training in Chennai | Certification | Online Training Course | iOT Training in Chennai | Certification | Online Training Course | Blockchain Training in Chennai | Certification | Online Training Course | Open Stack Training in Chennai |
    Certification | Online Training Course

    ReplyDelete
  35. radhika7 August 2020 at 06:47

    Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    AWS training in Chennai

    AWS Online Training in Chennai

    AWS training in Bangalore

    AWS training in Hyderabad

    AWS training in Coimbatore

    AWS training

    ReplyDelete

Subscribe to: Post Comments ( Atom )