PropTypes

PropTypes in React are used to check the value of a prop which is passed into the component. These help in error hanling and are very useful in large scale applications.

Primitive Data Types

Type	Class/Syntax	Example
String	PropTypes.string	“Geeks”
Object	PropType.object	{course: “DSA”}
Number	PropType.number	15,
Boolean	PropType.bool	true
Function	PropType.func	const GFG ={return “Hello”}
Symbol	PropType.symbol	Symbol(“symbole_here”

Array Types

Type	Class/Syntax	Example
Array	PropTypes.array	[]
Array of strings	PropTypes.arrayOf([type])	[15,16,17]
Array of numbers	PropTypes.oneOf([arr])	[“Geeks”, “For”, “Geeks”
Array of objects	PropTypes.oneOfType([types])	PropTypes.instanceOf()

Object Types

Type	Class/Syntax	Example
Object	PropTypes.object()	{course: “DSA”}
Number Object	PropTypes.objectOf()	{id: 25}
Object Shape	PropTypes.shape()	{course: PropTypes.string, price: PropTypes.number}
Instance	PropTypes.objectOf()	new obj()

Javascript

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom/client';
 
// Component
class ComponentExample extends React.Component{
    render(){
        return(
                <div>
                 
                    {/* printing all props */}
                    <h1>
                        {this.props.arrayProp}
                        <br />
 
                        {this.props.stringProp}
                        <br />
 
                        {this.props.numberProp}
                        <br />
 
                        {this.props.boolProp}
                        <br />
                    </h1>
                </div>
            );
    }
}
 
// Validating prop types
ComponentExample.propTypes = {
    arrayProp: PropTypes.array,
    stringProp: PropTypes.string,
    numberProp: PropTypes.number,
    boolProp: PropTypes.bool,
}
 
// Creating default props
ComponentExample.defaultProps = {
 
    arrayProp: ['Ram', 'Shyam', 'Raghav'],
    stringProp: "w3wiki",
    numberProp: "10",
    boolProp: true,
}
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
    <ComponentExample />
</React.StrictMode>
);

React Cheat Sheet

React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller (MVC) architecture. React is used to create modular user interfaces and promotes the development of reusable UI components that display dynamic data.

React Cheat Sheet provides you with a simple, quick reference to commonly used React methods. All the important components and methods are provided in this single page

Table of Content

React Elements
ReactJS Import and Export
React Components
Lifecycle of Components
Conditional Rendering
React Lists
React DOM Events
React Hooks
PropTypes

Boilerplate: Follow the below steps to create a boilerplate

Step 1: Create the application using the command

npx create-react-app <<Project_Name>>

Step 2: Navigate to the folder using the command

cd <<Project_Name>>

Step 3: Open the App.js file and write the below code

Javascript

// App.js
 
import React from 'react';
import './App.css';
export default function App() {
    return (
        <div >
            Hello Geeks
            Lets start learning React
        </div>
    )
}

PropTypes

Primitive Data Types

Array Types

Object Types

Javascript

React Cheat Sheet

Javascript

Categories

Contact US

PropTypes

Primitive Data Types

Array Types

Object Types

Javascript

React Cheat Sheet

Javascript

Similar Reads

Categories

Contact US