<p>In this article we will talk about what is component and how to create our first react component with simple example.</p>
<p><em><strong><span style="color: #0000ff;">React applications are made out of <span style="color: #000000;"><span style="color: #0000ff;">components</span>.Components</span> let you split the entire application into independent, reusable pieces which can then be composed together to form complex UI</span></strong>.</em></p>
<p> ;</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="91uk0jBbWOo" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=91uk0jBbWOo" placeholder><amp-img src="https://i.ytimg.com/vi/91uk0jBbWOo/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/91uk0jBbWOo/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p>
<h3><span style="color: #000080;"><strong>What is component?</strong></span></h3>
<p>A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.</p>
<p>A React component can be of two types. It can be either a <strong class="markup--strong markup--p-strong"><span style="color: #008000;">function</span> </strong>component or a <span style="color: #008000;"><strong class="markup--strong markup--p-strong">class</strong></span> component.</p>
<p><em>A component is a function or a Class which optionally accepts input and returns a React element.</em></p>
<h4><span style="color: #003366;"><strong>Functional Component</strong></span></h4>
<p><strong class="markup--strong markup--p-strong">A <span style="color: #0000ff;">function component</span></strong> is the simplest way to define a React component that is to write a JavaScript function.</p>
<p><span style="color: #008000;"><strong>Const MyComponent = (props)=>;{</strong></span></p>
<p><span style="color: #008000;"><strong>Return(</strong></span></p>
<p><span style="color: #008000;"><strong><;ElementOrComponent…/>;</strong></span></p>
<p><span style="color: #008000;"><strong>);</strong></span></p>
<p><span style="color: #008000;"><strong>}</strong></span></p>
<p>The function component accepts a single “props” (which stands for properties) object argument with data.<strong class="markup--strong markup--p-strong"> </strong>It returns what looks like HTML, but is really a special JavaScript syntax called <strong><a class="markup--anchor markup--p-anchor" href="https://facebook.github.io/react/docs/introducing-jsx.html" target="_blank" rel="noopener noreferrer" data-href="https://facebook.github.io/react/docs/introducing-jsx.html"><span style="color: #008000;">JSX</span></a></strong>.</p>
<h4><span style="color: #003366;"><strong>Class Component</strong></span></h4>
<p>A <span style="color: #0000ff;"><strong class="markup--strong markup--p-strong">class component</strong></span> is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers an internal state as additional input that controls the returned JSX.</p>
<p><span style="color: #008000;"><strong>Class MyComponent extends React.Component{</strong></span></p>
<p><span style="color: #008000;"><strong>Render(){</strong></span></p>
<p><span style="color: #008000;"><strong>Return(</strong></span></p>
<p><span style="color: #008000;"><strong><;ElementOrComponent…/>;</strong></span></p>
<p><span style="color: #008000;"><strong>);</strong></span></p>
<p><span style="color: #008000;"><strong>}</strong></span></p>
<div>
<div>A class component must contain <span style="color: #008000;"><strong>render</strong></span> method and render method must contain a <strong><span style="color: #008000;">return</span></strong> statement and usually, this return statement returns a <span style="color: #008000;"><strong>JSX</strong></span> expression.</div>
<div></div>
<div></div>
<div><strong><span style="color: #0000ff;">The State and Props objects have one important difference that is inside a class component, the State object can be changed while the Props object represents fixed values and cannot be changed.</span></strong></div>
</div>
<div></div>
<div>Given below is a simple <span style="color: #008000;"><strong>Hello</strong></span> class component returning special JSX syntax inside the render method :</div>
<div></div>
<div></div>
<div><img class="alignnone wp-image-942" src="https://c1ctech.com/wp-content/uploads/2019/03/reactjsx.png" alt="reactjsx" width="785" height="640" /></div>
<div></div>
<div>
<p> ;</p>
<p id="e379" class="graf graf--p graf-after--p"><strong>JSX</strong> allows us to describe our User Interfaces (UIs) in a syntax very close to the HTML that we are used to. It is, however, optional. React can be used without JSX, as you can see as shown below :</p>
</div>
<div>
<div></div>
<div><img class="alignnone size-full wp-image-943" src="https://c1ctech.com/wp-content/uploads/2019/03/reactelement.png" alt="reactelement" width="830" height="566" /></div>
</div>
<div></div>
<div></div>
<div>
<p> ;</p>
<p id="e379" class="graf graf--p graf-after--p">In fact, React just compiles the <strong><span style="color: #008000;">JSX</span></strong> and transform it into <span style="color: #008000;"><strong>React.createElement()</strong> </span>call as you can see in the above example inside the render method, which is pure JavaScript. React use <span style="color: #008000;"><strong><a style="color: #008000;" href="https://babeljs.io/">babel</a></strong></span> library to convert <strong>JSX</strong> into <strong>javascript</strong> so that browser can understand it.Then it works with compiled JavaScript in the browser.</p>
<p><strong>React.createElement</strong> method creates and return <strong><span style="color: #008000;">react element</span></strong> to be render to the page .<em>React element is not what you see on the screen instead it describes what you want to see on the screen or in particular it is a javascript object.</em></p>
<p>for example :</p>
<p>Consider this as simple JSX code which we are returning from a component .</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>

<div class="gatsby-highlight" data-language="html">
<pre class="language-html"><code><span class="token tag"><span class="token punctuation"><;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>login-btn<span class="token punctuation">'</span></span><span class="token punctuation">>;</span></span>Login<span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span></code></pre>
</div>
</div>
<div></div>
<div>Corresponding to the above JSX code the generated React.createElement() call look like this as shown below:</div>
<div></div>
<div>
<div class="gatsby-highlight" data-language="javascript">
<pre class="language-javascript"><code class="language-javascript">React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>
 <span class="token string">'div'</span><span class="token punctuation">,</span>
 <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token string">'login-btn'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token string">'Login'</span>
<span class="token punctuation">)</span></code></pre>
</div>
</div>
<div></div>
<div>
<p><strong><span style="color: #008000;">createElement</span></strong> takes in three arguments. The first is a tag name string (div, span, etc), the second is any attributes you want the element to have, the third is contents or the children of the element, in this case the text “Login”. The createElement invocation above is going to return an object with this shape, which is a react element.</p>
<div class="gatsby-highlight" data-language="javascript">
<pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>
 type<span class="token punctuation">:</span> <span class="token string">'div'</span><span class="token punctuation">,</span>
 props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 children<span class="token punctuation">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
 id<span class="token punctuation">:</span> <span class="token string">'login-btn'</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div></div>
