ReactJS|Creating First React Component

Leave a Comment / ReactJs / By

In this article we will talk about what is component and how to create our first react component with simple example.

React applications are made out of components.Components let you split the entire application into independent, reusable pieces which can then be composed together to form complex UI.

 

What is component?

A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

A React component can be of two types. It can be either a function component or a class component.

A component is a function or a Class which optionally accepts input and returns a React element.

Functional Component

A function component is the simplest way to define a React component that is to write a JavaScript function.

Const MyComponent = (props)=>{

Return(

<ElementOrComponent…/>

);

}

The function component accepts a single “props” (which stands for properties) object argument with data. It returns what looks like HTML, but is really a special JavaScript syntax called JSX.

Class Component

A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers an internal state as additional input that controls the returned JSX.

Class MyComponent extends React.Component{

Render(){

Return(

<ElementOrComponent…/>

);

}

A class component must contain render method and render method must contain a return statement and usually, this return statement returns a JSX expression.
The State and Props objects have one important difference that is inside a class component, the State object can be changed while the Props object represents fixed values and cannot be changed.
Given below is a simple Hello class component returning special JSX syntax inside the render method :
reactjsx

 

JSX allows us to describe our User Interfaces (UIs) in a syntax very close to the HTML that we are used to. It is, however, optional. React can be used without JSX, as you can see as shown  below :

reactelement

 

In fact, React just compiles the JSX and transform it into React.createElement() call as you can see in the above example inside the render method, which is pure JavaScript. React use babel library to convert JSX into javascript so that browser can understand it.Then it works with compiled JavaScript in the browser.

React.createElement method creates and return react element to be render to the page .React element is not what you see on the screen instead it describes what you want to see on the screen  or in particular it is a javascript object.

for example :

Consider this as simple JSX code which we are returning from a component .

<div id='login-btn'>Login</div>
Corresponding to the above JSX code the generated React.createElement() call look like this as shown below:
React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

createElement takes in three arguments. The first is a tag name string (div, span, etc), the second is any attributes you want the element to have, the third is contents or the children of the element, in this case the text “Login”. The createElement invocation above is going to return an object with this shape, which is a react element.

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

and when it’s rendered to the DOM (using ReactDOM.render), we’ll have a new DOM node that looks like this,

<div id='login-btn'>Login</div>
render method may consist of element (like <div>,<p>,<button> etc) or component of function or class type (like  “type: Hello” above).
When React sees an element with a function or class type , it will then consult with that component to know which element it returns, given the corresponding props. With that in mind, at the end of this process, React has a full Javascript representation of the DOM tree,which we called as Virtual DOM.
React efficiently translates it into DOM operations that it performs in the browser.

Let’s create a React component.

Functional Component

To create a function component, define a new function. Let’s make that function return an HTML element .Below you can see simple Hello function component example returning JSX with output Hello, Sara at right side.

funcexample

The props argument is an object that holds all the values that were passed to the component when it was rendered.

Then we can access this attribute inside the component with a curly bracket for props.name .

ReactDOM.render() comes from react-dom library we have imported.

ReactDom.render method accepts two arguments.

  • The first argument is which component or element needs to render in the dom.
  • The second argument is where to render in the dom.

Class Component

To create a class component firstly we have to define a class that extends Component after importing react library as shown below :

class Person extends Component{}
Below is the simple Person class component example with the output at the right side.

componentexample

The above Person class component consist of constructor which is called initially, only once when the instance of a component is created.

constr

Inside the constructor you must invoked super() method with props as an argument so that we can use this.props in our component.

Constructor is the only place where we can define state.The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

To change state we have to use setState() method .In the above Person class component you can see when we click on plus(+) button the onIncrement method will call and inside which we are incrementing our state age by one.

Thank you.I hope this tutorial will help you in understanding what is component ,its basics and how to create a component in our react application.

Leave a Reply