Intro to React

​

Demo code + slides

https://github.com/etnichols/intro-to-react-workshop

About me

• Software Engineer @ Google NYC
• Google Forms, former Engineering Resident
• University of Kansas graduate - go Jayhawks!
• Freelance web developer

Goal

Understand the basics of React, and learn how to define React components.

Roadmap

• Overview
• Declarative programming
• Components
• Props
• JSX
• State
• Examples
• Interactive examples
• Advanced topics
• Q&A

What is React?

A declarative, component-based JavaScript library for building user interfaces

Source: https://reactjs.org

• ​

Declarative

declarative programming is a programming paradigm — a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

​

How is React “declarative?” Declare how a component should look, and let React do the low-level job of calling the right DOM API methods to actually render it

Source: https://dev.to/itsjzt/declarative-programming--react-3bh2

Declarative vs. Imperative programming

• “What we want” instead of “this is how you should do it”

Source: https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js

React

developers

Understanding Components

• Components split the UI into independent, reusable pieces
• Think about each piece in isolation
• Components = JavaScript functions
• They accept arbitrary inputs (props)
• They can manage internal state
• They return React elements describing what should appear on the screen
• Only requirement for React components: define a render method.

Source: https://reactjs.org/docs/components-and-props.html

Source: https://reactjs.org/docs/thinking-in-react.html

Understanding Props

• Unchanging, static values that are passed into a component
• A parent passes props to a child
• Essentially, the “inputs” to a React component
• Examples: title, color, a data object, a CSS class

​

A component with props: Greeter.js

HelloWorld: using the Greeter component

→

Greeter.js, with JSX!

JSX

• A syntax extension to Javascript
• Makes it easier to describe what the UI should look like
• Allows you to return HTML elements from a React component’s render method

Source:

https://reactjs.org/docs/introducing-jsx.html

Want to see what JSX compiles to?

​

​

https://babeljs.io/repl

Note: you don’t have to use JSX to use React. If you don’t like it, don’t use it!

What is state?

• A variable/changing value contained in a React component
• Unlike props, they are NOT read-only
• Can you think of times when we’d want a React component to have state?
• Handling user interaction
• Timers, counters
• Receiving data from a database or API
• Only use state when needed!

A component with state: Counter

Props and State recap

• Props: unchanging/static values from parent components down to children components
• State: keep track of changing/updating values related to a component
• Only use state when you need to, things can get complex quickly!

Interactive Examples

Advanced topics

• Virtual DOM
• One way data flow (Parent → Child)
• Lifecycle Methods
• Hooks (state and lifecycle methods for function components)

Thank you!

​

​

Questions?