<div>
<p>and when it’s rendered to the DOM (using ReactDOM.render), we’ll have a new DOM node that looks like this,</p>
<div class="gatsby-highlight" data-language="html">
<pre class="language-html"><code><span class="token tag"><span class="token punctuation"><;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>login-btn<span class="token punctuation">'</span></span><span class="token punctuation">>;</span></span>Login<span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span></code></pre>
</div>
</div>
<div></div>
<div>render method may consist of element (like <;div>;,<;p>;,<;button>; etc) or component of function or class type (like <em>“type: Hello”</em> above).</div>
<div>When React sees an element with a function or class type , it will then consult with that component to know which element it returns, given the corresponding props. With that in mind, at the end of this process, React has a full Javascript representation of the DOM tree,which we called as Virtual DOM.</div>
<div>React efficiently translates it into DOM operations that it performs in the browser.</div>
<div></div>
<div>
<h3></h3>
<h3 id="10f1" class="graf graf--h3 graf-after--p"><span style="color: #003366;">Let’s create a React component.</span></h3>
<h4><span style="color: #003366;"><strong>Functional Component</strong></span></h4>
<p>To create a function component, define a new function. Let’s make that function return an HTML element .Below you can see simple Hello function component example returning JSX with output <strong>Hello, Sara</strong> at right side.</p>
<p><img class="alignnone size-full wp-image-944" src="https://c1ctech.com/wp-content/uploads/2019/03/funcexample.png" alt="funcexample" width="1238" height="640" /></p>
</div>
<p>The props argument is an object that holds all the values that were passed to the component when it was rendered.</p>
<p>Then we can access this attribute inside the component with a curly bracket for <strong><span style="color: #008000;">props.name</span> </strong>.</p>
<p><span style="color: #008000;"><strong>ReactDOM.render()</strong></span> comes from react-dom library we have imported.</p>
<p><span style="color: #003366;"><strong>ReactDom.render method accepts two arguments.</strong></span></p>
<ul>
<li>The first argument is which component or element needs to render in the dom.</li>
<li>The second argument is where to render in the dom.</li>
</ul>
<h4><span style="color: #003366;"><strong>Class Component</strong></span></h4>
<p>To create a class component firstly we have to define a class that extends <strong><span style="color: #008000;">Component</span></strong> after importing react library as shown below :</p>
<div class="gatsby-highlight" data-language="html">
<pre class="language-html">class Person extends Component{}</pre>
</div>
<div></div>
<div>Below is the simple Person class component example with the output at the right side.</div>
<div></div>
<div></div>
<p><img class="alignnone size-full wp-image-945" src="https://c1ctech.com/wp-content/uploads/2019/03/componentexample.png" alt="componentexample" width="1291" height="741" /></p>
<p>The above <strong>Person</strong> class component consist of <span style="color: #008000;"><strong>constructor</strong></span> which is called initially, only once when the instance of a component is created.</p>
<p><img class="alignnone size-full wp-image-947" src="https://c1ctech.com/wp-content/uploads/2019/03/constr.png" alt="constr" width="499" height="177" /></p>
<p>Inside the constructor you must invoked super() method with props as an argument so that we can use this.props in our component.</p>
<p>Constructor is the only place where we can define <strong>state</strong>.The <strong>state</strong> contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.</p>
<p>To change state we have to use <strong><span style="color: #008000;">setState</span></strong>() method .In the above Person class component you can see when we click on plus(+) button the <strong>onIncrement</strong> method will call and inside which we are incrementing our state <strong>age</strong> by one.</p>
<p><strong>Thank you.I hope this tutorial will help you in understanding what is component ,its basics and how to create a component in our react application.</strong>