React-Redux game
- It is a 2-player game (no computer opponent, playing in the same browser window)
- Before each round the players are asked for their names
- Players switch after every turn
- Once a round is finished, the winner (or draw) will be displayed on a leaderboard
- Clone the project.
git clone https://github.com/mnoleto/tictactoegame.git
. - Install dependencies.
npm install
- Run the setup script.
npm run setup
- Run the app - dev mode.
npm start -s
- Automated production build.
npm run build
- Install Node 4.0.0 or greater - (5.0 or greater is recommended for optimal build performance). Need to run multiple versions of Node? Use nvm.
- Install Git.
- Disable safe write in your editor to assure hot reloading works properly.
- On a Mac? You're all set. If you're on Linux or Windows, complete the steps for your OS below.
On Linux:
- Run this to increase the limit on the number of files Linux will watch.
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
On Windows:
- Install Python 2.7. Some node modules may rely on node-gyp, which requires Python on Windows.
- Install C++ Compiler. Browser-sync requires a C++ compiler on Windows. Visual Studio Express comes bundled with a free C++ compiler. Or, if you already have Visual Studio installed: Open Visual Studio and go to File -> New -> Project -> Visual C++ -> Install Visual C++ Tools for Windows Desktop. The C++ compiler is used to compile browser-sync (and perhaps other Node modules).
- Make sure you ran all steps in Get started including the initial machine setup.
- Run
npm install
- If you forget to do this, you'll see this:babel-node: command not found
. - Install the latest version of Node. Or install Node 5.12.0 if you're having issues on Windows. Node 6 has issues on some Windows machines.
- Make sure files with names that begin with a dot (.babelrc, .editorconfig, .eslintrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
- Don't run the project from a symbolic link. It may cause issues with file watches.
- Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in this project.
- Make sure you don't have NODE_ENV set to production on your machine.
Tech | Description |
---|---|
React | Fast, composable client-side components. |
Redux | Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux. |
React Router | A complete routing library for React |
Redux Saga | An alternative side effect model for Redux apps |
Redux Sauce | Provides a few tools for working with Redux-based codebases. |
Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. |
Webpack | Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. |
Browsersync | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. |
Jest | Automated tests with built-in expect assertions and Enzyme for DOM testing without a browser using Node. |
TrackJS | JavaScript error tracking. |
ESLint | Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. |
SASS | Compiled CSS styles with variables, functions, and more. |
PostCSS | Transform styles with JS plugins. Used to autoprefix CSS |
Editor Config | Enforce consistent editor settings (spaces vs tabs, etc). |
npm Scripts | Glues all this together in a handy automated build. |
Starter kit used: React Slingshot Project