JAVASCRIPT

Add A Class In React

/*App.jsx*/

import React from 'react';

export function App(props) {
  return (
    <div className='App'>
      <h1 className="someClass">Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 /*style.css*/
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #18222d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  color: #72a24d;
}
.someClass
{
  color: red;
}

How to Add a Class in JSX

/* We can add attributes to the JSX elements, 
for example id and class, the same as in HTML! */

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const id = "some-id";
  return (
    <div>
      <h1 id={id}>This is a heading</h1>
      <h2 className="active">This is another heading</h2>
    </div>
  );
};

/* Note that in React, we need to use className instead of class.*/

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);