ReactJS Components
Components are the building blocks of a React application. Similar to how a house is made up of small units called bricks, our React components are also the bricks of our application. We can make beautiful UI's by breaking them into different components and creating them separately. Once the components are ready, we can integrate those components easily to create the master/parent UI.
Also see, React Native Reanimated
Types of components
Components in React are similar to functions in Javascript, as both of them serve the same purpose. The components are capable of working in isolation and returning HTML code. Two types of components are available, as discussed below.
Function-based components
Function components are basically Javascript functions that do not have their own state. They contain only the render method and may or may not receive any parameters as input. They are also known as stateless components because they do not manage/hold any state.
An example of a function-based component is given below.
function DisplayMarks(params) {
return <h1>The marks of the student is {params.student_rollno}</h1>;
}
Class-based components
Class components are more detailed and involved than functional components. Class components can pass data to other class components. It is necessary to extend from React to create a class-based component. Class-based components can be made with the help of Javascript ES6 classes.
The following is an example of a class-based component in React.
class StudentClasscomponent extends React.Component
{
render(){
return <h1>Welcome to the new session</h1>;
}
}
We can also render user-defined components using React. We need to use the ReactDOM.render() method and pass the user-defined component as the first argument. It is important to initialize the user-defined component before passing it as an argument. The following syntax can be used to initialize the component.
const elementNameVar = <UserDefinedComponentName />;
The name of the user-defined component always starts with a capital letter. This is done intentionally to separate user-defined components from normal HTML tags. The following example will demonstrate the use of class-based components.
Code:
import React, { Component } from 'react';
class DemoApp extends React.Component {
render() {
return (
<div>
<Welcome/>
<Intro/>
<Closing/>
</div>
);
}
}
class Welcome extends React.Component {
render() {
return (
<div>
<h1>Welcome to Coding Ninjas</h1>
</div>
);
}
}
class Intro extends React.Component {
render() {
return (
<div>
<h3>One stop solution for CS Core concepts</h3>
</div>
);
}
}
class Closing extends React.Component {
render() {
return (
<div>
<h2>Hope you enjoyed the tutorial</h2>
</div>
);
}
}
export default DemoApp;
Output:

Check this out, React Native Paper, React devtools
Frequently Asked Questions
Which are some commonly used online playgrounds for writing code?
There are many free online playgrounds that are available for writing code in React Native. Some of them are Codepen, CodeSandbox and Stackblitz.
What are props? Can we pass components as props?
Props stand for properties. Yes, we can pass components as props.
Is it possible to use components inside other components?
Yes, it is possible to use components inside other components, as React is all about the reusability of the code.
Conclusion
In this article, we have extensively discussed React basics and components and saw various examples and their implementation. Check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development.
We hope this blog has helped you enhance your React basics and components knowledge. If you want to learn more, check out the amazing content on the Coding Ninjas Website, Coding Ninjas Courses, Guided Paths for Interview Preparation, Coding Ninjas Studio Contests, Coding Ninjas Studio Test Series, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Experiences and Coding Ninjas Studio Interview Bundle. Do upvote our blog to help other ninjas grow. Happy Coding!