Konsep dasar reaksi

React adalah library JavaScript front-end yang dibuat oleh Facebook. Ini mengikuti pendekatan berbasis komponen yang membantu membuat elemen UI yang dapat digunakan kembali.

1. BEJ di React

Biasanya JSXhanya gula sintaksis untukReact.createElement(component, props, ...children)

Kode JSX:

<div>My Name is Hossain</div>

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

Kami dapat meneruskan ekspresi javascript apa pun dalam alat peraga dengan {}. Mengalir contoh di bawah ini:

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

3. String Literal

Kita bisa melewatkan string sebagai penyangga. ada dua ekspresi BEJ yang setara. sama dengan atribut HTML.

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

Kita sudah dapat memiliki props sebagai objek, dan kita melewati props di BEJ. kita dapat menggunakan ...operator “spread” untuk melewatkan objek props.

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

Anda dapat meneruskan lebih banyak JSX sebagai anak-anak props.childrenatau Menampilkan komponen bersarang sama seperti HTML.

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

defaultPropsdapat didefinisikan properti dalam classkomponen. itu mengatur alat peraga default di class. Ini digunakan untuk undefindtetapi tidak digunakannull

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

Jika Anda tidak yakin proses pembuatan Anda telah diatur saat ini, Anda dapat menginstal React Developer Tools for Chrome . jika Anda mengunjungi situs Anda dengan suasana produksi React, Anda dapat melihat warna latar belakang React Developer Tools gelap. tetapi situs Anda sedang dalam mood pengembangan, Anda dapat melihat warna latar belakang React Developer Tools berwarna merah. jika Anda membangun situs Anda dengan create-react-app, Anda dapat mengalirkan pujian ini:

npm run build
or 
yarn build

Sampai saat ini, kita dapat menggunakan data statis, tetapi ketika data berubah untuk perubahan status, kita dapat menggunakan useStateformulir React hooks. mengalir contoh meniup: useStateadalah fungsi. Nilai default dari countnilai. jika setCount()untuk mengubah statenilai. countnilai berubah.

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

Di BEJ dimungkinkan untuk menggunakan operator ternary untuk rendering bersyarat.

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

Menangani event untuk bereaksi elemen sangat mirip dengan menangani event di elemen DOM. ada beberapa sintaks yang berbeda

• Bereaksi nama elemen menggunakan camelCase.
• Dengan JSX Anda dapat melewatkan fungsi sebagai pengendali acara, bukan string.

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