React Components:

Today we are going to explore React Components that is one of the most important concepts in React. 

React Components are reusable chunks of JavaScript that output (via JSX) HTML elements. There are many ways of creating components in React but we are going to create our first component using ES6 class syntax. See our first program below:

Just like ReactDOM.render that we explored during our Day 1, the render function inside a component is also responsible for dealing with JSX and is going to return some JSX text.

Please note that you can wrap the tags that are being returned inside of parenthesis that will allow to better format your content. If you decide to skip them, you need to add your tags directly on the line with the return.

class WelcomeComponent extends React.Component {
  render() {
   return(
   <div>
     <h1>Welcome to Software Testing Trends</h1>
   </div>
   );
 }
}

The JSX we use for calling our newly created component (i.e. WelcomeComponent) from ReactDOM.render is like an HTML tag i.e. <WelcomeComponent/>. Not only it looks like HTML tag but it also behaves like an HTML tag, for example, you can place it in other HTML tags:

ReactDOM.render(
 <div> 
 <WelcomeComponent/>
 </div>,
 document.getElementById('main-container')
);

Components Properties (a.k.a props):

Components are very much like functions. Just like functions, you can pass arguments to the component that will alter component behavior. These arguments are known as component properties. These properties give dynamic behavior to the components. We can access a property by this.props property that every component has an access to. We need to wrap this inside curly brackets { and } as in JSX if we want something to get evaluated as an expression, we need to wrap that inside curly brackets.

class LearnComponent extends React.Component {
render() {
  return <h1>Lets Learn {this.props.subject}</h1>
 }
}

Now we’ll see a complete example where we’ll pass the property value as part of the component call:

We can have as many properties as we want so we can pass multiple parameters to our class.

Components can have children:

Just like HTML elements, a component can have children. From within a component, we can access a child element via children property accessed by this.props.children

Let’s see an example below:

Stateless Functional Components:

Another way to create a component is to use a stateless functional component. Our previous component LearnComponent is just a class that returns some UI. A stateless functional component is the same, except it’s a function that returns some UI. Let’s have a look on below example where we have replaced a class by an arrow function that is an ES6 function that returns some bits of UI, and then we’re going to render that to the dom using the render method.

If we want to return multiple JSX tags, we need to wrap those is a pair of parentheses as in our code above. If we have only one line of code to return then we can keep everything on a single line without using parenthesis as shown below:

const LearnComponent = () => <h1>Lets learn React</h1>

Now we’ll see how can we handle properties in stateless functional components:

We can also directly mention the name of the props in the function as shown below:

const LearnComponent = ({subject}) => <h1>Learning {subject}</h1>