React Components and Props

• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
• Components are like JavaScript functions. They accept inputs called “props” and return React elements describing what should appear on the screen.
• We have Function and Class Components.
• Props (Properties) are like function arguments, and we send them into the component as attributes.
• Props are immutable

The below two components are equivalent from React’s point of view.

Function Component

function Display(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Component

class Display extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React elements represents DOM tags and also User Defined Components like below

function Display(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Display name="Girish" />;  
 
---------or----------

class Display extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
const element = <Display name="Girish" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1) We call ReactDOM.render() with the <Display name="Girish" /> element.
2) React calls the Display component with {name: 'Girish'} as the props.
3) Our Display component returns a <h1>Hello, Girish</h1> element as the result.
4) React DOM efficiently updates the DOM to match <h1>Hello, Girish</h1>.

Creating Class Components

• The React component’s name must start with an upper case letter.
• The component has to include the extends React.Component statement.
• The component requires a render() method, which returns HTML.
• In the below code, we are creating a Course Component which returns <h2> element.
• To use this Course Component, keep <Course /> tag inside ReactDOM.render(<Course />,document.getElementById('root'))
• Use an attribute to pass a name to the Course component, and use it in the render() function ReactDOM.render(<Course name="React" />, document.getElementById('root'))

class Course extends React.Component {
  render() {
    return <h2>Welcome to {this.props.name} Course!</h2>;
  }
}

ReactDOM.render(<Course name="React"/>, document.getElementById('root'));

Components referring other Components

Components can refer to other components in their output. A button, a form, a dialog, a screen: in React apps, all those are expressed as components.

function Display(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Display name="Girish" />
      <Display name="Sanjay" />
      <Display name="Krishna" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

class Display extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
      <Display name="Girish" />
      <Display name="Sanjay" />
      <Display name="Krishna" />
    </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

Creating Separate Component Files

• We can create separate component files and can use anywhere by importing the component file in the application.
• File must start by importing React and end withexport default Car;

Display.js

import React from 'react';
import ReactDOM from 'react-dom';

class Display extends React.Component {
  render() {
    return <h2>Welcome to React Course </h2>;
   }
}
export default Display;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Display from './Display.js';

ReactDOM.render(<Display />, document.getElementById('root'));

More about props

Passing variable names to props

class Course extends React.Component {
  render() {
    return <h2>Welcome to {this.props.name} Course!</h2>;
  }
}

class App extends React.Component {
  render() {
    const coursename = "React";
   return (
      <div>
      <h1>Training</h1>
      <Course name={coursename} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Props in Constructor

props should always be passed to the constructor and to the React.Component via the super() method

class Course extends React.Component {
  constructor(props) {
    super(props); 
  }
  render() {
    return <h2>Welcome to {this.props.name} Course</h2>;
  }
}

ReactDOM.render(<Course name="React"/>, document.getElementById('root'));

If you pass no value for a prop, it defaults to true. These two JSX expressions are equivalent

<TextBox autocomplete />
<TextBox autocomplete={true} />

References

• https://reactjs.org/docs/components-and-props.html

Learn about React State and Lifecycle in the next upcoming React Blog Article

Happy Learning!