GUI Components with REACT

M. Rocha  

ROP Exploring Computer Science

Container

App Layout

Data Flows Down

Smart Components: Pass data to reusable components

Reusable Components: Do not pass data to any other components

Passing Data to Components in React

This passes the category object to the Category component

In this example the App component is a smart component passing data to the Category reusable component 

Passing Data to Components in React

 The Category component gets the category object through this.props

Component State

 The state is an object that you access with this.state

 The this.state object can have as many properties as you want.

 Whenever a property in the this.state object changes, react will re-render anything that depends on that property 

Component Handlers

  Handlers are methods that handle events in your component

 Handlers are functions that you can access in your component class via this.handlerName 

Component Handlers

  We can pass Handler methods to child components 

 Handlers are functions that you can access in your component class via this.handlerName 

Component Handlers

  On the child component the handler will be accessible via this.props

Component Handlers

Congratulations!

No you know the basic fundamentals to create GUIs with REACT (JavaScript, HTML and CSS).

Complex apps are built using these same fundamentals in a larger scale