• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » ReactJS Fundamental Part 2 – JSX, Component, Props And State

ReactJS Fundamental Part 2 – JSX, Component, Props And State

By Sigit Prasetya Nugroho ∙ May 11, 2020 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Learn about Components, Props, and State in the ReactJS fundamental part 2. If you already know the background and basic concepts of ReactJS in the first article
“Introduction And Everything That Must Be Known About ReactJS“, in this post, we learn more about ReactJS. This step is crucial, to do a project on a large scale, we need to master in advance what is JSX, Component, State, and Props on ReactJS. I share my knowledge about them; let us consider.

ReactJS Fundamental Part 2 JSX Component Props And State

Table of Contents

  • 1 JSX
    • 1.1 What is JSX?
    • 1.2 Basic rules for using JSX
  • 2 Components
    • 2.1 What is State Component React?
    • 2.2 How to create components ?
  • 3 Props
    • 3.1 What is Prop in React JS?
    • 3.2 What is the difference between state and props in ReactJS?
  • 4 State
    • 4.1 What is State?
    • 4.2 Basic rules for using State
  • 5 Bonus
    • 5.1 Tutorial how to update parent component by child component without redux

JSX

What is JSX?

JSX is an extension to Javascript that applied to the ReactJS library. JSX helps developers quickly write HTML code in Javascript functions. In other words, JSX is an HTML code embedded in the Javascript code.

JSX is not a Javascript syntax, so web browsers cannot read this syntax directly. A JSX compiler is needed to translate JSX into the regular Javascript language so that a browser can read it.

Basic rules for using JSX

1. HTML code must be Nested.

Related Articles :

  • 5 Best ReactJS Books Journey To Hero (Must Have)
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)

HTML code must have a prefix and a suffix. There shouldn’t be a miss so that the JSX compiler works perfectly without errors. Example:

1
2
3
return(
          <p>This is Statefull Component</p>
      )

2. Writing Javascript code inside an HTML tag is permitted by using the { } tag (This also applies to write comments in the script)

1
2
{// this is comment}
{this.state.order}

3. IF ELSE writing must be in inline mode.

1
<h2>{i == 'h2' ? 'H2' : 'Unidentified'}</h2>

4. Writing CSS styling recommended using inline mode.

1
2
3
4
5
6
7
8
9
10
let myStyle = {
         fontSize: 40,
         backgroundcolor: '#FFee00'
      }
 
      return (
         <div>
            <h2 style={myStyle}>Title</h2>
         </div>
      );

For writing CSS directly in React, please use camelCase rules such as borderRadius, paddingTop, etc.

To add CSS class names to elements using the “className” property, for example

1
2
3
const HelloComponent = () =>{
  return <p className="custom-p">This is Stateless component </p>
}

Components

What is State Component React?

Reacts Component are an essential part of the ReactJS application because the React application is a collection of components. Components are a kind of concept of how to make each part of the UI (display) can work independently and isolated from other parts.

Just as we make an HTML application layout, between headers, main content, and footers are separated into several files. The goal is that these files can be reused and easier to maintain if there are additional codes or code improvements.

How to create components ?

There are 2 types on how to create components in React, namely stateful components and stateless components.

The difference between stateless components and stateful components is how to make a component.

Stateless component

The stateless component is the same with a Javascript function in the ES6 style. See the following example.

1
2
3
4
5
6
7
import React from 'react'
import './HelloComponent.css';
const HelloComponent = () =>{
  return <p className="custom-p">This is Stateless component </p>
}
 
export default HelloComponent;

Stateful component

How to create a component using the derived class of React.Component. See the following code for how to create a stateful component in ReactJS.

1
2
3
4
5
6
7
8
class StateFullComponent extends Component {
  render(){
    return(
          <p>This is Statefull Component</p>
      )
  }  
  
}

How to call a component from a separate file using the import function as the following example

1
import ThumbnailComp from '../../component/ThumbnailComp/ThumbnailComp';

Props

What is Prop in React JS?

Do you know why this library called React? Because React is a library that reacts to data.

What is the difference between state and props in ReactJS?

Prop & State are both dealing with data, when to use State and when to use Prop?

Prop stands for Property. If you are familiar with HTML, this is similar to attribute in HTML elements. In writing code, if you use a stateless component, the Prop is a parameter. Whereas if you use a stateful component, Prop is a property of its class that can be accessed via the keyword ‘this.’ Are you confused? Okay see the following example

Example using props in stateless component :

1
2
3
4
5
6
7
8
const ThumbnailComp = (props) =>{
  return (
    <div className="thumbnail-wrapper">
          <p className="title">{props.title}</p>
          <p className="desc">{props.desc}</p>
    </div>
  )
}

Example using props in stateful component :

1
2
3
4
5
6
7
8
9
10
class ProductCart extends Component{
  state = {
    order:0
  }
  
  updateParentCounter = (value) =>{
      this.props.counterChange(value)
  }
............
............

Props generally used to communicate from parent components to child components.

State

What is State?

The State is private data on the component. This data is only available for that component and cannot inaccessible from the other components. Components can change their State. See the following example to understand better

1
2
3
4
5
6
7
8
9
10
class Product extends Component{
  state = {
    order:0
  }
 
updateState = () =>{
      this.setState({
                       order : this.state.order + 1
                 })
}

Basic rules for using State

1. Initial State.

In some instances of State initialization, writing code uses the constructor(). But I prefer this style because it’s simpler and easier to understand.

2. Update State.

To change the State, use this.setState({keyname: newvalue}) command. When the state changes automatically, the component rendered again.

3. Using State.

To read the State, use this.state.keyName command

Already understand about JSX, Components, Props and State on ReactJS? Try the playground demo below:

Bonus

Tutorial how to update parent component by child component without redux

Learn the demo application above so that you are increasingly proficient with React JS. Thus my short tutorial on components, props and state on ReactJS, hopefully useful

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com