Reactive Frameworks without Fear
---
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.
Further reading
+**
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!"
Further reading
$(()
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.
Further reading
{\{~
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.