Introduction to React -

JSX is a syntax style used in React that lets you write code that looks a lot like HTML inside JavaScript. It was created to make building user interfaces easier to read and easier to think about, especially when a page has many parts. Before JSX, React code often used many React.createElement(...) calls, which worked fine but could become hard to read as the page grew. JSX gave developers a cleaner way to describe what they wanted to appear on the screen. Even though it looks like HTML, JSX is not exactly HTML; it gets changed into regular JavaScript before the browser uses it. One big advantage of JSX is that it makes component code shorter, clearer, and easier to organize. This helps people focus on the structure of the page instead of getting lost in long nested function calls. JSX also makes it easier to update the DOM because you describe the UI in a simple way, and React handles the work of figuring out what needs to change in the real page. In that way, JSX helps developers control and change the DOM more easily by letting them write a clear picture of the page while React manages the updates behind the scenes.

• JSX is a React writing style that looks a lot like HTML.
• It was made to help people build page parts in a way that is easier to read.
• Before JSX, React code often used longer React.createElement(...) lines.
• JSX helps you describe what should appear on the screen in a simpler way.
• React then uses that JSX idea to help update and control the DOM for you.
• This makes React code shorter, cleaner, and easier for many people to understand.

• This function can simply give back HTML-like code to show something on the page.
• JSX helps React understand what should appear, so React can update the DOM more easily.
• In this example, the HTML being returned is an h1 heading.
• The line return <h1>Hello, World!</h1>; gives that heading back to React.
• React can then place that heading on the screen when the component is rendered.

• This function can return HTML-like code to show something on the page.
• JSX helps React understand the page layout so it can update the DOM more easily.
• In this example, the returned HTML includes a div with an h1 inside it.
• The return part gives that HTML back to React so it can be shown.
• JSX needs one outer tag, so the div wraps around the h1.

• JSX helps React understand what should appear on the page, so React can update the DOM more easily.
• In this example, HTML-like code is returned from the function.
• JSX needs one outer tag, so the div wraps around everything inside.
• JSX can use many tags, such as div, h1, h2, and p.
• This lets you group different parts of a page together inside one React component.

• JSX helps React understand what should appear on the page, so React can update the DOM more easily.
• This function returns HTML-like code for a list.
• The outer ul tag wraps everything, so it follows the one outer tag rule.
• <SimpleList /> means use the SimpleList component here.
• render(<SimpleList />) is the usual JSX way to show the component on the page.
• render(SimpleList) is more like a simple shortcut idea, but render(<SimpleList />) is the more common real React form.

• This last code example shows inline CSS being added right inside the JSX.
• The style={{ ... }} part uses an object to hold the CSS settings.
• listStyleType: "disc" makes the list use round bullet points.
• paddingLeft: "20px" moves the list a little to the right.

• This function returns HTML-like code, and the ul is the one outer tag around the list.
• Inline CSS can be used here to add simple style settings right inside the tag.
• The style={{ listStyleType: "disc", paddingLeft: "20px" }} part helps show the list dots and adds space on the left
• In JSX one uses camel case for CSS properties.
• The CSS property list-style-type becomes listStyleType in JSX and React.
• The CSS property padding-left becomes paddingLeft in JSX and React.
• The {animal1} part places the value of animal1 into the first list item.
• The {animal2} part places the value of animal2 into the second list item.
• render(<AnotherList />) is the usual JSX way to show the component, while render(AnotherList) is more like a simple shortcut idea.

• This function returns HTML-like code, and it all starts with one outer tag.
• The outer tag here is the table, which wraps around all the rows and cells.
• Inline CSS can be used in React to style parts of the table right inside the tag.
• The style={{ border: "1px solid black" }} part adds a black border around each table cell.
• render(<SimpleTable />) is the usual JSX way to show the component, while render(SimpleTable) is more like a simple shortcut idea.

• This function returns HTML-like code, and it has one outer tag around everything.
• In this example, the one outer tag is a div.
• This simple function style helps you focus more on the HTML and CSS parts.
• In JSX, CSS names with two or more words usually use camel case.
• For example, background-color becomes backgroundColor in JSX.

• This function returns HTML-like code, and it has one outer tag around everything.
• In this example, the one outer tag is a div.
• This simple function style helps you focus more on the HTML and CSS parts.
• In JSX, CSS names with two words usually use camel case.
• For example, background-color becomes backgroundColor in JSX.
• Also, border-radius becomes borderRadius in JSX.