How to create your first react styled-component?

Here we are going to learn how to install the react styled component in your react project. First of all creating react project using the command below

npm create react-app react-project-demo
npm install styled-components

After the two commands completed. create a folder under the src/components then create a file under the components firstComponent.jsx

import React from 'react';
import styled from 'styled-components';
 
const Heading1 = styled.h1`
  font-size: 1rem;
  font-weight: 600;
  color: #333;
`;
 
function firstComponent() {
  return (
    <div>
      <Heading1>Hello world</Heading1>
    </div>
  );
}
 
export default firstComponent;

After the component created the page will be render the below example:

Styled component first component

Done. you created the first component using a styled component. Also, I added the code demo URL for your reference.

5+