Koncepcja podstaw React

React to frontendowa biblioteka JavaScript stworzona przez Facebooka. Jest to zgodne z podejściem opartym na komponentach, które pomaga tworzyć elementy interfejsu użytkownika wielokrotnego użytku.

1. JSX w React

Zwykle JSXpo prostu cukier syntaktyczny dlaReact.createElement(component, props, ...children)

Kod JSX:

<div>My Name is Hossain</div>

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

Możemy przekazać dowolne wyrażenie javascript w propsach za pomocą {}. Poniżej przykład :

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

3. Literały tekstowe

Możemy przekazać ciąg znaków jako rekwizyt. tam dwa wyrażenia JSX są równoważne. jest taki sam jak atrybut HTML.

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

Możemy już mieć rekwizyty jako obiekt i przeszliśmy do przekazywania rekwizytów w JSX. możemy użyć ...operatora „spread” do przekazania obiektów props.

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

Możesz przekazać więcej JSX jako elementy podrzędne props.childrenlub Display zagnieżdżony komponent tak samo jak HTML.

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

defaultPropsmożna zdefiniować właściwość w classkomponencie. ustawia domyślne właściwości w class. Jest to używane, undefindale nie używanenull

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

Jeśli nie masz pewności, czy proces kompilacji jest aktualnie skonfigurowany, możesz zainstalować React Developer Tools dla Chrome . jeśli odwiedzasz witrynę w nastroju produkcyjnym React, możesz zauważyć, że kolor tła narzędzi React Developer Tools jest ciemny. ale Twoja witryna jest w nastroju programistycznym, widać, że kolor tła Narzędzi React Developer Tools jest czerwony. jeśli zbudujesz swoją witrynę za pomocą create-react-app, możesz skorzystać z tego polecenia:

npm run build
or 
yarn build

Do tej pory możemy używać danych statycznych, ale gdy dane zmieniają się w celu zmiany stanu, możemy skorzystać useStatez formularza React hooks. płynął przykład dmuchnął: useStatejest funkcją. Jego domyślna wartość countwartości. czy setCount()zmienić statewartość. countwartość się zmienia.

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

W JSX możliwe jest użycie operatora trójargumentowego do renderowania warunkowego.

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

Obsługa zdarzeń w elemencie reagowania jest bardzo podobna do obsługi zdarzeń w elemencie DOM. istnieją pewne różnice w składni

• Nazwa elementu React używa camelCase.
• Dzięki JSX możesz przekazać funkcję jako procedurę obsługi zdarzeń, a nie ciąg znaków.

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