👾 Github

Initial Setup

To get started, navigate to the directory you would like to create your local repo for this project

then run:

# initial setup

# copy and paste this in your terminal
git clone <https://github.com/Tufts-WICS/wics-site.git>

Before you start your ticket:

Always follow these instructions when you are starting a new ticket to ensure you have gotten the latest updates from the repo! (Note: do NOT do these steps if you are in the middle of working on your ticket! It may erase the work you have done)

# fetch new branches
git fetch

# navigate to main branch
git checkout main

# pull new changes
git pull

# create new branch for your ticket and go into it
git checkout -b "name-of-your-branch" 

# now you can work on your ticket in your IDE!

To submit your ticket/update your branch:

When you are done with your ticket or want to save your work to your branch, follow these steps:

# check that you have made appropriate changes
git status

# add files to push to your branch (2 options)
git add . # to add all files with changes
git add <filename> # or use this to add individual files

# commit your changes
git commit -m "briefly describe changes made"

# push changes to your branch
git push

To submit pull request for your ticket:

A “pull request” is when you submit your work for review and to integrate your work into the main branch! Navigate to your branch on the repo and you should see a green button to “Compare and Create Pull Request.” Click this and add a simple description of the work you have done, then make the pull request!

Github flow explained

React, Next.js, Typescript, Mantine

How does React work?

• React is a Javascript library for building user interfaces

  • Component based & modular

  • Developers can create large applications that can change the data on the UI without needing to reload the webpage

  • 3 parts of a webpage:

    • HTML: What’s on your webpage?
    • CSS: How does your webpage look?
    • JS: How can a user interact with your webpage?

  • An example of HTML/CSS

    

  • Another example of HTML/CSS

    

  • JS explained

  

  • You can see the console of a website by doing these steps:

    • Running “npm run dev” on your terminal and clicking on the localhost link
    • On the website, side click and choose “Inspect”, then choose the “Console” option

  • React uses JSX (Javascript Syntax Extension) —> a combination of HTML, CSS, and JS

  • An example of JSX

    

Learn more about React here: https://dev.to/thekrprince/react-in-a-nutshell-1kb3