After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx:
import React, { Component } from 'react';
class Counter extends Component {
state = {
name: test
};
render() {
return (
<div>
<span> className="badge badge-primary">{this.state.name)}</span>
<button>Increment</button>
</div>
);
}
export default Counter;
However, instead of seeing badges, I encountered
className="badge badge-primary">testimport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
document.getElementById('root')
);
To address this issue, I researched online and attempted to configure my webpack.config.js file. However, the changes didn't have the desired effect, and I'm uncertain if I implemented the correct adjustments. Have any of you encountered a similar problem before?