React workshop includes step by step guide to create your very own first react application.

• Node.js
• yarn or npm

• Clone the repo on your machine
• Switch to byte-1 branch: git checkout byte-1
• bash start.sh : This command helps you to setup your CRA(Create React App) environment to begin with your development.

• Clone the repo on your machine
• Go to the root of the project folder execute either yarn or npm install to install all the dependencies modules for the project

The geekabyte-workshop includes the source code of your sample project.

The folder structure looks something like this

geekabyte-workshop/
  README.md
  .gitignore
  package.json
  yarn.lock
  public/
    index.html
    favicon.ico
    manifest.json
  src/
    movie-island/
    reducers/
    App.js
    App.css
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

src folder includes all the application specific code.

• movie-island/ folder includes all components of your application.
• reducers/ includes all actions and reducers required when you want to use Redux in your application.
• index.jsfile is your entry point to the application which includes all the configuration like redux store configuration.. etc.
• App.js is our final component which encompasses all our other components and rendered to the user.
• registerServiceWorker.js includes our service worker configuration.

Other than these we have .css & .svg files

public folder includes assets and your main index.html file

It also includes manifest.json where you can specify app specifc global properties.

Go to geekabyte-workshop/ folder and run

We will use heroku to deploy our application.

1. Signup and create an account on heroku
2. Download and install the utility cli as per your OS.
3. In your terminal run heroku login and complete authentication.

From the heroku dashboard create a new project and set a name. Your project url will be of the form https://{PROJECT_NAME}.herokuapp.com.

Set your current repository as a remote repository for heroku.

heroku git:remote -a {PROJECT_NAME}

Since we use Create React App to package our application we have to tell heroku how to build / bundle the application

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git

You can read more about build packshere.

Typically from the root of your folder you would run

git add .
git commit -m 'message'
heroku push origin master

to deploy the master branch onto the heroku cloud, but as our folder to deploy is a subfolder we will use the following command

git subtree push --prefix geekabyte-workshop heroku master

You should see your app deployed like this