From Zero to know React — Components

Panda
From Zero To Hero
Published in
3 min readMar 6, 2019

Most important in React .

Component is important for React ! Why do I say ?

You can Review previous article about React

Component

  1. Design the Component
  2. Use the Component
  3. Component of the Component
  4. Component — Child and Dad information transfer

Design the Component

In React , we can use Class with ES6 , and React.Components is a Class .

If we want to create a Component , first we should extend it .

demo.jsx

Use the component

main.jsx

Component of the Component

Child.jsx
Demo.jsx
  • Parent Component : Demo.jsx
  • Child Component : Child.jsx

Props are read-only

We also use props to connect React’s components .

Demo.jsx
Child.jsx

props.children

We want to determine the internal structure of the child Component in the parent Component .

Demo.jsx
Child.jsx

props data transfer

The data only transfer between child and parents .

If you want to design a btn to create item .

How do we proccess ?

  1. Click Btn to trigger callback function
  2. Trigger Parent’s Component setState
  3. Parent’s Component redraw
  4. Change Item Props
  5. Item Redraw

If everybody like this article , welcome to share it and clapped (pressure can be up to 50)!

Weclome to help me like my LikeCoin Button(Logged in LikeCoin) .

My Ether Address : 0x0CC9E059BFf58a6bBe4b34c81e7f3416Af91091a

Contact Me

Hello, I am Panda .

Welcome to give me some comments or find me through the link.

Thx EveryBody !

--

--