{"id":4384,"date":"2015-04-15T04:26:30","date_gmt":"2015-04-15T04:26:30","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4384"},"modified":"2015-04-15T18:39:52","modified_gmt":"2015-04-15T18:39:52","slug":"getting-started-with-react","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/getting-started-with-react\/","title":{"rendered":"Getting started with React"},"content":{"rendered":"

React<\/a> is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)<\/a>“. React focuses on component based development where each components has its own life cycle. Once of exciting behavior of React is its unidirectional\u00a0data flow from Parent to child components. React is different than AngularJs <\/a>in such a way that React passes data in unidirectional however in angularJs data must be available to $scope variable (bidirectional binding). Reusable components in AngularJs should be created as Angular directive however in React every component can be reused.<\/p>\n

\"React<\/a>
React Javascript library by Facebook<\/figcaption><\/figure>\n

In this article, I will show very simple Hello world program using React framework.<\/p>\n

\r\n<html>\r\n\t<head>\r\n\t\t<script src="http:\/\/fb.me\/react-0.13.1.min.js"><\/script>\r\n\t\t<script src="http:\/\/fb.me\/JSXTransformer-0.13.1.js"><\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id="main"><\/div>\r\n\t\t<script type="text\/jsx">\r\n\t\t\tvar HelloWorld = React.createClass({\r\n\t\t\t\trender : function(){\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<h1> Hello World<\/h1>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t\tReact.render(<HelloWorld\/> , document.getElementById('main'));\r\n\t\t<\/script>\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n
Output :<\/strong> Hello World in h1 tag.<\/p>\n
Explanation :<\/strong>
\nAs you can see in above code snippet, we have used two javascript files “React” and “JSXTransformer (JSX)”. It is not mandatory to import JSX however recommended to use it so that HTML code can be written very easily inside methods. As it can be seen in return statement, we are creating h1 tag with Hello World content and this representation is possible only because of JSX.<\/p>\n
We have created component named “HelloWorld”. it is very important to note that component name should start with uppercase. Internally reacts assumes every lowercase tag as standard HTML component and uppercase tag as custom component.<\/p>\n
After creation of “HelloWorld” component, it is rendered in place of div component with id “main”.<\/p>\n","protected":false},"excerpt":{"rendered":"
React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)“. React focuses on component based development where each components has its own life cycle. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[19],"tags":[35,95,126,306],"class_list":["post-4384","post","type-post","status-publish","format-standard","hentry","category-webtech","tag-angularjs","tag-facebook","tag-javascript","tag-react"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3675,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/getting-started-with-angularjs\/","url_meta":{"origin":4384,"position":0},"title":"Getting Started with AngularJs","author":"Jitendra","date":"February 15, 2014","format":false,"excerpt":"AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"AngularJS by Google","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/AngularJS-by-Google-300x84.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3917,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-typeahead-directive-in-angularjs\/","url_meta":{"origin":4384,"position":1},"title":"Ajax based AutoComplete \/ TypeAhead Directive in AngularJS","author":"Jitendra","date":"July 15, 2014","format":false,"excerpt":"Previously we already discussed below Auto Complete components: Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net AutoComplete Component in Visualforce using JQueryUI In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"TypeAhead Demo using AngularJs","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3745,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/","url_meta":{"origin":4384,"position":2},"title":"Table with Sorting and Searching using AngularJS","author":"Jitendra","date":"February 22, 2014","format":false,"excerpt":"I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs. Output will look something like this : Prerequisite Libraries : UnderscoreJs Bootstrap CSS AngularJs Complete Html Code : [html] 
\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching and Sorting in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-and-Sorting-in-Table-using-AngularJS-300x128.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3951,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-salesforce-query-builder-in-node-js-and-angularjs-using-salesforce-rest-api-and-oauth2\/","url_meta":{"origin":4384,"position":3},"title":"Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button","author":"Jitendra","date":"August 18, 2014","format":false,"excerpt":"In this post, we will be creating a\u00a0Salesforce Query (SOQL) Builder.\u00a0It uses Google's Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2. Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"SOQL Builder Using Node.js AngularJs Salesforce REST API on Heroku","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":4384,"position":4},"title":"Lightning Web Component Event Handling – Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3751,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/pagination-and-sorting-of-data-table-using-angularjs\/","url_meta":{"origin":4384,"position":5},"title":"Pagination, Searching and Sorting of Data Table  using AngularJS","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"We have already discussed \"Basics of AngularJS\" and \"Simple Searching and Sorting\". In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard \"OrderBy\" filter\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching Sorting and Pagination in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS-300x156.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4384"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4384\/revisions"}],"predecessor-version":[{"id":4391,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4384\/revisions\/4391"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}