in

React: Components – DEV Community


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


}
Enter fullscreen mode

Exit fullscreen mode

  • 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>
    );
  }
}
Enter fullscreen mode

Exit fullscreen mode

  • 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>
    );
  }
};
Enter fullscreen mode

Exit fullscreen mode

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>
    );
  }
};
Enter fullscreen mode

Exit fullscreen mode

  • 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>
    );
  }
};
Enter fullscreen mode

Exit fullscreen mode

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



Source: https://dev.to/rthefounding/react-components-4jih

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

How a plant virus could help stop cancers from reaching the lungs thumbnail

How a plant virus could help stop cancers from reaching the lungs

OSSSC Recruitment 2021 Notification Out for 2841 Vacancies for Group C Posts