<h3><span style="color: #333399;"><strong>What Is React?</strong></span></h3>
<p>React is an open source <strong><span style="color: #008000;">Javascript</span></strong> library for building fast and interactive applications.This library is mainly used for building the UI or view of our application.The beauty of react is that because its just the view it doesn’t necessarily mean that it’s only for web applications.</p>
<p>It can be used with mobile devices to build native apps.</p>
<p>You can also build desktop apps , virtual reality apps with react.</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="OEUOndF_WRM" title="ReactJS Tutorial For Beginners - 1 - ReactJS Introduction"><a placeholder href="https://youtu.be/OEUOndF_WRM"><img src="https://i.ytimg.com/vi/OEUOndF_WRM/hqdefault.jpg" layout="fill" object-fit="cover" alt="ReactJS Tutorial For Beginners - 1 - ReactJS Introduction"></a></amp-youtube></p>
<p> ;</p>
<h3><span style="color: #333399;"><strong>Components</strong></span></h3>
<p>React follows component based approach which lets you split your entire application into encapsulated parts which can then be composed together to form complex UI. <em><strong>In particular we can say</strong>,</em> <span style="color: #008000;"><em><strong>A component is a function or a Class which optionally accepts input (as props) and returns a React element.</strong></em></span></p>
<h4><span style="color: #333399;"><strong>Functional Component</strong></span></h4>
<p><span style="color: #0000ff;"><strong>Const MyComponent = (props)=>;{</strong></span></p>
<p><span style="color: #0000ff;"><strong>Return(</strong></span></p>
<p><span style="color: #0000ff;"><strong><;ElementOrComponent…/>;</strong></span></p>
<p><span style="color: #0000ff;"><strong>);</strong></span></p>
<p><span style="color: #0000ff;"><strong>}</strong></span></p>
<h4><span style="color: #333399;"><strong>Class Component</strong></span></h4>
<p><span style="color: #0000ff;"><strong>Class MyComponent extends React.Component{</strong></span></p>
<p><span style="color: #0000ff;"><strong>Render(){</strong></span></p>
<p><span style="color: #0000ff;"><strong>Return( </strong></span></p>
<p><span style="color: #0000ff;"><strong><;ElementOrComponent…/>;</strong></span></p>
<p><span style="color: #0000ff;"><strong>);</strong></span></p>
<p><span style="color: #0000ff;"><strong>}</strong></span></p>
<h3><span style="color: #333399;"><strong>One way data flow</strong></span></h3>
<p>In react there is one way data flow that means data always flow from <strong>top to bottom</strong>. Now to understand this look at this tree like structure as shown below.</p>
<p><img class=" size-full wp-image-902 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/02/tree-2.png" alt="tree" width="508" height="451" /></p>
<p>In the above diagram you can see we have parent <strong>A</strong>, A has children C and C has its own child F and G.Now consider <strong>C</strong> as a <strong>component</strong> ,if there is any change in this component than only its children F and G and their children J and K know about its change and the parent have no idea about its change.So due to this unidirectional flow in react niether parent component nor the components around it get affected by this change.</p>
<h3><span style="color: #333399;"><strong>Virtual dom</strong></span></h3>
<h4><span style="color: #0000ff;"><strong>Problem with real DOM</strong></span></h4>
<ol>
<li><strong><span style="color: #008000;">DOM manipulation</span></strong> is the heart of the modern, interactive web. Unfortunately, accessing, rendering, rerendering real DOM is really very slow.</li>
<li>Inefficient updating has become a serious problem with real DOM.</li>
</ol>
<p>As an example, let&#8217;s say that you have a list that contains ten items. On changing any of the item in the list the entire list get rerendered again and again. That&#8217;s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.</p>
<p>Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation,which reduces the performance of our webpage.</p>
<p>To address this problem, the people at React popularized something called the <strong><span style="color: #000080;">virtual DOM.</span></strong></p>
<h4><span style="color: #000080;"><strong>Virtual DOM</strong></span></h4>
<p><em> </em>In React, for every <strong>DOM object</strong>, there is a corresponding &#8220;<strong>virtual DOM object</strong>.&#8221; A virtual DOM object is a <em style="font-weight: inherit;">representation</em> of a DOM object, like a lightweight copy or in particular we can say its a javascript representation of exact real DOM.</p>
<p>A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing&#8217;s power to directly change what&#8217;s on the screen.</p>
<p>Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.</p>
<h5><span style="color: #000080;"><strong>How virtual DOM works:</strong></span></h5>
<h5><span style="color: #0000ff;"><strong>This Virtual DOM works in three simple steps.</strong></span></h5>
<p>1.Whenever any underlying data changes, the entire virtual DOM gets updated.</p>
<p><img class="alignnone size-full wp-image-899" src="https://c1ctech.com/wp-content/uploads/2019/02/vdom1.png" alt="vdom1" width="767" height="348" /></p>
<p>2.The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><img class="alignnone size-full wp-image-900" src="https://c1ctech.com/wp-content/uploads/2019/02/vdom2.png" alt="vdom2" width="686" height="332" /></p>
<p>3.Once the calculation is done, the changed objects, and the changed objects only, get updated on the <strong><em>real</em> DOM</strong> and then finally changes on the real DOM cause the screen to change.</p>
<p><img class="alignnone size-full wp-image-901" src="https://c1ctech.com/wp-content/uploads/2019/02/vdom3-687635143-1551030866437.png" alt="vdom3" width="446" height="331" /></p>
<h3><span style="color: #000080;"><strong>Rich Ecosystem</strong></span></h3>
<p>React work very well mainly with one thing and that is the view of our applications .Now what about routing ,http calls ,state management and other functionality of our applications.To achive this react has a really good ecosystem that works with latest javascript technology to build fully fledged applications.</p>
<p><img class=" wp-image-904 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/02/react.png" alt="react" width="519" height="389" /></p>
<p><span style="color: #0000ff;"><strong>npm</strong></span>: You can find react package in npm.</p>
<p><span style="color: #0000ff;"><strong>babel</strong></span> : It converts JSX code into javascript so that browser can understand it.</p>
<p><span style="color: #0000ff;"><strong>redux</strong></span> : It manages the application state.</p>
<p><span style="color: #0000ff;"><strong>react-router</strong></span> : You can use this library for routing in our application.</p>
<p><span style="color: #0000ff;"><strong>Webpack</strong></span> : Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.</p>
<h3><span style="color: #000080;"><strong>Creating React App</strong></span></h3>
<p> ;</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="Ps8Suvf6TXI" title="ReactJS Tutorial For Beginners - 2 - Creating Hello World App"><a placeholder href="https://youtu.be/Ps8Suvf6TXI"><img src="https://i.ytimg.com/vi/Ps8Suvf6TXI/hqdefault.jpg" layout="fill" object-fit="cover" alt="ReactJS Tutorial For Beginners - 2 - Creating Hello World App"></a></amp-youtube></p>
<p> ;</p>
<p>To create react application firstly we have to install two things in our machine.</p>
<p><span style="color: #0000ff;"><strong>1.nodejs</strong></span></p>
<p>Now to install nodejs go to official website of nodejs <strong><span style="color: #008000;"><a style="color: #008000;" href="https://nodejs.org/en/">https://nodejs.org/en/</a></span></strong> .</p>
<p><span style="color: #0000ff;"><strong>2.code editor</strong></span></p>
<p>Now to install code editor you can use any editor of your choice like <strong>visual studio code, sublime, atom</strong> etc.</p>
<h4><span style="color: #000080;"><strong>Create-react-app</strong></span></h4>
<p>To create react applications we have to use create-react-app tool.It is a command line interface tool by using which we can quickly create and run react applications without doing any configuration.</p>
<p>To run create-react-app tool simply run the command:</p>
<p><span style="color: #008000;"><strong>npx create-react-app <;project-name>;</strong></span></p>
<p><strong>Eg: npx create-react-app hello-world </strong></p>
<p><span style="color: #008000;"><strong>Npx</strong></span> is npm package runner.Whenever we installed <span style="color: #008000;"><strong>nodejs</strong></span> in our machine <span style="color: #008000;"><strong>npm</strong></span> also get automatically installed and with npm version 5.2 and above comes with <strong><span style="color: #008000;">npx</span></strong> using which we can simply run create-react-app tool without having to installed it.</p>
<p>After running above command will create project directory(ie.hello-world) inside the directory where you want to create your react project.</p>
<p>Now to run the application firstly go to the project directory then write the command:</p>
<p><span style="color: #008000;"><strong>cd <;project-name>;</strong></span></p>
<p><span style="color: #008000;"><strong>npm start</strong></span></p>
<p>This will launch a development server in the new tab of your browser at <span style="color: #008000;"><strong>http://localhost:3000/</strong></span> and this is a place where you find your project is up and running.</p>
<p>There is one more approach that you can use to create react application and that is using <strong><span style="color: #008000;">create-react-app package</span></strong>.</p>
<p>You have to globally install create-react-app package using <strong><span style="color: #008000;">npm</span></strong> by running the command (in terminal):</p>
<p><strong><span style="color: #008000;">npm install -g create-react-app</span></strong></p>
<p>Then using create-react-app package you can simply create the react project by running:</p>
<p><strong><span style="color: #008000;">create-react-app <;project-name>;</span></strong></p>
<p>Now to run the application do the same as we do with npx.</p>
<p><span style="color: #008000;"><strong>cd <;project-name>;</strong></span></p>
<p><span style="color: #008000;"><strong>npm start</strong></span></p>
<p>I recommend you to use <span style="color: #008000;"><strong>npx</strong></span> instead of <span style="color: #008000;"><strong>npm</strong></span> because in case of npm we have to installed create-react-app package and also update it constantly but in case of npx we can easily run create-react-app tool without having to installed it.</p>
<p><strong>I hope this tutorial will help you in understanding the basics of react and also how to create react application .</strong></p>
<p> ;</p>