I've created a ReactJS component in a .jsx file. Having read and followed the steps as exactly instructed by ReactJS.org here Adding React and found no programmatical errors or syntactical errors in my code, the ReactJS component still doesn't appear in my webpage.
If no syntactical errors or programmatical ones in both my .jsx file and my .html file too and if I followed the 3 steps correctly then does that mean that there were other steps I should have done but I don't know them?
If so, what are these steps?
My own guess is that there is a couple of edits I should do in index.js and in app.js files, shouldn't I?
Note: I have no idea about how to add ReactJS component except only the 3 steps ReactJS.org has written in the link above. What should I do?
Here's my .jsx file (it's named reactcounter.jsx)
import React, {Component} from "react";
const e = React.createElement;
class ReactCounter extends Component
{
state =
{
counter = 0,
}
badgeColours()
{
var colours = "badge badge-pill badge-";
colours += this.state.counter === 0 ? " warning" : "primary";
return colours;
}
addButton = () => {
return this.setState({counter: this.state.counter + 1});
}
removeButton = () => {
return this.state.counter >= 1 ? this.setState({counter: this.state.counter - 1}) : null;
}
render e()
{
return (
<span className={this.badgeColours()}>{this.state.counter}</span>
<button onClick={this.addButton} className=" btn btn-success">Add</button>
<button onClick={this.removeButton} className=" btn btn-danger">Remove</button>
)
}
}
export default ReactCounter;
const domContainer = document.querySelector("#ReactCounterExample");
ReactDOM.render(e(ReactCounter), domContainer);
and my .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ReactJS Component</title>
</head>
<body>
<div id="ReactCounterExample"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="reactcounter.jsx"></script>
</body>
</html>
