Component Rules
- Must start with capital letter. (Line number 5 , Arrow func component)
- Must always return JSX(html)
- Dont forget to close the tag (Line number 12 , Arrow func component)
- <App/>
1. Function Component
function App() {
return <h2>Welcome to react js!!</h2>;
}
export default App;
2. Arrow Function Component
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
const App = () => {
return <div>Arrow function !!</div>;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
3. Class Component
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
class App extends React.Component {
render() {
return <h2>This is class component !!</h2>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
