Lab 3

In this lab, you will see

• More on Git
• React
• And another React Generator

Version Control System and Git

• Git is especially useful for historical backups of versions of your code
• But, what makes Git especially popular is the fact that it's very easy to check changes out of the history.
• This is what makes Git perfect for team code-related projects

How Git Works

• Git works from inside a directory that has the files that you want to manage versions of
• It works with the help of a .git folder where you can back up your code
• The .git folder can be moved around. If you do move that folder around, Git clients will most likely think that files have changed, relative to where the folder is located in the directory tree

More on Git

• If it's your first time working on a project, then you may initialize a new Git repo in your project, by running git init, while cd'd into the folder in the terminal
• To commit your first changes, you first stage the changes
• You do so by running git add -A
• Next, you commit your changes, by running git commit -am "your message goes here"
• And congratulations! Your code history is now backed up!

Sharing your projects with Git

• One way to share your Git project is by actually sharing just the .git folder
• The person interested in your project will simply create a new folder, and put the .git folder there
• Once done so, they can simply type run git checkout some-branch-name
• But that's overkill
• Use a tool like GitHub
• Assuming that you just created a new GitHub repo called someproject, then, you can simply add the remote GitHub repo as a "remote" by running git remote add origin https://github.com/someusername/someproject.git, and then pushing it by running git push origin master
• Now, the person interested in your project can simply "clone" your repo by running git clone https://github.com/someusername/someproject.git, while cd'ed into a folder of their choosing.
• Once the command has finished, the person who "cloned" your repo can just cd into someproject
• Assuming that you added that person as a collaborator to your project, they should then be able to make changes locally, commit them locally, then push them out onto GitHub. Now we're really doing some team work!

Collaborating with Git and GitHub

• In the last section, I mentioned how you can push to master. Here's an alternative
• Locally, you create a new branch by running git checkout -b my-feature-branch
• You work directly on that branch
• Once you're done with your work, push that branch out to the remote repo, by running git push origin my-feature-branch (N.B. my-feature-branch is entirely a fictitious branch and you are free to call it anything)
• Then, you issue a pull request. Your collaborator will check out the changes locally, by running git checkout origin/my-feature-branch
• They will then run it and see if there's any issues. If there aren't, they give a thumbs up to the pull request, and the code can be successfully merged

Publishing your work to GitHub Pages

• Once your ready, be sure to compile your project
• Now, copy the compiled code to somewhere else, and possibly give it a new name
• Assuming that you are about to publish for the first time for your project, cd into the build files and run git init to initialize a new Git repo
• Copy the contents of your build into that folder
• Finally commit your changes
• Be sure that you are on the gh-pages branch, by running git checkout --orphan gh-pages
• Commit your changes into the local repo by running git add -A and git commit -am
• Add your remote repo that will serve the build files as a "remote" by running git remote add origin path-to-your-remote-repo
• Then push to your remote repo by running git push origin gh-pages, and you should be ready to go

Publishing newer changes to your site

• Go to your dist folder, and move the .git folder somewhere else
• delete the dist folder
• Go back to your project folder and build the project again
• Move the new dist folder where your old dist folder was
• Move the .git folder into the new dist folder
• Now, Git clients should be able to pick up the fact that there have been some changes made
• Commit those changes and push them out to the repo

React: A Front-End JavaScript Framework

• React is a new JavaScript front-end framework from Facebook
• Its only purpose is to manage the DOM, and provide a very rudementary data binding
• How data is managed is entirely up to you.
• Here's an example React application: https://gist.github.com/shovon/a7861f52d6367785d940
• Very easy to learn, compared to AngularJS

React's in-script DSL: JSX

• React's flag-ship language is JSX.
• React's JSX is regular JavaScript, but with an XML-like syntax added to it
• It's not exclusive to React, but so far, there seems to only be a handful of libraries and frameworks that JSX targets
• JSX may look like HTML. But don't be fooled! A lot of the HTML standard aren't implemented in JSX

Two Setup Options

Download one of two generators (or both)

MANUALLY

What to do

• Create a basic react view or component (keep it super simple)
• Commit and push your REACT APP to the gh-pages branch of your repo
• Link to your live React App, by PASTING and CREATING the link in the canvas text editor