We'll be working with Next.js which is a React.js framework which is a Javascript library. Both of which make things easier for us.
I would recommend you use VsCode as your editor. You'll also need git and Node.js.
If you haven't already you'll need to set your username and email for git like so:
git config --global user.name "Albert Einstein"
git config --global user.email "bertie@worlduniversity.edu"
Before we clone the repo if we are going to use git in the command-line we'll need to get an access token from github that will act as a password. Here's a tutorial on how to do that.
Now clone the repo, you can do that by:
git clone https://github.com/CS-UCY-EPL343/epl343.winter21.team7
Next install all dependencies with npm install. Run
npm run dev to start the webapp. Lastly open your browser and
go to localhost:300.
When multiple people are working on a git project there seems to be a general consensus on using branches a lot, and I agree. Master should be in a deployable state most, if not all of the time. If one wants to add a new feature or fix a bug they should create a new branch, work on it and when it's done and all other contributors agree merge it to master. Translated in actions:
git pull origin mastergit checkout -b branchName (-b creates a new branch, without -b you just switch to said branch)git add . ('.' means every single changed file)git commit -m "Commit message" (without -m a new editor spawns where you can write a commit message and description)git push origin branchName (you can add the -u flag once before origin and from that point on you can just git push)There are many naming conventions around git branches and commits. Here's what I think we should use.
You can find documentation along with examples and tutorials for Next and React at their sites which I linked at the top of this document. There are also plenty youtube tutorials. Here I'll try to mention some basics. You'll have more luck watching tutorials though.
Firstly let's start with html. Html determines the structure of a site and is like the skeleton of a human. It has many elements. An element looks like this:
<p id="test-paragraph">This is a paragraph</p>
Next we have Css which is the styling of a site. To style an html element you need an identifier for it. This can be the element itself(p, h2, div) it can be its class, id or any other valid selector. Here's how you would style an h2 heading.
h2 {
color: red;
backgroun-color: blue;
font-family: 'Comic Sans';
}
Js is what makes a site interactive and dynamic. It's a programming language without a type system.
const constantVariable = "This variable can't be reassigned to another value";
let variableVariable = "This variable CAN be reassigned to another value";
// This is fine no errors here, you can reassign it to a different type
variableVariable = 10;
variableVariable = {
name: "This is an object",
age: 20,
description: "This is how you create objects"
};
variableVariable.description = "This is how you can change an object's attribute";
variableVariable['newAttribute'] = "This is another way";
// This is how a function looks like
const myFunction = (arg1, arg2) => {
console.log("This just prints to the console, think println in c");
return "Return anything or nothing";
};
// Notice I can still call the function without supplying arguments
console.log(myFunction());
variableVariable.myMethod = myFunction;
// Same as myFunction();
console.log(variableVariable.myMethod());
Javascript can also manipulate html and css but we won't be doing that since we'll be using React.
React introduces the notion of components. A component is html + state.
// Like #include<math.c> in C
include React, { useState } from 'react';
include HouseComponent from './House.js';
// Components look like js functions but don't function like them
const myComponent = (properties) => {
// This is how you initialize state in a component
const [counter, setCounter] = useState(0);
const handleIncrease = () => {
setCounter(counter + 1);
};
const handleDecrease = () => {
setCounter(counter - 1);
};
return (
<div>
<p>Current counter: ${counter}</p>
<button onClick={ handleIncrease }>Increase</button>
<button onClick={ handleDecrease }>Decrease</button>
<HouseComponent windows={ counter } />
</div>
);
};
This component would increase or decrease counter based on what button was pressed as long as display the House component which we don't know what it does because we don't have its code.
What Next does is that it brings the back-end and front-end together. It give us 2 folders the api and pages folder. In the pages folder you can add files of React components that will comprise the different pages of the app. You see in react you only have one page. To add pages you would need extra packages like ReactRouter. The index.js file in pages is our homepage. If you add a test.js file in there with a React component and navigate to localhost:3000/test that component will appear. The api folder functions similarly but for http requests and instead of React components you have request handlers where you can process requests and respond to them. That's where all the db action will be taking place.
I hope this could be a basic understandable introduction of the various technologies we'll be using. Now it's time to start watching tutorials on these tools to better learn how they function as I barely scratched their surface.