<h2>Prerequisites</h2>

<p>There are a few things you should know in advance before you start playing around with React.</p>

<p>Here are what I consider to be React prerequisites.</p>

<ul>
<li>Basic familiarity with HTML &amp; CSS.</li>
<li>Basic knowledge of JavaScript and programming.</li>
<li>Basic understanding of the <a href="https://www.w3schools.com/js/js_htmldom.asp" target="_blank" rel="noreferrer noopener" aria-label="DOM (opens in a new tab)">DOM</a>.</li>
<li>Familiarity with ES6 syntax and features.</li>
<li><a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Node.js and npm</a> installed globally.</li>
</ul>

<h2>Setup and Installation</h2>

<p><strong><em>npx create-react-app</em></strong> is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.</p>

<pre class="wp-block-code"><code>npx create-react-app react-app</code></pre>

<p>Here <strong><em>react-app</em></strong> is the folder name in which react config &amp; setup files will be created by react to run a react-app.</p>
<p>Go to newly created app and run the below command to run the app.</p>

<pre class="wp-block-code"><code>cd react-app
npm start</code></pre>

<p><strong><em>npm start</em></strong> will run your react app.</p>
<p>Now, Edit <strong><em>src/App.js</em></strong> and save to view the effect.</p>

<p><strong>Feel free to leave a comment for any questions and issues.</strong></p>

npx create-react-app is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.


There are a few things you should know in advance before you start playing around with React.



Here are what I consider to be ...

Getting Started with React 

<h2>What is React?</h2>

<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called &ldquo;components&rdquo;.</p>

<blockquote class="wp-block-quote">
<p>ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model &ndash; View &ndash; Controller).</p>
</blockquote>

<p>ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook&rsquo;s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.</p>

<h2>Why it is used?</h2>

<p>In ReactJS, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks components are integrated together to build one bigger and dynamic application.</p>

<p>The biggest advantage of using components is that you can change any component at any point in time without affecting the rest of the applications. This feature is most effective when implemented with larger and real-time applications where data changes frequently. Each time any data is added or updated, ReactJS automatically updates the specific component whose state has actually changed. This saves the browser from the task of reloading the whole application to reflect the changes.</p>

<h2>Features Of React</h2>

<p>Now that you have understood what is React and why it is used, lets now uncover few of its intriguing features.</p>

<h3>1. <strong>JSX</strong></h3>

<p>JSX stands for JavaScript XML. Its an XML/ HTML like syntax used by React. It extends the ECMAScript so that XML/ HTML like text can co-exist along with JavaScript react code. This syntax is used by the pre-processors like <em>Babel</em> to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript&rsquo;s performance while making our application robust.</p>
<p>Let&rsquo;s see how to write Hello World Program using JSX.</p>

<pre class="wp-block-code"><code>const MyComponent = React.createClass({
    render: function () {
        return(    
            &lt;h2&gt;Hello World&lt;/h2&gt;
        );
    }
});<br><br>ReactDOM.render(<br>    &lt;MyComponent/&gt;, document.getElementById('content')<br>);</code></pre>

<h3>2. <strong>Virtual DOM</strong></h3>

<p>Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React&rsquo;s render function creates a node tree out of the React components. Then, it updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system.</p>

<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p><strong>This <em>Virtual DOM</em> works in three simple steps.</strong></p>
<ol>
<li>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</li>
<li>Then the difference between the previous DOM representation and the new one is calculated.</li>
<li>Once the calculations are done, the real DOM will be updated with only the things that have actually changed.</li>
</ol>
</div>
</div>

<p>You can think of it as a patch. As patches are applied only to the affected area, similarly, the virtual DOM acts as patches and are applied to the elements which are updated or changed, in the real DOM.</p>
<p>This makes our application faster and there is no memory wastage.</p>

<h3>3. Testability</h3>

<p>React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug.</p>

<h3>4. Server-Side Rendering(SSR)</h3>

<p>Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server&rsquo;s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.</p>
<h3>5. One-Way Data Binding</h3>

<p>Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The major advantage of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this, application&rsquo;s state is contained in specific stores and as a result, rest of the components remains loosely coupled. This makes our application more flexible leading to increased efficiency.</p>
<h3>6. Simplicity</h3>

<p>Use of JSX files makes the application really simple and easy to code as well as understand. Even though we can use plain JavaScript here, using JSX is easier. React&rsquo;s component-based approach along with distinct lifecycle methods also make it simple to learn.</p>

<h3>7. Learning Curve</h3>

<p>Learning curve of React is quite low as compared to other frameworks. Anyone having even basic knowledge of programming can easily learn React. So, if you have previous knowledge of HTML and JavaScript you can get your hands on it very quickly.</p>

<p>This brings us to the end of this blog on what is React. Hope I was able to clearly explain what is React and why you should use it.</p>

<p><strong>Please feel free to comment your questions. Thanks</strong></p>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UI...

Getting Started with React

Introduction to React