> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/mynotes/udemy-react-and-redux/jsx.md). # JSX ## JSX (Section 1,2) React project directory structure: ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png) Start and stop application: ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png) | **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"));`

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>` `…`

public/index.html

<body>

  <div id="root"></div>

…

### Module Systems ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png) ### What is a React Component ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png) ### What is JSX ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image010.png) ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image012.png) ![](file:///C:/Users/bryan/AppData/Local/Temp/msohtmlclip1/01/clip_image014.png)