React JSX Props - Day Five

Introduction

In the fifth day of my React article series, we are going to learn what JSX is and what Props is in React. Before moving to the next concept, please read my previous articles.

• React Introduction – Day One
• React Environment Setup – Day Two
• React Fundamentals – Day Three
• Creating And Using React Components  – Day Four

What is JSX?

JSX is known for being a language that lets you "write HTML inside JavaScript." JSX is an external, domain-specific language that is optimized for generating XML-like documents. JSX stands for JavaScript XML. It makes HTML easy to understand.

HTML + JS = JSX

What is Props?

Props or properties are the constant immutable model values that the React component uses to render. Props are derived from HTML element properties. Working with React, the next thing you will run into are props. Props are like function arguments.

In the following example, we are going to see how to use props, we are not going start from scratch to create a React app and components; for that please read my previous articles.

Props are supplied as attributes

 

As in the above screenshot , we have to pass the props as the attributes in element i.e ‘articleName’ and ‘authorName’.

Access Props via the props property

The above screenshot shows how we can access the props by using the ‘props.propertyName’ i.e. ‘{props.articleName}’.

Following are the steps to use Props in React

1. Create a react application using ‘create-react-app app-name’.
2. After creating the application, open the src/App.js file. Paste the following code in that file,
   

   import React, { Component } from 'react';
   import logo from './logo.svg';
   import './App.css';
   
   class App extends Component {
     render() {
       return (
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h1 className="App-title">Welcome to C# Corner</h1>
           </header>
             <Article articleName={this.props.articleName}/>
             <Author authorName="Jeetendra"/>
         </div>
       );
     }
   }
   
   const Article = (props) =>{
     return(
       <h1 className="App-intro">{props.articleName}</h1>
     );
   }
   
   class Author extends React.Component {
     render(){
       return(
         <h1 className="App-intro">By {this.props.authorName}</h1>
       );
     }
   }
   
   App.defaultProps = {
     articleName: "What is Props in React?"
   }
   
   export default App;

In the above code you can see line number 36, we have to use the following code,

App.defaultProps = {
    articleName: "What is Props in React?”
}

The above syntax is used to initialize the default properties of components, syntax as follows,

Component.defaultProps = {
  propsName:'defaultValues',
  ...
}

3. Finally, we are done with the changes; now the next step is to run the application using the command ‘npm start’.
4. Next, after running the command, the application opens in the browser as the following screenshot,
   
   

In the above screenshot you can see ‘articleName’ props value is ‘What is Props in React?’ and ‘authorName’ props value is ‘Jeetendra’ we have set in defaultProps in ‘App’ component.

Another way to set the props value directly is by passing the values to the attribute as follows,

<Author authorName="Jeetendra"/>

Finally, we have created the prop's ‘articleName’ and ‘authorName’ used it in our default ‘App’ component both ways by using ‘defaultProps’ and directly passing the values to the component attributes.

Summary

I hope that beginners, as well as students, understood what is JSX and Props in React. If you have any suggestion regarding this article, please contact me. 

Stay tuned for other concepts of React coming soon!

“Learn It, Share it.”

<= Previous Article

Next Article =>