Props - свойства компонентов

Props от англ. properties - аналоги параметров в обычных функциях JavaScript.

Например

const MyComponent = props => ( 
  <div> Привет, {props.name} </div> 
); 

const el = < MyComponent name ="Mark" /> 

ReactDOM.render(el, document.querySelector('#root'));

В таких компонентах очень удобно использовать деструктуризацию

const MyComponent = ({name}) => ( 
  <div> Привет, {name} </div> 
); 

const el = < MyComponent name ="Mark" /> 

ReactDOM.render(el, document.querySelector('#root'));

Чтобы не таскать везде объект props, можно сразу в аргументах разбить его на переменные.


Ещё один пример.
У нас есть TodoList

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

import TodoListItem from './TodoListItem';

const TodoList = () => {
  return (
    <ul>
      <li><TodoListItem/></li>
      <li><TodoListItem/></li>
    </ul>
  );
};

export default TodoList;

И есть отдельный Item

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

const TodoListItem = () => {  
  return (    
      <span>Drink Coffee</span>
  );
};

export default TodoListItem;

Сейчас все Item содержат пункт Drink Coffee. Как присвоить каждому пункту уникальное значение?

Добавим в TodoList свойство label, которое будет содержать текст, который должен отображать данный пункт списка дел

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

import TodoListItem from './TodoListItem';

const TodoList = () => {
  return (
    <ul>
      <li><TodoListItem label='Learn JS'/></li>
      <li><TodoListItem label='Create awesome app'/></li>
    </ul>
  );
};

export default TodoList;

Теперь переходим в Item

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

const TodoListItem = (props) => {  
  return (    
      <span>Drink Coffee</span>
  );
};

export default TodoListItem;

Параметр props содержит все свойства. Соответственно, props.label это значение списка дел

Вместо Drink Coffee напишем {props.label}

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

const TodoListItem = (props) => {  
  return (    
      <span>{props.label}</span>
  );
};

export default TodoListItem;

Теперь внутри каждого пункта списка дел отображаются уникальные значения, которые мы указали в свойстве label

Если использовать деструктуризацию, код можно сократить

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

const TodoListItem = ({label}) => {  
  return (    
      <span>{label}</span>
  );
};

export default TodoListItem;

Так тоже будет работать.
Свойство может быть несколько
Добавим в TodoList свойство important. Если значение свойству не задано, оно равно true.

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

import TodoListItem from './TodoListItem';

const TodoList = () => (
    <ul>
      <li><TodoListItem label='Learn JS' important/></li>
      <li><TodoListItem label='Create awesome app'/></li>
    </ul>
  );

export default TodoList;

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

В TodoListItem добавим стиль - цвет шрифта для элемента, у которого important равно true

const TodoListItem = ({label, important = false}) => {  
  const styleItem = {
    color: important ? 'tomato' : 'black'
  };
  return (    
      <span style={styleItem}>{label}</span>
  );
};

export default TodoListItem;