Table of contents
1.
Introduction
2.
ReactJS Basics
3.
ReactJS Components
4.
Types of components
4.1.
Function-based components
4.2.
Class-based components
4.2.1.
Output:
5.
Frequently Asked Questions
5.1.
Which are some commonly used online playgrounds for writing code?
5.2.
What are props? Can we pass components as props?
5.3.
Is it possible to use components inside other components?
6.
Conclusion
Last Updated: Oct 29, 2024
Easy

React Basics and Components

Author Vasu Bansal
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In this blog, we will learn about React fundamentals and components. The component-based approach is a newer approach that solves problems that were present in the traditional DOM-based approach. The component-based approach increases productivity by making it easier to apply changes to the existing applications.


If you are new to React, you can refer to the blogs Introduction to React Native and React Native Development Environment Setup on the Coding Ninjas Website. Also, you can check out our React Js Course to improve your skill in tech industry.

ReactJS Basics

React Native is based on React, which is a famous Javascript library. React is based on the following components, i.e., JSX, props, and state. JSX is a special syntax with the help of which we can write elements inside Javascript. An example of a JSX element is as follows.


<Text> Welcome to Coding Ninjas </Text>

Props are an alias for properties. Like any other programming language, properties are used to provide further customization to your elements. For example, we can specify width and height properties in an Image element. The state is used for storage purposes. It gives memory to our elements/components.

For a more detailed description, you may refer to the original documentation of React here.

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 CoursesGuided Paths for Interview PreparationCoding Ninjas Studio ContestsCoding Ninjas Studio Test SeriesCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview Experiences and Coding Ninjas Studio Interview Bundle.  Do upvote our blog to help other ninjas grow. Happy Coding!

Live masterclass