ReactJS Basics: Components.

What are React Components

React components are code blocks that describe parts of the user interface. For example, the navigation bar on a website, the search bar, buttons etc. The page that contains these individual components is also a component. This points out that components can contain other components.

React's component are reusable, this architecture allows for easier development of applications. Components can be repeatedly used with different properties to display different information, for example, say we have card components representing the information of the company employees on their website. Instead of creating multiple cards, we just reuse a single card component while passing multiple properties for each employee, this way we can represent hundreds of staff with just one block of code. Very time efficient.

There are two types of Components in React:

Functional Components
Class Components.

Functional Components

Functional are JavaScript functions that can optionally receive an object of properties referred to as props, and return HTML (JSX) which describes the user interface.

//FunctionalComponent.jsx 
//Functional component example

import React from 'react';

const sayHello = () => <p>Hello World</p> //ES6 arrow function syntax

export default sayHello ;

The above code snippet shows a functional component that describes the UI by displaying a paragraph that contains the string "Hello world".

To use a component, we have to export it from the component file (in this case: functionalComponent.jsx), and then import it in the App.js file, which renders to the browser.

import sayHello from './FunctionalComponent.jsx'; //notice that we import the function it self (sayHello) from the containing file (Functional Component.jsx)

function App() { 
  return (
    <div className="App">
      <FunctionalComponent /> //here we include the containing file without it's extension in the App component.

    </div>
  );
}

Your component file can have the extension .js or .jsx .

Properties can be passed to a functional component from the App Component using props.

import sayHello from './FunctionalComponent.jsx'; 

function App() { 
  return (
    <div className="App">
      <FunctionalComponent  name = "Victory" job = "frontend developer" /> /

    </div>
  );
}

The functional component accepts props as follows:

import React from 'react';

const sayHello = (props) => {
//notice how props is passed as an argument to the sayHello function.

<p>Hello World </p>
<p>My name is {props.name} </p>
<p>I am a {props.job}</p>
}

export default sayHello ;

The above code outputs: Hello World My name is Victory I am a frontend developer.

Functional components are also referred to as stateless components. The term stateless means it doesn't have state i.e the component isn't dynamic. Real life example of state would be on the Facebook website, when you hit the like button for a post, the amount of likes on that post increases by one and it's rendered to the UI. Functional components ordinarily cannot achieve this (however with the introduction of ReactHooks this has become possible). This is where Class components come in.

Class Component

Class components are referred to as stateful components because they contain state.

Class components are ES6 classes that return JSX. Below, you see our same sayHello function, this time as a class component:

//ClassComponent.jsx 
//Class component example

import React, {Component} from 'react';

Class sayHello extends Component {
  render() {
      return <p>Hello World</p>
 };
};

export default sayHello ;