Github is a platform that lets software developers collaborate with code. Think of it like Google Docs but for software engineers. We'll learn more about using Git and Github another time but for now this serves as a warm welcome to the world of software construction. And yes this is a real person speaking and writing! In fact, it was ChatGPT that copied our style of writing documents lol
It's important to remember this as a beginner:
-
Building things with software is mostly about organizing information rather than being good at math. Programming languages use logic and computation to express ideas instead of equations and algebra.
-
Like the English language, you 8000 can express the same things in many different ways.
-
When something challenges you, fail faster and break the problem into more understandable steps.
The idea here is to expose you to concepts before you start to answer questions about it in the app so you aren't intimidated by it later. Don't worry about not understanding everything. In fact, try your best to make sense out of it at a glance or use AI to your advantage to create an understanding.
Let's observe these lists. We can see that:
my_custom_data && my_custom_listare equivalent.data_set && data_objectare also fundamentally equivalent.
let my_custom_data = [
1,2,3,'a','b','c',null,false
]
const my_custom_list = new Array(
1,2,3,'a','b','c', null, false
)
my_custom_data.push('new data')
my_custom_list.push('new data')
let data_set = {
intro: "Welcome",
title: "Chapter 1",
is_live: true
}
data_set.page = 4
data_set['book'] = 'Coding'
let data_object = new Object()
data_object["intro"] = 'Welcome'
data_object.title = 'Chapter 1'
data_object.is_live = true
data_object.page = 4
data_object['book'] = 'Coding'Additionally, in the example above, we're exposed to variable definitions, data types, arrays, functions and objects. A lot of the software that you write will operate on those concepts under the hood. This is why [] and new Array can create the same data - it translates to be the same thing when it comes to breaking down your code for computer to understand and turning your code into signals that can be sent across the internet.
Now in the example below, we take a look at creating our own custom objects. We create our own custom object, along with an interface of functions. Generally when it comes to data, you're able to create, retrieve, update or delete it in some form or another.
class House {
house_paint = null
constructor(paint){
this.house_paint = paint
}
getPaint(){
return this.house_paint
}
setPaint(paint) = (paint) => {
this.house_paint = paint
}
deletePaint = () => {
this.house_paint = null
}
}
let first_home = new House(
"pink"
)
let next_home = new House(
"blue"
)
// returns the value "pink"
let first_paint =
first_house.getPaint()
// returns the value "blue"
let next_paint =
next_home.house_paint
// still returns the value 'blue'
next_paint =
next_home['house_paint'] So that's creating data and working with data. You'll find that you can usually combine ideas depending on what you need to create. For example, the above component can also be written the following way:
function createHouse(paint = null) {
return {
house_paint: paint,
getPaint() {
return this.house_paint;
},
setPaint(paint) {
this.house_paint = paint;
},
deletePaint() {
this.house_paint = null;
},
};
}
//what is the value of the result?
const myHouse = createHouse('blue');
let paint = myHouse.house_paint;
myHouse.house_paint = 'red';
paint = myHouse.getPaint()
myHouse.setPaint('green');
paint = myHouse.house_paint
myHouse.deletePaint();
let result = myHouse['house_paint']Finally, we combine this to work with some code that renders the following screen
const CelebrationMessage = ({
name
}) => {
const styling_data = {
textAlign: 'center'
}
return (
<div
style={
styling_data
}
>
{name}
</div>
)
}
const App = () => {
return (
<section
style={{
border: '3px solid black'
}}
>
<header>
<h2>Good job!</h2>
</header>
<CelebrationMessage
name="You created a small app!"
/>
</section>
)
}And that's all! In the last example, we've used a library called React, which gives us access to special functions that are specialized for rendering elements on a screen. But it follows the same thought process as the stuff before it.
Remember that failing faster is in your best interest when learning new skills with software. This one pager document will be available inside of the app. There are also many other features to help your journey along the way, but I'll leave that to your exploration of the platform and everything it has to offer.
Stay focused and best of luck with the rest!