React: Components

• Components are the core of React. Everything in React is a component, this post and later post you will learn how to create one.

• There's actually two ways to create a React component.

• The first way is to use a JavaScript function, creating a component in this way creates a stateless functional component.

  What's a stateless functional component?

• We'll go over more of that in a later time but for now basically it just means a component as one that can receive data and render it, but does not manage or track changes to that data.

• To make the component, a stateless component, a return function is one of the necessary things, by writing a JavaScript function that returns either JSX or null.

• Ex:
  

const MyComponent = function() {

return (
  <div>Hello World</div>
)


}

• One thing I forgot to mention is that React React requires your function name to begin with a capital letter.

Create a React Component

• Another way to define a React component is with the ES6 class syntax. In the following example, PlayStation extends React.Component:

class PlayStation extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>God Of War</h1>
    );
  }
}

• The code shown creates an ES6 class PlayStation which extends the React.component class. So the class PlayStation has access to many React features.
• As you probably already noticed it has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, here it would be React.Component. The constructor is a method used during the configuration of objects that are created with the class keyword.

Create a Component with Composition

• Now we will look at how we can compose multiple React components together. To do so we should render components as children. To render a component as a child in a React component, you add the component name written as a custom HTML tag in the JSX.
• Here there is a simple functional component called ChildComponent and a class component called ParentComponent. Let's add these two together by rendering the ChildComponent within the ParentComponent.
• Make sure to close the ChildComponent tag with a forward slash.\

const SubordinateComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class SuperiorComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am Superior</h1>
        <SubordinateComponent />
      </div>
    );
  }
};

Note: SubordinateComponent is defined with an ES6 arrow function because this is a very common thing when using React.

Use React to Render Nested Components

• Post Above me showed a easy way to write two components, but there's other ways as well with React.
• Another way is Component composition. When you are working with React, think about your user interface in terms of components.
• Let's Try:

const TypesOfGames = () => {
  return (
    <div>
      <h2>Games:</h2>
      <ul>
        <li>Battlefield</li>
        <li>Assassin's Creed/li>
        <li>Call Of Duty</li>
        <li>Destiny</li>
      </ul>
    </div>
  );
};

const Games = () => {
  return (
    <div>
      { /* Change this part of code */ } 
    </div>
  );
};

class TypesOfVideoGames extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Types of Video Games:</h1>
        { /* Change this part of code */ }
      </div>
    );
  }
};

• There are two functional components defined in the code above, called TypesOfGames and Games. Take the TypesOfGames component and write it, or nest it, within the Games component. Then take the Games component and nest it within the TypesOfVideoGames component. The result should be a child component, nested within a parent component, which is nested within a parent component of its own!

• Ex:
  

const TypesOfGames = () => {
  return (
    <div>
      <h2>Games:</h2>
      <ul>
        <li>Battlefield</li>
        <li>Assassin's Creed/li>
        <li>Call Of Duty</li>
        <li>Destiny</li>
      </ul>
    </div>
  );
};

const Games = () => {
  return (
    <div>
      <TypesOfGames/>
    </div>
  );
};

class TypesOfVideoGames extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Types Of Video Games:</h1>
        <Games/>
      </div>
    );
  }
};

• You break down your UI into its basic building blocks, and those pieces become the components. Honestly This just really helps to separate the code responsible for the UI from the code responsible for handling your application logic.