React Components Explained – codeburst

  • 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…
  • 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…
  • 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…
  • 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…

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…

React Components ExplainedCreated using Pixabay  CanvaThe 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’;class MyComponent extends React.Component { render () { return div This is a component /div }}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 thisMyComponent /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 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. 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…

React Components Explained – codeburst