React Components
- Component is a template that comprises of
a) Presentation
b) Styles
c) Logic
- Presentation is defined using HTML
- Styles are defined by using CSS
- Logic is defined by JavaScript or TypeScript.
- Components are building block for React Application.
- React components are desinged by using
a) Function
b) Class
- Function
* Light weight
* Less memory
* Fast in rendering
* Hard to extend
- Class
* Heavy
* More memory
* Slow in rendering
* Easy to extend
Function Component
- Component function can be parameter less or parameterized.
- Every function component must return presentation.
Syntax:
function ComponentName(params)
{
return (<markup> </markup>);
}
- Component uses JSX [JavaScript Extention Library]
- JSX will not allow multiple lines without a block.
<h2>Head-1</h2> //invalid
<p> Line-1 </p>
<div>
<h2></h2>
<p></p>
</div>
- Complete presentation must return as one fragment.
<div> </div>
<> </>
<React.Fragment> </React.Fragment>
- JSX will not allow void elements. Every element must have end tag.
<img> // invalid
<img> </img>
<img />
- You can't bind any content to attribute, only properties are allowed.
<div class="form"> // invalid
<div className="form"> // valid
<img src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/path"> // valid