JSX
JSX (Section 1,2)
React project directory structure:
Start and stop application:
Starting file:
src/index.js
Three components inside src/index.js
file:
1. Import React and ReactDom libraries
2. Create a React component
3. Take the react component and show it on the screen
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
const buttonText = "Click Me!";
return (
<div>
<label className="label" htmlFor="name">Enter name:</label>
<input id="name" type="text" />
<button style={{ backgroundColor: "blue", color: "white" }}>
{buttonText}
</button>
</div>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
Note:
document.querySelector("#root")
refers to element with id of “root” in file:
public/index.html
<body>
<div id="root"></div>
…
Module Systems
What is a React Component
What is JSX
Last updated
Was this helpful?