React Components Explained – Manoj Singh Negi – Medium

Don't understand #ReactJS components? Get to know them with this cool guide:  #JavaScript

  • Something like thisimport React from ‘react’;class MyComponent extends React.Component { render () { return div This is a component /div }}class MyOtherComponent extends React.Component { render () { return ( div MyComponent / /div ) }}This way you are able to compose more complex and useful user interface for your users.
  • Component’s render method return JSX which then use to create real HTML output which will be rendered in the browser.The interesting Thing about render method is that it runs every time when your component State or Props updates.
  • Let me show you a exampleimport React from ‘react’;class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; } render () { return div My name is {this.state.name} /div }}// if we render this component the output will beMy name is ManojIgnore the super(props) (out of the scope of this article) focus on this.state this is where our component state lives.
  • Let’s see an example.class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; this.changeName = this.changeName.bind(this); } changeName () { this.setState({ name: “Your Name” }); } render () { return div onClick={this.changeName} My name is {this.state.name} /div }}In the above code we are telling our React component to call this.changeName whenever user clicks on the div.
  • You can run this code on jsFiddle here.PropsVisualise props as options that can be passed to a component to customize its functionality.For example, I have a heading component which renders a heading with subtitle.class MyHeading extends React.Component { render () { return div h1This is a heading/h1 pSubtitle/p /div }}If I will use this component it will always render same HTML, someting like this.This is a headingsubtitleIf we use our component in this way it is not of much use right ?

The simplest library I ever used in my life is React. As you know React is based upon component design. Everything in React is a component which makes it easy to reuse components frequently. You can…

@ReactiveConf: Don’t understand #ReactJS components? Get to know them with this cool guide: #JavaScript

The simplest library I ever used in my life is React. As you know React is based upon component design. Everything in React is a component which makes it easy to reuse components frequently.

You can compare components with lego blocks. We use them as building blocks to build a bigger and meaningful application.

So how do we create a component in React ? Let me show you how.

import React from ‘react’;

render () {

return

This is a component

See how easy it is to create your own component !!!

Now we can use this component anywhere inside our react application by writing something like this

Yeah! just like a simple HTML tag. This is the beauty of React it uses your existing knowledge of HTML & Javascript with some of new and modern concepts like virtual dom & component based design.

One of the most interesting things React allows you to do is to use your custom React components inside another concept. Something like this

import React from ‘react’;

render () {

return

This is a component

render () {

return (

This way you are able to compose more complex and useful user interface for your users. This feature also allow us to reuse component inside each other which encourages code reuse & easy to maintain code base.

So is this is it ? No of course not. Stay with me there is many more things to talk about.

Props & State

Okay so what ? what are these things ? let me explain.

React uses a render method which you have seen above to hold component views. Component’s render method return JSX which then use to create real HTML output which will be rendered in the browser.

The interesting Thing about render method is that it runs every time when your component State or Props updates. This process ensures whenever you change your data using application logic component’s view update to show new data to users. By using this simple mechanism React allows us to build powerful and almost easy to manage UI components.

Okay but still we don’t know about State & Props what are they ?

State is unique to your component. Every component has it’s own State where it store & retrieve data from. Let me show you a example

import React from ‘react’;

super(props);

this.state = {

name: “Manoj”

render () {

return

My name is {this.state.name}

// if we render this component the output will be

My name is Manoj

Ignore the super(props) (out of the scope of this article) focus on this.state this is where our component state lives. We are basically creating a state in our constructor and then retrieving the data from state and using it inside our component.

You noticed {this.state.name} ? if you are wondering what it is, this is how you embed a javascript expression inside your JSX. Whatever inside {} will be executed and its output is rendered in the browser. In case above JSX will retrieve data from this.state.name and embed it into our resulting html.

output will be something like this

My name is Manoj

Easy right ? Okay so you know about state now what ? React gives us a method which allow us to update the state and as you know whenever you update your state your component render method will be invoked resulting the browser to render updated data. Let’s see an example.

super(props);

this.state = {

name: “Manoj”

this.changeName = this.changeName.bind(this);

changeName () {

this.setState({

name: “Your Name”

render () {

In the above code we are telling our React component to call this.changeName whenever user clicks on the div. The this.changeName used this.setState which is provided by React to update your component state. When we click the div this.changeName change our name from “Manoj” to “Your Name”. As soon as component’s state updates the render process runs again but this time with new value of this.state.name which is “Your name” and our text changes from “My name is Manoj” to “My name is You Name”.

You can run this code on jsFiddle here.

Visualise props as options that can be passed to a component to customize its functionality.

For example, I have a heading component which renders a heading with subtitle.

render () {

return

This is a heading

Subtitle

If I will use this component it will always render same HTML, someting like this.

This is a heading

subtitle

If we use our component in this way it is not of much use right ? because it will always render the same HTML, for solving this problem React came up with props.

A way to pass data from one component to its child component. for example.

render () {

return

// Now I can use this component like this

The output will be

Whoo! this is awesome

And this is a subtitle

Whoo! this is More awesome

And this is second subtitle

This is great isn’t it ? Now your component is reusable right. You can pass anything in your heading and subtitle and it will be rendered inside you MyHeading component.

You can define Props on your component just like you are setting a HTML attribute. Like we defined heading and subtitle above and then you can access them in your component by using this.props provided by React.

Whatever prop you define on your component you can access them as this.props.whateverNameYouGivenToYourProp. You can also pass Numbers, Functions & javascript expressions to your prop by using {}.

Output will be

this is a subtitle

I hope this article helped you to understand React Components at more deeper level and you will use this knowledge to get started with React.

In the next article I will be talking about component life cycle & life cycle methods. If you want the article early please recommend and share this article among your fellow developers.

React Components Explained – Manoj Singh Negi – Medium