React JS: A Hands-On Introduction

React is "a JavaScript Library for Building User Interfaces," and all the cool kids are using it. So let's get together and talk about JS frameworks and what makes React so special. This is the example repo for an interactive presentation.

Link to slides.

Getting Started

• Clone this repo.
• npm run deps to install a few global dependencies.
• npm install to install the project dependencies
• npm start to launch the webpack server
• Navigate to http://localhost:3000 - it will livereload most of your changes.

Requirements (if you are having trouble with Getting Started)

• Node version 4.1.x. I think this will work with 5+ or 4.0.x but it hasn't been tested.
• Optional: Install eslint for your editor I use linter for Atom and linter-eslint
• Optional: If you are using eslint, install jsx support for your editor
• A few things that will be installed globally with npm run deps:
  • webpack
  • eslint
  • eslint-plugin-react
  • babel-eslint
  • eslint-plugin-babel

Tutorial Steps

1. Add a NewFriendForm and a FriendList to the rendered output of MainDashboard

• Add Last Name, Twitter Handle, is BFF Toggle and Submit Button to NewFriend Form
• Create Inputs, Toggle and Buttons in NewFriendForm > render()
• Create handlers for the new Inputs and Toggles in NewFriendForm.jsx
• Hook up Submit button in NewFriendForm.jsx
• Add friends to state in MainDashboard > handleCreateNewFriend()
• Test to see if your friends are being passed in - "You have 0 friend(s)" value should change when you submit the form.
• Pull data from FriendList's state into FriendList > outputTileElements() to create a title, subtitle and unique Identicon

Additional React Introductory Resources

• Comparison notes of 4 popular JS Frameworks by @makmanalp. Really solid, unbiased comparison of Angular, Ember, Backbone and React.

• React.js Introduction For People Who Know Just Enough jQuery To Get By Really great longread/tutorial with helpful illustrations and examples.

• React.js Best Practices for 2016 Goes into more depth than this tutorial, on topics like routing (using react-router) and state management (using Redux).

• Not exactly React but related to some of the code in this repo - ES6 Cheatsheet is pretty concise and hits on all of the good stuff that you can (read: should) be using now with Babel.