Forem: Bipin Rajbhar

Basic Hooks: useState

Bipin Rajbhar — Thu, 26 Nov 2020 06:42:44 +0000

Hello everyone 👋, I hope you are doing great.

So, today you are going to learn all the basic concepts of React.useState Hook.

The React.useState is a function that accepts one argument, which is the initial state, and returns an array containing two values. The first value is the current state, and the second value is an updater function that allows you to update the current state.

We can name these two variables whatever we want, but a common convention is to choose a name for the current state and then prefix the set in the front of the updater function.

Here is the sample code that uses the React.useState Hook.

// function component
function Counter() {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return <button onClick={increment}>+ {count}</button>;
}

Example

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Forms in React

Bipin Rajbhar — Tue, 03 Nov 2020 14:01:36 +0000

In most of the Application, your a going to take user input at some point in time.

So, Let's create a simple Login Form.

function NewsLetterForm() {
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

When you submit this form the browser by default makes a GET request to the current URL with values of the form as a Query Parameter in URL and it's causing a full-page reload.

http://localhost:3000/exampe1.html?email=bipin%40gmail.com

You can prevent this behavior by calling the event.preventDefault() method.

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

The event Object is not an actual DOM event but looks and behaves like a real DOM event. You can also access the native DOM event by using the event.nativeEvent property.

React does this to increase the performance of the Application.

Let's access the values of the input filed.

There are several ways to access the value of the input.

Via their index: event.target.elements[0].value
Via the elements object by their name or id attribute: event.target.elements.email.value

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
    const email = event.target.elements.email.value;
    const password = event.target.elements.password.value;
    alert(`Your email is ${email} and password is ${password}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

Example 1

Let's validate the password field to meet the following criteria.

must be at least 8 characters
must contain a capital letter
must contain a number
must contain a special character

We need two things to archive the above functionalities.

A variable to store the value of the input and an updater function to update the value of the variable whenever the user changes the value of the input.
A change handler (onChange).

In React we have a hook (kinda method) called useState which takes the initial value and returns an array.

We are going to talk about hooks in the next series.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')

  return null;
}

In React, there an event handler called onChange which fires when the user changes the value of the input field.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')
  const handleChange = event => setPassword(event.target.value)

  return (
    <input
      type="password"
      name="password"
      value={password}
      placeholder="Enter your password"
      onChange="{handleChange}"
    />
  )
}

Example 2

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Lists and Keys

Bipin Rajbhar — Mon, 02 Nov 2020 04:31:00 +0000

Rendering a list of items is very common in any Application.

If we render a list of items like this, then there is no problem.

function FruitsList() {
  return (
    <ul>
      <li>apple</li>
      <li>banana</li>
      <li>grapes</li>
    </ul>
  )
}

If we render a list of items as an array, which very common in React.

const fruits = ['apple', 'banana', 'grapes'];

function FruitsList() {
  return (
    <ul>
      // returns an array of React Element
      {fruits.map(fruit => <li>{fruit}</li>)}
    </ul>
  )
}

It will generate the same HTML, but with a warning.

We can interpolate an Array of renderable elements in React, but it has interesting implications when things change over time.

If you rerender that list with an added item, React does not really know whether an item is added at the beginning, middle, or end of the list. And the same goes for the removed items.

Example 1

If you remove the items from the end then it will work as expected but, if you remove items from the start or middle it will behave a little bit differently.

`key` prop

The key prop helps React to identify where the elements have changed, are added, or are removed.

const fruits = [{id: 'apple', value: 'apple'}, {id: 'banana' value: 'banana'}, {id: 'grapes', value: 'grapes'}];

function FruitsList() {
  return (
    <ul>
      // returns an array of React Element
      {fruits.map(fruit => <li key={fruit.id}>{fruit.value}</li>)}
    </ul>
  )
}

Without key vs with array index as key vs with a proper key.

Example 2

The behavior of React Element without key is the same as with an array index as a key.

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Styling React Components

Bipin Rajbhar — Sat, 31 Oct 2020 06:32:01 +0000

There are two primary ways to style a React Component.

Inline CSS with style prop.
External CSS with className prop.

`style` prop

In HTML you pass CSS as a String.

<p style="margin-top: 10; color: red;">Something went wrong.</p>

In React, you have to pass CSS as a Object.

<p style={{marginTop: 10, color: "red"}}>Something went wrong.</p>

In the React {{ and }} is actually a combination of JSX express and an Object express.

In React the property name of the style prop is camelCase instead of kebab-cased.

`className` prop

In HTML you apply a class name to an element using the class attribute.

<p class="error-message">Something went wrong.</p>

In React you apply a class name to an element using the className attribute.

<p className="error-message">Something went wrong.</p>

My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Components And Props

Bipin Rajbhar — Fri, 30 Oct 2020 03:55:20 +0000

What is a component?
In simple words, a component is just a function that returns something that is renderable (React Element, String, Number, etc.).

Component name must start with capital letters.

// functional component
function Greeting() {
  return null;
}

What is Props?
Props are optional arguments that you can use to pass the data to the component.

// functional component with props
function Greeting(props) {
  return <em>{props.greeting}, {props.subject}</em>;
}

Let's create a reusable Greeting component.

Sample Code

function Greeting(props) {
  // jsx
  return <em>{props.greeting}, {props.subject}</em>;
}

Example 1

What is PropTypes?
PropTypes allows you to validate the property of the component at runtime.

PropTypes validation feature is only available in the development.

Let's validate the greeting and subject property of the Greeting component.

Sample Code

<script type="text/babel">
  function Greeting(props) {
    return <em>{props.greeting}, {props.subject}</em>
  }

  // propType validation
  const PropTypes = {
    string(props, propName, componentName) {
      console.log()
      if(typeof props[propName] !== 'string') {
        console.log()
        throw new Error(`${propName} must be string for the ${componentName} component but you have passed ${typeof props[propName]}.`);
      }
    }
  }

  Greeting.propTypes = {
    greeting: PropTypes.string,
    subject: PropTypes.string
  }

  ReactDOM.render(<Greeting greeting="Hello" subject="Bipin Rajbhar"/>, document.getElementById('root'));
</script>

If the type of greeting and subject is other than the string, it will throw an error.

Example 2

Using the prop-types package
As it turns out, you want to validate some pretty common things, so the React team maintains a package called props-types.

To use the prop-types package, we need to add a JavaScript file.

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

Now, you have a global Object available called PropTypes.

Sample Code

<script type="text/babel">
  function Greeting(props) {
    return <em>{props.greeting}, {props.subject}</em>
  }

  Greeting.propTypes = {
    greeting: PropTypes.string,
    subject: PropTypes.string
  }

  ReactDOM.render(<Greeting greeting="Hello" subject="Bipin Rajbhar"/>, document.getElementById('root'));
</script>

Example 3

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps; and you can follow or connect to me on Twitter and Linked In

Read more

prop-types

Resources
The Beginner's Guide to React
Epic React

An Intro to JSX

Bipin Rajbhar — Tue, 27 Oct 2020 03:57:36 +0000

What is JSX?
In simple words, JSX is just syntactic sugar on the top of raw React APIs.



// JSX (HTML-like Syntax)
const reactElement =  <h1>Hello World</h1>;

// compiles to raw React APIs
const reactElement = React.createElement('h1', {}, 'Hello World');

JSX is not actually JavaScript, so we need a compiler to compile our JSX. Babel is one such tool we gonna use to compile our JSX.

Babel is written in JavaScript we can actually run it directly in the browser to compile our code on the fly.

To use babel in our Web Application. We need to include a script tag for babel and then we need to change the type of the script from text/javascript to text/babel. So that babel can identify which script tag needs to be compiled.



<script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>

<script type="text/babel">
  // JavaScript + React
</script>

Let's try to recreate Example 1 from the previous article using JSX.

Sample Code



<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>

  <script type="text/babel">
    // JSX
    const divElement = <div>Hello World</div>

    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>

The compiled code is added to the head tag.

Example 1

Interpolation
Interpolation is defined as "the insertion of something of a different nature into something else".

Sample Code



<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>

  <script type="text/babel">
    // interpolation
    const divElement = <div>{new Date().toLocaleString()}</div>

    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>

Example 2

I hope you learned something from this article and if you have any doubt please leave a comment. I will be very happy to answer all your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

An Intro to Raw React APIs

Bipin Rajbhar — Sun, 25 Oct 2020 18:05:56 +0000

What is React?
In simple words, React is just a JavaScript library for building User Interface.

React allows you to build a complex User Interface by composing small and simple components.

React uses the same browser APIs under the hood that you use while creating DOM Nodes using JavaScript.

In Fact, Here where that happens in the React source code at the time of writing this article.

React is declarative which means it abstracts out the imperative browser API and gives you more declarative APIs.

Before we start with React let's first create a div DOM node with the text content "Hello World" using JavaScript.

It will help you to understand a little bit better how React really works under the hood.

Sample Code

<body>
  <div id="root"></div>

  <script>
    const rootElement = document.getElementById('root')

    // div node is created using createElement method
    const divElement = document.createElement('div')

    // text content of div node is set to "Hello World" using textContext attribute
    divElement.textContent = 'Hello World'

    // div node apped to root node using append method  
    rootElement.append(divElement)
  </script>
</body>

Example 1

Let's try to recreate Example 1 using React.

In order to use React we need to embed two JavaScript files in our Web Application.

The first JavaScript file exposes a global object React and the second JavaScript file exposes a global object ReactDOM.

React is responsible for creating a React element (kinda like document.createElement()).
ReactDOM is responsible for rending the React element (kinda like rootElement.append()).

Sample Code

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

  <script>
    // React Element     
    const divElement = React.createElement('div', {}, 'Hello World')

    // Rendering React Element to the DOM     
    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>

React.createElement

const reactElement = React.createElement(type, [props], [...children]);

The createElement method returns a React element of the given type. The type can be any HTML tag name string or React Component or React Fragment. The props are an optional parameter where we can pass the property of a React Element. The children are also an optional parameter where we can pass the children of React Element.

ReactDOM.render

ReactDOM.render(reactElement, document.getElementById('root'));

The ReactDOM.render method renders the React element to the DOM.

Example 2

Nested DOM Nodes

Let's try to render nested dom nodes using JavaScript + React.

Sample Code

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
  <script>

    // React Elements     
    const helloElement = React.createElement('span', {}, 'Hello')
    const worldElement = React.createElement('span', {}, 'World')
    const divElement = React.createElement('div', {}, helloElement, ' ', worldElement)

    // Render React Element     
    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>

Example 3

I hope you learned something from this article and if you have any doubt please leave a comment. I will be very happy to answer all your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

JavaScript Rendered Hello World

Bipin Rajbhar — Sat, 24 Oct 2020 04:40:15 +0000

In this article, we are not going to use React at all. Instead, we are going to use JavaScript to create a div DOM element with the text content "Hello World".

Why we are doing this?
It's very important to have a basic understanding of how the DOM elements are created using JavaScript because it will help you to understand how React really works under the hood.

Exercise 1

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <!-- create a 'div' element with an id 'root' -->

    <script>
      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>

Solution Code (Exercise 1)

Exercise 2

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <script>
      // create a root 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set id attribute to 'root' for root div element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

      // append the root div element to body using append
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>

Solution Code (Exercise 2)

I hope you learned something from this article and if you like this article then do not forget to give heart, unicorn, etc.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Creating a floating label using HTML and CSS

Bipin Rajbhar — Mon, 04 May 2020 07:57:42 +0000

Hello everyone 👋, I hope you are doing great.

So, Today we are going to learn how to create a floating label using HTML and CSS 😎.

📄 HTML

Let's first set up our HTML.

<main>
  <form>
    <div>
      <input id="email" type="email" placeholder=" " />
      <label for="email">Email</label>
    </div>
    <div>
      <input id="password" type="password" placeholder=" " />
      <label for="password">Password</label>
    </div>
    <button>Login</button>
  </form>
</main>

🎨 CSS

Now, let's set up our CSS.

div {
  display: flex;
  flex-direction: column-reverse;
}

input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid #bdbdbd;
  outline: none;
}

label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;
}

Now, let's set up the input functionality when the input is focused.

input:focus,
input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;
}


input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);
}

That's It 😎.

Example

📚 Further Reading:

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

How JavaScript Works: Web APIs, Callback Queue, and Event Loop

Bipin Rajbhar — Sun, 03 May 2020 07:52:41 +0000

Hello everyone 👋, I hope you are doing great.

So, In the previous article, we learned about Google's V8 Engine, Heap Memory, and Call Stack.

How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack

Bipin Rajbhar ・ Apr 29 '20

#javascript #beginners #webdev #tutorial

In this article, we will learn about Web APIs, Callback Queue, and Event Loop.

🌐 Web APIs

The Web APIs are provided by the web browser that gives additional functionality to the V8 engine.

The Web API calls are added to the Web API Container from the Call Stack. These Web API calls remain inside the Web API Container until an action is triggered. The action could be a click event or HTTP request, or a timer finishes its set time. Once an action is triggered, a callback function is added to the Callback Queue.

🧑‍🤝‍🧑 Callback Queue

The Callback Queue is a FIFO data structure.

The Callback Queue stores all the callback functions in the order in which they are added.

♻️ Event Loop

What happens when you have function calls that take a large amount of time to execute in the Call Stack?

For example

Executing a for loop from 1 to 10B
Making a network request
Doing image processing

Let's take an example.

Synchronous Code Visualization

You may ask why this is a problem? The problem is when the Call Stack has a function to execute, the browser cannot do anything else because it is blocked.

The solution is an asynchronous callback, promises, and async / await.

Let's take an example.

Asynchronous Code Visualization

The Event Loop has only one simple job to do. It looks at the Call Stack and Callback Queue, if the Call Stack is empty, it pushes the first callback function of the Callback Queue to the Call Stack..

I hope now you have a good understanding of how JavaScript works.

In the next article, we will learn how V8 compiles our JavaScript code.

📚 Resources

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack

Bipin Rajbhar — Wed, 29 Apr 2020 02:21:34 +0000

Hello everyone 👋, I hope you are doing great.

So, today you are going to learn An Overview of JavaScript Engine, Heap, Call Stack 🧑‍💻.

Many JavaScript developers don't know how JavaScript works. If you are new to JavaScript 👶, then this article will help to learn how JavaScript works. If you are an experienced 👴, JavaScript developer hopefully, this article will be a good refresher for you.

⚙️ JavaScript Engine

The JavaScript engine is a program that executes your JavaScript code. A popular example of a JavaScript engine is Google's V8 engine.

⚙️ V8 Engine

The V8 engine is an open-source, high-performance JavaScript and Web Assembly engine written in C++. The V8 engine is used inside Google Chrome, Node.js, and electron, among others.

Overview of V8 Engine

The V8 engine has two main components

Heap is an unstructured memory that is used for memory allocation of the variables and the objects.
Call Stack is a LIFO data structure that is used for function calls that record where we are in the program.

🥞 Call Stack

JavaScript is a single-threaded programming language, which means it can do one thing at a time, and it has one Call Stack.

If you call a function, it's pushed on the top of the Call Stack, and when the function returns, it's popped from the top of the Call Stack.

Let's take an example.

Call Stack Visualization

Let's take another example that contains an error.

Call Stack Visualization

When the V8 engine encounters an error, it prints a stack trace. A stack trace is basically the state of the Call Stack.

Let's take another example that blows up the Call Stack 💥.

We can do this by using a recursive function.

Call Stack Visualization

A recursive function calls itself again and again. At some point in time, the number of function calls exceeds the actual size of the stack, and the browser detects this to take action by throwing an error.

I hope now you have a fair understanding of how JavaScript works.

In the next article, we will learn about Web APIs, Callback Queue, and Event Loop.

📚 Resources

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

Adding Dark / Light Theme To The Website Using Only CSS

Bipin Rajbhar — Sat, 25 Apr 2020 07:32:17 +0000

Hello everyone 👋, I hope you are doing great.

So, Today you are going to learn how to Add dark/light theme to your website using only CSS 😎.

HTML

Let's first set up our HTML.

<input id="toggle-theme" class="toggle-theme" type="checkbox" checked/>

<main >
  <label for="toggle-theme" class="toggle-theme-label">
    <span>💡</span>
</label>
  <article>
  <header>Dark / Light Mode Using Only CSS</header>
  <p>...</p>
</article>
</main>

CSS

Now lets set the background-colour and text colour of our HTML using CSS variables.


:root {
   --bg-color: #edf2f4;
   --text-color: #011627;
}

main {
  padding: 24px;
  background-color: var(--bg-color);
  color: var(--text-color);
}

Now, lets set up the checkbox functionality when the checkbox is checked.

/* all the magic happing here ✨*/
input[type="checkbox"]:checked ~ main {
  --bg-color: #011627;
  --text-color: #edf2f4;
}

That's It 😎.

Example

📚 Further Reading:

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

Forem: Bipin Rajbhar

Basic Hooks: useState

Forms in React

Lists and Keys

key prop

Without key vs with array index as key vs with a proper key.

Styling React Components

style prop

className prop

Components And Props

An Intro to JSX

An Intro to Raw React APIs

JavaScript Rendered Hello World

Creating a floating label using HTML and CSS

📄 HTML

🎨 CSS

📚 Further Reading:

How JavaScript Works: Web APIs, Callback Queue, and Event Loop

How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack

Bipin Rajbhar ・ Apr 29 '20

🌐 Web APIs

🧑‍🤝‍🧑 Callback Queue

♻️ Event Loop

📚 Resources

How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack

⚙️ JavaScript Engine

⚙️ V8 Engine

🥞 Call Stack

📚 Resources

Adding Dark / Light Theme To The Website Using Only CSS

HTML

CSS

📚 Further Reading:

`key` prop

`style` prop

`className` prop