Fundamental React.js Concepts

This article is about JSX, Component, State, Props.

JSX (Javascript Syntax eXtension)

• JSX mainly used to create UI.
• JSX is neither HTML nor string.

const ele = <h1>Hello, world!</h1>;

• JSX produces React “elements” which will be then rendered to the DOM.
• JSX brings full power of Javascript(rendering).

JSX Expression

• We can put any valid JavaScript expression inside the curly braces in JSX. After compilation, JSX expressions become regular JavaScript.
• We can assign JSX to variable, we can pass/accepts JSX as arguments, we can return JSX from functions, we can use JSX inside for/if or any loops.

var name = "Moreshwar"; //declared name variable
var displayName = <h1>Hi, {name}</h1>; //created variable and assigned JSX with expression name
ReactDOM.render(
  displayName, // rendered displayName
  document.getElementById('root')
);

JSX Attributes

• We can specify attributes with JSX, but they should be used as camelCase (Because JSX is closer to JavaScript than HTML and so ReactDOM uses camelCase property).
• We may use quotes or curly braces to embed JavaScript expression in an attribute.

const ele1 = <div tabIndex="1"></div>; // with quotes
const ele2 = <img src={user.avatarUrl}></img>; // with curly braces

Component

• Components is like block, which is used to create resuable UI.
• Component is an independent micro-entities, reusable code and it contains HTML + Javascript.
• Components efficiently manages the data that changes over time.
• Component can have props as input.
• Component can have state to control behavior.

Types of components-

1. functional component

• Below, JavaScript function is functional component, because it accepts a single “props” object argument with data and returns a React element.

function HelloReact(props) {
		return <h1>Hello, {props.name}</h1>;
	}

2. class component

• Component is created using an ES6 class.

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

3. Stateful/smart component

• Component using state is known as stateful i.e. state that gets initialized in the constructor.

class _Statful extends React.Component {
	constructor(props) {
		super(props);
        state = {...};
	}
		render(){
	    ...
	}
}

4. stateless/dumb component

• Components don’t have state are referred as stateless
• Stateless component is either function or a class(but unless you need to use a life cycle hook in your components, you should go for stateless functional components).

const _Stateless = props =>{
	return {
		....
	}
}

5. Pure Component

• Purecomponent is guaranteed to return the same result given the same props and state.
• React.PureComponent is used to create Pure Component
• Functional component is a good example because, given an input, you know what will be rendered.
• Class components can be pure too if their props and state are immutable.

Props

• We can intialize props in constructor

class HelloReact extends React.Component{
    constructor(props){
     super(props);
   } 
}

• Props is an input to component which are immutable.
• Props are read-only, when you declare component you never changes its own props.
• Props are used to pass data from parent to child or by the component itself.

DefaultProps

• We can add default props to component.

HelloReact.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}

Props validation

• We can add validation on props as well.
• For that we need to import "PropTypes" from 'prop-types'.

HelloReact.propTypes = {
  name: PropTypes.string, //name must be type string
  age: PropTypes.number, // age must be type number
  propArray: PropTypes.array.isRequired, // propArray is required, else gives error
  displayUserData: PropTypes.func  // it must be function
};

State

• We can intialize state in constructor.

class HelloReact extends React.Component{
    constructor(props){
     super(props);
     this.state = {name: '', age: ''};
   }
}

• State is used to keep track of information between any renders.
• Components data will be stored in component's State which can be modified based on user action or other action.
• When a component state is changed React will re-render the component to the browser.

Ways to update state

1. this.setState({...})
2. this.setState(function(prevState, props){...})
3. this.setState(()=>{...})

setState can be executed in batches so you should not rely on values so use (2) or (3).