React Js – Three things beginner should know

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:

React Js JSX
React Js JSX – write less code, more powerful
// 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.

React js sperate to many many components
If the screen is a complex. Just seperate it to many many small 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">
         <span className="totalCount">{totalCount}</span>

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">
         <span className="totalCount">{this.props.totalCount}</span>

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

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

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>

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.

React js prop passing data between components
The main things we should remember about Props is they using to pass data between components

4. Reference

5. Bonus

React Js
Maybe it’s a reason why today we have React Js. So Funny!.

Có gì thắc mắc cứ comment đây nha! - Please feel free to comment here!
Chia sẻ bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *