Begin React Workshop

Slides from the day

So, today we're gonna learn some react. We're gonna start by introducing you to the concepts in React by incrementally making a few components, and then after lunch, we'll build a basic app to entrench these concepts, consolidate what we've learned, learn some best practices, and generally try to fix most of the things wrong with the world today.

Setup

git clone https://github.com/foundersandcoders/begin_react_workshop.git
cd begin_react_workshop
npm install
git checkout [see branches below]

Now you're all installed, there's one more step you may need to take. To get developing, you'll need src/js and build/js folders. In the src/js folder, you'll need a file called main.jsx. That'll be your starting point. Once you've got those, open up three terminal tabs, and type:

npm run serve 
npm run live-reload 
npm run build:watch

Open a browser of your choice and navigate to localhost:8080, and hopefully you'll see nothing there. What an anticlimax, but I'm still proud of you all.

To get started, git checkout babysteps.

Note: if you get an EADDIRINUSE error, change the live-reload port in your package.json and in your index.html.

Branches

We'll be checking out regularly through the day, so on this branch you'll have a reference point:

• master - Landing branch
• babysteps - First steps branch
• babystepsA - Running code for the final part of first steps
• kidsteps - Some useful extras, best practices and so forth
• appmockup - The mockup for the app. Just HTML
• appcomplete - The dynamic version of the app
• es6 - The es6ified app

Scripts

There are a set of development scripts in the package.json for your use:

• npm run build - Lint your jsx, and build your jsx from src to build
• npm run dev - Build and serve your project at port 8080, with incremental building on src files changing, and auto-refresh on build
• npm run lint - Lint your jsx

Dev tools

browserify - lets you use the CommonJS require pattern in your frontend JS. Trundles recursively through your 'requires', starting from an entry point, and outputs a single bundle of js containing all your code. Ask for that file in your HTML page, and you'll be good to go.

         `browserify srcFile -o destFile`

---

watchify - browserify, but smarter. Only rebundles the changed parts of your code. Watches your entry point for any changes and rebundles incrementally when it sees them.

          `watchify srcFile -o destFile`

---

reactify - transpiles your JSX code to JS, when used as a transform with browserify. Also supports the transpiling of some es6 constructs with the --es6 flag.

          `browserify -t reactify srcFile -o destFile`
          `watchify -t reactify srcFile -o destFile`

---

http-server - Python SimpleHTTPServer but in node, and faster. Defaults to port 8080, but configurable with the --port flag

          `http-server`

---

live-reload - watches a directory for changes, and refreshes any HTML page currently open with a script tag pointing to the server.

          `live-reload watchPath --port 9081`

---

react dev-tools - a chrome extension to make debugging (and your life in general) much easier. Accessible from the chrome dev tools.

---

JSXHint - lint your tings

---

Resources

Ranked from 1-5 based on presumed react-experience, but all have been chosen for their approachability. Those in italics are particularly good.

Conceptual

• (1) React for stupid people - A brief overview of what React is, along with its pros and cons.
• (2) Boiling react down to a few lines in jquery - A distillation of some fundamental concepts in react in an easy-to-digest form
• (2) The react way - getting started - A fairly long but well-written introduction to react.

Design Patterns

• (3) Container componenents - A great pattern for separating concerns between data-fetching and presentation.
• (3) Smart and dumb components - A short article which outlines some good rules-of-thumb for implementing the pattern introduced in Container components.

Examples

• (3) React case study, pts.1 & 2 - A newcomer to React's comprehensively documented attempt to make a basic memory game. Pt.1 is the intial attempt with a number of errors - see if you can spot the problems before you move on to the next part. Pt.2 is the refactored, es-6, best-practice version (with input from a facebook dev). Make sure to read the comments on both.

Others

• React JSFiddle - lets you play around with React in your browser
• React cheatsheet - A good quick reference guide for concepts and syntax alike
• List of react resources - A fairly long, curated list of react/flux resources. A bit overwhelming at first, but really good when you get a bit more familiar with react.
• Flux tutorial