React CodeDancing - Components, Props & State

MilosTanaskovic / React-CodeDancing

0 stars 0 forks source link

React CodeDancing - Components, Props & State #3

Open MilosTanaskovic opened 2 years ago

MilosTanaskovic commented 2 years ago

Create your first Component & Props

install simple extensions for ES& React/Redux/GraphQL/React-Native snippets

look at UI Prototype(from Figma) and organized/ break down your project into small chunks/components.

create components folder (for all components)

prop-drilling approach

ComponentName.defaultProps to store default props value if we did not pass props/data from parent component (prop-drilling method)

good approach is when you create new a component to style it (add css).

MilosTanaskovic commented 2 years ago

Header.jsx Component

Screenshot 2022-04-06 at 14 47 54

Adding Styles to Component

MilosTanaskovic commented 2 years ago

state handle (open this cart)

MilosTanaskovic commented 2 years ago

Events & PropDriling

Handling Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

Docs Handling Events in React

create new component (FeedbackStats)

pass feedback from App.jsx to FeedbackStats.jsx (with Prop-Drilling)

for(3 Reatings) - feedback.length

for (Average Rating: 8.7) - take avarage with reduce() method and then / feedback.length

avarage.toFixed(1).replace(/[.,]0$/, '')