React Tic-Tac-Toe

Facebook has written a very good introduction for the React library. You can find it from React Tutorial.

Alternatively, in case you found the above tutorial too hard, please try the step-by-step introduction to React first.

Do the Tutorial

The tutorial can be done either in your own internet browser (1) using the CodePen service or (2) locally on your computer. If you're unfamiliar with any software development, it's recommended to use CodePen as it's more straightforward.

(1) In Your Own Browser

The tutorial can be run through without any installations by starting from this code template in codepen. And following the tutorial through starting here.

(2) Run the tutorial locally

Once you have the application running in your local environment (Node.js or Docker) you can edit the files in your editor and see the changes immediately in the browser window here http://localhost:8000.

Prerequisites

• Git
• nodejs or docker
• Any shell, console or terminal.
• Any editor. We recommend Sublime Text, Atom or Visual Studio Code.

You are going to have to sign up to GitHub to clone code. If you want to avoid that, you can always just download the code (by clicking the green Clone or download -button).

Using Node.js

1. Install Node.js.

2. Open your favorite shell.

3. Clone this repository:

    git clone https://github.com/koodi101/lesson1-react-tictactoe.git
   

4. Go to the cloned directory:

    cd lesson1-react-tictactoe
   

5. Install dependencies:

    npm install
   

6. Run the app:

    npm start
   

7. Open browser in http://localhost:8000

Using Docker

1. Install Docker (download link for mac).

2. Open your favorite shell.

3. Clone this repository:

    git clone https://github.com/koodi101/lesson1-react-tictactoe.git
   

4. Go to the cloned directory:

    cd lesson1-react-tictactoe
   

5. Run the app:

    docker-compose up
   

6. Open browser in http://localhost:8000

Using Heroku

1. Install Heroku CLI

2. Create new app in Heroku

3. Clone this repository:

    git clone https://github.com/koodi101/react-tictactoe.git
   

4. Go to the cloned directory:

    cd lesson1-react-tictactoe
   

5. Login to Heroku on command line:

    heroku login
   

6. Add Heroku remote to git configuration:

    heroku git:remote -a \<app name\>
   

7. Tell Heroku to also install dependencies for development use:

    heroku config:set NPM_CONFIG_PRODUCTION=false
   

8. Tell the application to use port 80 instead of 8080:

    heroku config:set PORT=80
   

9. Push the code to Heroku:

    git push heroku master