React Community - React Kla Meetup 2

Transcript

1. WELCOME TO REACT KLA MEETUP 2
2. Gideon Bamuleseyo Software Engineer, Andela Uganda Co-Lead Facebook Developer Circles Kampala
3. What is a React Component A component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear. Example of a simple React Component
4. WRITING REACT COMPONENTS You can also use an ES6 class to define a component: Example of a class Component
5. FUNCTIONAL(STATELESS) VS CLASS(STATEFUL) COMPONENTS
6. Functional Components • Functional - they are basically functions • Stateless - they don’t hold and/or manage state • Presentational - just output UI elements
7. Class Components • Classes - they are basically classes • Stateful - they hold and/or manage state • Smart - they contain logic • Container - hold/contain other components
8. Choosing a component to use if( • Need to manage local state || • Need to add lifecycle methods to your component || • Need to add logic for event handlers ) use class component else always use a functional component
9. PROPS
11. What are Props? Props are React’s way of making components easily and dynamically customisable. They provide a way of passing properties/data down from one component to another, typically from a parent to a child component (unidirectional dataflow)
12. Props with Class Components The number attribute is now accessed using this.props.number instead of props.number
13. STATE
14. What is State State is a JavaScript object that stores a component’s dynamic data and determines the component’s behaviour.