1. What’s JSX and why it so trong?

For any people didn’t about JSX, JSX is JS + XML. A very powerful mixing from Javascript and HTML. That’s a special gift come from React Js.

If you need quick help from someone master in Reatjs, you can visit Toptal and hire. It’s amazing place where you can find top 3% freelancer.

Previously, when we want to create page, we should write a HTML first, and write a function in Javascript file. But now, with JSX, a HTML and Javascript can write in only one file. That’s very helpful.

// Without JSX, a HTML and Javascript can write with string concat.
// That is not easy if we have many item contain HTML.
var className = "green";
var text = "hello kien";
var htmlElement = "<div class=\"" + className + "\">" + text + "</div>";

Write a Javascript include HTML sometime make us confused. It’s not clearly. Because this is mixed, now, with the same feature, we write a little code. More performance
Like that:

// With JSX, a HTML and Javascript can mixed together.
var myClassName = "green";
var text = "hello kien";
var htmlElement = <div className={myClassName}>{text}</div>;

2. Component in React Js can break a complex UI

Not like Java or many languages, focus to the OOP (Object Oriented Languages). React Js focus to a component. They call it’s Component Oriented Languages. Everything in Reac Js around the components.

If the screen is very complex, they include many things (table, grid, searchbox, textbox,…). You can separate it to many components. Each component like atoms. They very small, easy to extends.

You should remember that’s value of React Js. All about components.
A component is a simple JavaScript class that inherits from the React.Component and implements a render method. This render method will simply need to return the JSX for the HTML it should render.

// Let me show you a example about the banana
import React from 'react';

class Banana extends React.Component {
   render() {
     var title = "Banana tree";
     var description = "All things write in here is about banana";
     var totalCount = "32";
     
     return (
       <div className="banana">
         <h3>{title}</h3>
         <h4>{description}</h4>
         <span className="totalCount">{totalCount}</span>
       </div>
     );
   }
}

With JSX, just include the Banana tag. It’s easy to understand.

// Import banana component
<Banana />

One more thing about a component, this is reusable in a different situation. You write a one component one time, and reuse it in everywhere.

3. Props are very useful

Components in React Js is very fantastic. But without Props (which mean properties), each components can’t pass data to another. They can’t send data, can’t communicate. Don’t worry, this is time for Props, a superhero.

Let take a look with example below:

// Instead fixed value for title, description and totalCount
// We use props.
import React from 'react';

class Banana extends React.Component {
   render() {
     return (
       <div className="banana">
         <h3>{this.props.title}</h3>
         <h4>{this.props.description}</h4>
         <span className="totalCount">{this.props.totalCount}</span>
       </div>
     );
   }
}

With JSX, we can pass a parameter for component Banana like this:

// Passing parameter between components through props
<Banana
  title="Banana tree"
  description="All things in here is about banana"
  totalCount="33"
/>

After compile, React Js will render a components with HTML source code:

<div class="banana">
  <h3>Banana tree</h3>
  <h4>All things in here is about banana</h4>
  <span class="totalCount">33</span>
</div>

Awww, after read a sample code about props. Now, we understand it is really easy to pass information from one component to another, using props.

4. Reference

• Understanding React Component.
• Components and props.
• Javascript Prototype in KieBlog.

5. Bonus