NICAR18

Reactive Frameworks without Fear

Tyler Fisher | Jon McClure

---

Why you're here

Why you need a reactive framework in your life, in five minutes or less.

What you need

Grab this repo from github and install dependencies. (Assuming you have node installed already.)

Now run the dev script to get started.

Check out the files in your code editor of choice. The ones we'll be playing with are here:

Note on Future Syntax

We'll be using a few parts of future JavaScript syntax. If you haven't messed around with it yet, here's a good walk-through.

For the purposes of today, though, just check out these basics.

><<

Part 1: Hello JSX

JSX is a special markup syntax that lets you easily write HTML in JavaScript.

Key code
Try it together!
  • Create a second paragraph in JSX.
  • Use some JavaScript inside your JSX.
Further reading

~~/

Part 2: Hello Components

Components are simple functions that render markup using JSX.

Key code
Try it together!
  • Move your component to a separate module.

X#X

Part 3: Hello Props

Props are arbitray data passed to a component. That data can then be used to determine your component's content.

Key code
Try it together!
  • Get some JSON and use it to create multiple list items!

&--

Part 4: Hello Component Classes

Components built from a special React class have some extra functionality.

Key code
Try it together!
  • Make your list items all SCREAM-case with a component class method.

+**

Part 5: Hello State

As opposed to props, which are data handed down to a component from its parent, state is data that is internal to the component and that it can create and change on its own.

Key code
Try it together!
  • Update the component's state when a radio button is clicked.
  • Make the default button checked when the component is mounted -- i.e., a "controlled component!"

$(()

Part 6: Hello Bubbling

Event bubbling provides a way for child components to update their parents' state.

Key code

^^``

Part 7: Hello Component Lifecycle. (Hello D3.)

Components have a "lifecycle" that triggers methods in the moments before and after components are added to the DOM or updated. You can plug third-party libraries into those methods to do complex things.

Key code
Try it together!
  • Use another lifecycle method to update the chart when the button is clicked.

{\{~

Part 8: Hello Elections Machine!

OK, we aren't going to create a very complex elections app, but we'll show exactly how you can chain state through your components to create one.

Try it together!
  • Plug in our prefab Results component.

Xcc

What to do next

Try it on something, fail, learn, succeed, REPEAT!

Flag us on twitter or in news nerdery with questions, challenges and success stories.

-303-