Does a styled-component use JSX?

Question

I am learning to use react and styled components. While using the styled components package to create a button element, the React import at the top of my code editor gives a warning that react is defined/declared but never used.

Isn't creating a html button and assigning it to a javascript variable JSX? Do styled components already have the JSX logic built in?

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

&:focus {
  outline: none;
}

&:hover,
&:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}
`

export default Button;

Answer 1

The styled-components library is not a React library. It's plain vanilla Javascript (though depends on template literals which are a new feature of JavaScript, so you may need to transpile down to ES5 for broad compatibility). In your example you export what is effectively a plain old JavaScript object, not a React component. JSX is a syntax extension for efficiently writing React components in an HTML-like way. It's not being used here.