React Bootcamp

Welcome apprentice warrior!

TOC

• Prerequisites
• Setup
• Verify
• Path
• Contributing
• License

Prerequisites

Signup for

• github
• bithound
• heroku
• travis CI

Install on your machine

• git
• latest chrome
• chrome react devtools extension
• redux devtools extension
• node
• npm
• yarn
• sublime
• sublime package control
• sublime packages: babel stylefmt eslint stylelint gitgutter jsonlint synced side bar flow
  NOTE: you can use any code editor / IDE you wish, as long as it has eslint, stylelint, and flow working

Setup

• fork the repo (and star it for good karma)
• open terminal and run ...

$ git clone [email protected]:YOUR_GITHUB_USERNAME/react-beginners-bootcamp.git
$ cd react-beginners-bootcamp
$ yarn install

Verify

verify development

$ yarn start # starts webpack-dev-server on port 7000

• open chrome at http://localhost:7000
• c the lovely welcoming message :)
• go to src/client/Welcome.jsx
• change something inside the <h1> tag
• c the changes in the browser WITHOUT you doing anything, and without the browser refreshing
• go to src/client/client.jsx
• delete line 18 //flow-disable-next-line and c a warning in your editor. Undo the delete.
• delete line 20 // eslint-disable-next-line global-require and c a warning in your editor. Undo the delete.

# on another terminal
$ yarn dev:start # starts express server on port 8000

• open chrome at http://localhost:8000
• make sure you see the lovely welcoming message :)
• go to src/client/server.js
• delete line 15 // eslint-disable-next-line no-console and c a warning in your editor. undo the delete
• on line 11, change the string inside res.send
• c the browser NOT refreshing
• refresh the browser and c the change you've made
• undo the change on line 11

verify production

# on a third terminal
$ yarn prod:build
$ yarn prod:start

• open chrome at http://localhost:8001
• make sure you see the (still being lovely) production message
• go to src/server/server.js
• change something inside line 11
• refresh the browser
• make sure u do NOT c your changes
• undo the change on line 11

# on a fourth terminal
$ ./node_modules/.bin/ws --port 8002 -d dist # starts ws server on port 8002

• open chrome at http://localhost:8002
• make sure you see the (still lovely) production message
• go to src/client/Welcome.jsx
• change something inside the h1
• refresh the browser
• make sure u do NOT c your chnage
• undo the change

Path

• module1
• routing
• advanced props and state
• redux

Contributing

issues, features requests, and PRs are always always welcomed! :)

License

Code for this bootcamp is available under the GPL v3 license