Creating your first React component – Paritosh Pundir – Medium

Creating your first React component  #javascript #es6 #programming #react #reactjs

  • If you already understand how the setup process works continue reading, otherwise check this post: Quick guide to starting with React js using ES6Here is the code on our main react file, where we will call our first component.Code on Github to follow alongmain.jsxNow lets create a new folder Component and than create FirstComponent.jsx inside it.
  • js go ahead and use it, things will work the same way.In this file we will first import React and Component from react to use it for creating our first react component.import React, {Component} from ‘react’;With react and component ready for use, now go ahead and create a simple ES6 class as follows:class FirstComponent {}At the moment this is an ES6 class but not a react component, so lets extend it to make it a react component:class FirstComponent extends Component {}Now we have a react component but it is of no use.
  • React components has a function called render() which generates the view of our page.
  • Lets go ahead and create one h1 element that our component will render:class FirstComponent extends Component { render() { return ( h1I am the First Component/h1 ); }}We are almost done, but still we need to export this class.
  • So the final code looks like this:Now lets use this component in our main.jsx, just import it from the path and use it as you would use a HTML tag (don’t forget to close it with / ).

In a recent post we learnt how to get started with react and setting up webpack and react modules. If you already understand how the setup process works continue reading, otherwise check this post…
Continue reading “Creating your first React component – Paritosh Pundir – Medium”