Концепция основ React

React - это интерфейсная библиотека JavaScript, созданная Facebook. Он следует компонентному подходу, который помогает создавать повторно используемые элементы пользовательского интерфейса.

1. JSX в React

Обычно JSXпросто синтаксический сахар дляReact.createElement(component, props, ...children)

JSXКод:

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

Мы можем передать любое выражение javascript в props с помощью {}. Пример ниже:

<Component sum={5 + 9 + 1} />

3. Строковые литералы

Мы можем передать строку как опору. там два выражения JSX эквивалентны. это то же самое, что и атрибут HTML.

<Component name="Hossain" />
<Component name={'Hossain'} />

Мы уже можем иметь props как объект, и мы перешли к передаче props в JSX. мы можем использовать ...оператор «распространения» для передачи объектов реквизита.

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

Вы можете передать больше JSX в качестве дочерних props.childrenэлементов или отобразить вложенный компонент так же, как HTML.

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropsможно определить свойство в classкомпоненте. он устанавливает свойства по умолчанию в class. Это используется, undefindно не используетсяnull

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

Если вы не уверены, что ваш процесс сборки настроен в настоящее время, вы можете установить React Developer Tools для Chrome . если вы посетите свой сайт с настроением производства React, вы увидите, что цвет фона React Developer Tools темный. но ваш сайт настроен на разработку, вы можете видеть, что цвет фона React Developer Tools красный. если вы создаете свой сайт с помощью create-react-app, вы можете передать эту благодарность:

npm run build
or 
yarn build

До сих пор мы могли использовать статические данные, но когда данные изменяются для изменения состояния, мы можем использовать useStateформу React hooks. поток пример взорвался: useStateэто функция. Его значение по умолчанию count. если setCount()изменить stateзначение. countзначение меняется.

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

В JSX возможно использование тернарного оператора для условного рендеринга.

<div>{name ? name : 'What is your name?'}</div>

Обработка событий для реагирующего элемента очень похожа на обработку событий в элементе DOM. есть некоторые отличия синтаксиса

• В названии элемента React используется camelCase.
• С JSX вы можете передать функцию как обработчик события, а не строку.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>