: Laying the Foundation

In this lesson, we'll delve into the foundational aspects of starting a React project and understanding JSX, components, and their interactions.

Starting the Project

Initiating a React project can be a bit repetitive, especially when utilizing commands like npx parcel indexedDB.html. To streamline this process, we can create scripts.

Inside the package.json file, define scripts like:

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html",
  "test": "jest"
}

When entering a new company and unfamiliar with the project setup, check the package.json file's "scripts" section. You'll find the necessary commands there.

To execute these scripts, use:

npm run <name of the script>

For example:

npm run start

Alternatively, you can use npm start, but remember that it only works for "start" and not for "build."

Part 2: Understanding JSX

Let's start fresh by clearing all the code in app.js and focusing on JSX. JSX, or JavaScript XML, is a syntax extension for JavaScript, making it easier to write and add HTML in React.

While React can be written without JSX, using JSX simplifies the code. JSX is not HTML inside JavaScript; it's an HTML-like or XML-like syntax.

Creating a React element using core React:

const heading = React.createElement(
  "h1",
  { h1: "heading" },
  "hello world"
);

And creating the same element using JSX:

const jsxHeading = <h1 id="heading">hello world</h1>;
console.log(jsxHeading);

Remember, always write code that other developers can easily understand.

Behind the Scenes: JSX and Babel

Behind the scenes, when the browser encounters JSX, it doesn't understand it directly because it's not valid JavaScript code. Babel comes into play as a JavaScript compiler/transpiler, converting JSX into JavaScript that the browser can comprehend.

Example:

class JSXDemo extends React.Component {
  render() {
    return <h1>This is JSX</h1>;
  }
}

ReactDOM.render(<JSXDemo />, document.getElementById('root'));

Babel converts this JSX into:

class JSXDemo extends React.Component {
  render() {
    return React.createElement("h1", null, "This is JSX");
  }
}

JSX Syntax

When using JSX, replace the HTML class attribute with className. For instance:

const jsxHeading = <h1 className="heading">hello world</h1>;

For multiline JSX, enclose it in parentheses:

const jsxHeading = (
  <h1 className="heading">
    hello world
  </h1>
);

Consider using the JSX converter extension in VS Code to directly convert HTML code to JSX.

Part 3: React Components

Functional Components

Functional components are a new and preferred way of creating React components. They are normal JavaScript functions that return JSX. Remember, the first rule of creating a component is that it always starts with a capital letter.

Observing this syntax frequently:

const HeadingComponent = () => {
  return <h1 className="heading">hello world</h1>;
};

Some developers prefer a concise syntax without the return keyword:

const HeadingComponent = () => (
  <h1 className="heading">hello world</h1>
);

These syntaxes are equivalent.

Nesting JSX

You can nest JSX within a component:

const HeadingComponent = () => (
  <div id="container">
    <h1 className="heading">hello world</h1>
  </div>
);

Now, let's integrate this component into the root:

const root = ReactDom.createRoot(document.getElementById("root"))
root.render(<HeadingComponent />)

Component Composition

Component composition involves rendering one component inside another. For instance, rendering a Title component inside a HeadingComponent:

import React from "react";
import ReactDOM from "react-dom";

const Title = () => (
  <h1 className="head" tabIndex="5">
    title heading
  </h1>
);

const HeadingComponent = () => (
  <div id="container">
    <Title /> {/* Component inside a component */}
    <h1 className="heading">hello world</h1>
  </div>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<HeadingComponent />);

You can also insert variables inside components, like the variable number in the HeadingComponent.

JSX Interaction

Inserting a React element into a component is straightforward using curly braces {}:

const elem = <span>React element</span>;

const title = (
  <h1 className="head" tabIndex="5">
    {elem}
    hello world
  </h1>
);

Inserting a React element into another React element follows the same pattern:

const elem = <span>React element</span>;

const title = (
  <h1 className="head" tabIndex="5">
    {elem}
    hello world
  </h1>
);

Handling Malicious Data

When dealing with potentially malicious data from an API, JSX takes care of security concerns, preventing Cross-Site Scripting (XSS) attacks. JSX automatically escapes and sanitizes the data before rendering, ensuring a secure application.