React 18

Last Updated: 9/24/2023

Creating Component

Bootstrap

  • Bootstrap is a very popular CSS library that gives us a bunch of CSS classes for styling your applications.
  • Install Bootstrap
npm i bootstrap@5.2.3

  • app.css: App component styles

  • index.css: Global styles

  • Import Bootstrap in main.tsx

import 'bootstrap/dist/css/bootstrap.css'

New Component

  • create folder src/components
  • create component ListGroup.tsx
  • VSCode > Command Pallete > Format Document > Default formatter - Prettier

ListGroup.tsx

  • class is a reserved keyword in JavaScript or TypeScript, so use className
function ListGroup() {
	return (
	    <ul className="list-group">
	      <li className="list-group-item">An item</li>
	      <li className="list-group-item">A second item</li>
	      <li className="list-group-item">A third item</li>
	      <li className="list-group-item">A fourth item</li>
	      <li className="list-group-item">And a fifth one</li>
	    </ul>
	  );
}

Multiline JSX

  • When you have multiple lines in JSX wrap it using parenthesis
return (
	<h1>
	Hello World
	</h1>
)
Previous
Next