[React] JSX &Components

React is, in short, nothing but creating UI components. You can use the JavaScript function syntax, but, in general, you are going to use JSX (JavaScript XML) syntax. JSX is a syntax extension to JavaScript. Finally, let’s check the lifecycle of React.

JSX

JSX looks like HTML mixed with weird constructs such as curly braces {…}. React’s main functionality is to create reusable components in web applications. So it can be a nice idea that we can create HTML tags in the React code.

JSX is ultimately transformed (transpiled) into JavaScript and then rendered by a browser to generate HTML.

Curly Braces – Expressions

JSX is simply one big HTML element, which has many nested elements. In this HTML code, we can embed any JavaScript expression by wrapping it in curly braces.

JavaScript expressions can be used for HTML content or attributes.

HTML vs. JSX

There are some differences between HTML and JSX because some HTML names conflict with JavaScript.

• for —- htmlFor
• class —- className
• <div style color=”black”> —- <div style={{color: ‘black’}}>
• <!– Comment –> —- {/* Comment */}

<!-- HTML Comment -->
<div class="text-info" style="color: green"><div>
<lable for="name>Your Name</label>

{/* JSX Comment */}
<div className="text-info" 
  style={{color:'green'}}><div>
<lable htmlFor="name>Your Name</label>

Also JSX can reference JavaScript variables and functions.

function getTitle() {
  return "My Application Page!";
}

const About = (props) => {
  return (
    <div>
      <h2>{getTitle()}</h2>
    </div>
  );
};

Compile JSX

JSX needs to be compiled to JavaScript before rendering in browsers. Babel is the most popular transpilers that can compile JSX.

It is easy to set up Babel for JSX. Install the “babel-preset-react” package and configure this preset in the “.babalrc” configuration file.

{  
  "presets": ["env", "react"]
}

Components

A React Component is, in short, a JavaScript function that generates an output every time it is invoked. You can directly return UI through a function or wrap a function (render()) inside a class.

• A component is responsible for rendering the UI content.
• Nesting: A component can be nested inside other components.
• Reusability: A component can be easily reused throughout an application.
• Configuration: A component is not fixed. It can be configured when it is created.

Virtual DOM

A virtual DOM is an in-memory representation of real DOM. React uses the virtual DOM to minimize changes to the real DOM as a result of user actions. Through Virtual DOM diffing, React only updates what has been modified. This process is called “Tree reconciliation.”

Function Component

A function (presentational) component

• handles props (read-only data)
• cannot have state

import React from 'react';

const Greet = (props) => {
  return (
    <div>Hello, {props.name}</div>
  );
};

export default Greet;

You need to use a function component whenever possible. It is simpler than the class counterpart. If you do not need to change the state, stick to the function component.

Class Component

A React class component

• is a JavaScript class, which inherits from React.Component base class
• returns UI in the render() method
• can have props and states

import React from 'react';

class Greet extends React.Component {
  render() {
    return (
      <div>Hello, {this.props.name}</div>
    );
  }
}

export default Greet;

Class components can have states as well as props. When states are changed, the class component is re-rendered automatically.

The benefits of using a Class component:

• Easier code organization
• Can handle states -> Easy to handle user inputs
• Can handle lifecycle events -> Easy to do additional tasks in an appropriate moment

How to use components

It is easy to use the components in other components.

1. Import the Component
2. In the render function, use the component like a tag
3. You can pass the props like attributes

import React from 'react';
import Greet from './Greet';

function TestPage(props) {
  return (
    <div><Greet name="World1" /></div>
  );
}

export default TestPage;

Referencing the Main Component – Main Renderer

So you can wrap all your components in a root (main) component. Now, it is time to reference the main component in HTML.

At first, create an HTML with the root div.

<div id="app"></div>
<script src="/bundle.js"></script>

In the main JavaScript file,

1. Import the “react-dom” package
2. Call the react-dom’s render() method with the root component
3. Pass the HTML root element in the render()

import ReactDOM from 'react-dom';

ReactDOM.render(<App />,
  document.getElementById('app')
);