Giters

foundersandcoders / begin_react_workshop

Learning materials for the weekend Begin React workshop

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Begin React Workshop

Join the chat at https://gitter.im/foundersandcoders/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

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

About

Learning materials for the weekend Begin React workshop