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.
Table of Contents
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.
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
Leave a Reply