Anyone can explain this to me?

JavaScript
1

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”

2

props in React is analogous to the arguments passed to a function in Javascript, often gathered into an array args:

myFunction (...args) {
  args.forEach( (arg, index) => console.log(`argument[${index}]:`, arg) ); 
} // prints each argument's index and value to myFunction on a new line.

JSX elements have attributes just like attributes are passed to HTML elements:

<button type='button' onClick={myFunction('a', 'b', 'c')}>Click me to try</button>

If we were to make an attribute value array, we would lose information: ['button', myFunction('a','b','c')]. Similarly, we could make an attribute array, but that would be equally useless alone ['type', 'onClick']. We need a way to combine the non-indexed attributes (keys) and their values. Enter objects:

let attributes = {
  type: 'button',
  onClick: myFunction('a','b','c')
};

Since simple JSX elements (which look like HTML) don’t have any internal programming logic, we don’t really need anything this fancy for JSX elements. However, React Components (Capitalized, programmer-defined, have a render() method), do have program logic and need a way to access the “attributes” that we passed to these “element-like” things. For example, let’s look at this App to display a Portfolio in a well with two components that represent panels in that well which show a thumbnail with a thumbnail that is linked to the project and some text that described the project.

class MyApp extends React.Component {
  constructor(props){
    super(props);
    this.portfolioItems{
      fCCSurveyForm: {
        url: 'someURLstring',
        thumbnail: 'someThumbnailURL',
        text: 'The Survey Form project I made for FreeCodeCamp'
      }
      rockPaperScissorsGame: {
        url: 'anotherURLstring',
        thumbnail: 'anotherThumbnailURL',
        text: 'A web game I made to allow two players to play rock, paper, scissors'
      }
    }
  }

  render () {
    return (
      < PortfolioPanelWell >
        < PortfolioPanel webPageId={this.portfolioItems.fCCSurveyForm} />
        < PortfolioPanel webPageId={this.portfolioItems.rockPaperScissorsGame} />
      < /PortfolioPanelWell >
    );
  }
}

In the example above, notice that we pass things that look like attributes to the PortfolioPanel components. The “attributes” we passed are called “properties” of the components, shortened to props. The props are accessible inside the program logic for the PortfolioPanel, whether we declared them using class syntax or function syntax. In fact, the VALUE that we passed each attribute is accessible by the formula: props.attributeName. For example, inside of Portfolio Panel’s code:

console.log(props.webPageId);

prints whichever object we passed from App.portfolioItems.