Introduction to JSX and React Components

Configuring the commands

The execute and build commands can be configured by adding scripts in package.json file.
for example,

 "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

So now we can execute the parcel by running the following commands in the terminal

• npm run start

• npm start

and to make a build we can use : npm run build

---

JSX

JSX is an XML-like extension to JavaScript that allows developers to write HTML-like syntax in React.

Note: JSX is not html in JS and react can be written without using JSX but JSX makes things easier and it makes the code more readable.

JSX is not a valid JS syntax so JS engine can’t understand it.

How does JSX work ?

Babel is a JS compiler that is one of the dev dependencies of Parcel that transpiles the JSX code before it reaches the JS engine.
So, Babel converts the JSX code into React.createElement which React can understand.
So, JSX also creates a react element which is a JS object which is converted into HTML element by using the render method.

Things to remember about JSX syntax

• To add a class attribute in JSX, use className

• Attributes are always written in camelCase.

• Use parenthesis to write multiple lines in JSX.

 const jsxHeading = (
   <h1 className='head' tabIndex ='5'>
   Heading using jsx!
   </h1>
 );
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(jsxHeading);

---

React Components

There are two types of React components

1. Functional Component

2. Class Based Component

Class based components were used earlier, now only functional components are in use.

React Functional Component

It is a JavaScript function which returns a piece of JSX and JSX basically forms a React element so you can say it returns a React element.

Note: A React element should always start with a capital letter .

To render a react element you use : root.render(<Component />);

There are various syntax to write a react component

Method 1

 const Heading = () => (
     <div id='container'>
        <h1 className='head'>React functional component </h1>
     </div>
 );
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<Heading />);

Method 2

If you are using curly braces then you have to add return .

const Heading = () => {
   return <h1 className='head'>React functional component </h1>
};

Method 3

No parenthesis is needed in case of single line

const Heading = () =><h1 className='head'>React functional component </h1>

Method 4

const Heading = function() { 
    return (
        <div id='container'>
           <h1 className='head'>React functional component </h1>
        </div>
    )
};

---

Injecting JS in JSX

How to write a JavaScript expression inside a React component ?

We can write any valid JS expression in a React component by writing it in curly braces.

const number = 10000;
const Heading = () => (
        <div id='container'>
           {number}       // js expression
           <h1 className='head'>React functional component </h1>
        </div>
);

You can also add a react element inside a react component or inside another React element by using curly braces.

---

Component Composition

It is basically adding a component inside another component and it can be done in three ways.

 const Title = () => (
         <div id='container'>
             <h1 className='head'>component composition</h1>      
         </div>
 );

const Heading = () => (
        <div id='container'>
               {Title()}        //1
               <Title></Title>  //2
               <Title />        //3 (most used)
           <h1 className='head'>React functional component </h1>
        </div>
);

---

Fun Fact !

JSX prevents Cross-site scripting attacks.

Cross-site scripting (XSS) is a cyberattack that allows an attacker to execute malicious scripts on a trusted website or application. This can give the attacker access to the user's data, session tokens, and cookies.

It prevents by the use of curly braces so the js expression written inside curly braces is sanitized before execution.