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>

…