Components is the most important concept in React. Component is just a part of a web page , which can be reused anywhere in the application.
React components can be of two types:
1) Function Component (State less)
2) Class Component (State full)
Before directly going into the technical terms and the coding part lets first understand what is state full and state less
What is state full and state less
A state full process keeps track of the state whenever there is a change in page.Let's consider example of gmail.
As soon as we login , we perform many actions.We never see the page refreshing every time , when we click on an action.
If we are composing a mail , and then clicked on the sent mail.Gmail still keeps track of the state and lets you perform other actions.It would be quite annoying If gmail wouldn't save the state and refreshes the page each time we click on a new action.So this is state full.
State less is just opposite of that , which doesn't store the state.
Frameworks like angular implements two way data binding in order to implement state full process.It always watches for changes in DOM and then updates the model. Two way data binding makes the process complex and sometimes even confusing.
React js uses one way data binding can be quite advantageous as it reduces the complexity and makes the implementation simple.
Now as we have little knowledge of what state full and stateless is lets move forward and understand how they are written
Function Components
Function components are associated with presentation.They are the simplest form of react component
const firstComponent = (props) => {
return (
<elementOrComponent/>
);
}
The function receives an object of properties mentioned as "props " and return react elements which describes what should appear on the screen.To understand better the above code is just like the below function.
function firstComponent(props) {
return <h1>Hello, {props.name}</h1>;
}
The content in the return statement is not HTML but it is a special java script syntax known as JSX.
What is JSX?
JSX is just the addition of XML syntax to javascript.
Just like XML, JSX also has tag names , attribute names and children.
JSX is just the addition of XML syntax to javascript.
Just like XML, JSX also has tag names , attribute names and children.
Class components
A function component or a class component is just the same in react's point of view.
A class component is a more featured way to define component in react.It acts like a function that receives props and also considers a private internal state as additional input that controls the returned JSX.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}This private internal state gives react the " reactive nature".
What is reactive nature of react? When the state of a component changes , those changes needs to be reflected. Here in react when we write html components , we need not worry of regenerating HTML for the browser's DOM. React will simply react to changes and will update the view as required.
The difference between state and props is that "state" can be changed but "props" are all fixed values.Class components can only change their internal state but not their properties.
Virtual DOM and JSX
It is not necessary to create react component with JSX .Whenever we are writing JSX , we are indirectly writing React.createElement(component, props, ...children) function.
example:
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
compiles into
React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' )
JSX gets compiled into pure java script and then works with the compiled javascript in the browser. The compiled part is the java Script representation of the DOM which react then translates into DOM operation.
Creating a component will be mentioned in the next article
Summary
- State full keeps track of state and stateless doesn't
- Function components cannot have state whereas class components have state.
- Whenever we are writing in JSX we are internally writing React.createElement(component, props, ...children) function.