Hello once again, I am now in my 5th Week of bootcamp, and would further like to cover Javascript and react in this post. Last post we did not cover HTML, but to give a quick overview of HTML it's basically what dictates the content on a website, not how it looks. So if I wanted to create a website that displays an image and has the text "Hello There" it would look like this:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<img src="https://bs-uploads.toptal.io/blackfishuploads/components/blog_post_page/ontent/cover_image_file/cover_image/1279225/retina_1708x683_0521-react-redux-and-immutablejs-Waldek_Newsletter-993b50f4ae56e9ee6e024a309c23a6c4.png">
<p>Hello There</p>
</body>
</html>
Let me quickly Break down what is happening here: the <html> tag is used to enclose the entire file, the <head> tag includes all the metadata of the website, like the website icon and title, the <body> is everything you see on the website, the <img> tag encloses the image, and the <p> tag encloses any text that is a paragraph. There is obviously more to html than this, but that is a simple overview. If I wanted to append a simple p tag with standard Javascript, I would have to do the following;
const selecDiv = document.querySelector(#divid)
const paragraph = document.createElement("p")
paragraph.textContent = "Hello There"
selecDiv.append(paragraph)
that is what appending would look like in normal Javascript. but what I've been learning this past 2 weeks is an extension of Javascript called JSX, which allows you to write html right into Javascript, which is super helpful. For example, if I wanted to do exactly the same thing as above, all I would need to do is:
function appendParagraph(){
return (<p>Hello There</p>)
}
See, look how simple that is. Only two lines of code and I can see exactly what type of html I am coding in and exactly how it looks like. In the end making it easier for me to build websites and make them quicker(ish). There is also one concept that we covered that was extremely difficult for me to grasp: and that was something called States. Now you might think of all 50 of them that exist in the US, but that's not what I am talking about. To boil it down, states are basically what allows us to make more interactive and dynamic websites using datasets or changing how the website looks depending how you interact with it. Let me give you a really simple example of a state;
const [light, changeLight] = useState(true)
function lightSwitch(){
return
{light? (<p onClick={changeLight(!light)}>light on</p>)
:
(<p onClick={changeLight(!light)}>light off</p>)}
let me break down what is happening in the above code. What we first did was declare a State with light being the state and changeLight to be the modifier function. We set the initial state to true, which means the state will stay at that state until it is modified. Next what we did was create a function with something we call a Ternary. How a ternary basically works from what I've learned is if a state is true, it renders one thing, and if it false, then it renders something else. so you see the light? after the curly brackets? if the state is true, it executes the code before the :, if it is false it executes the code after it. One final part, we created an onClick that changes the state, so we use the changeLight setter function to change the state to the opposite of what it currently is. That's why it has an exclamation mark at the beginning within the brackets. When you view this on the browser, every time you click the text, it switches from light on to light off.
There is also one more concept we did last phase, but I did not cover in my last post; fetch. We use it to grab data from a local database or an API(Application programming interface) to get data so we can append it to our website. Let's see what a fetch looks like;
const emptyObj = {}
function getData(){
fetch("link")
.then(r => r.json())
.then(data => emptyObj(data)
As a final concept for this post, let's break down what is happening; With fetch, you can input any API or localhost link to retrieve data, .then tells what to do with that data, so it turns it into a readable .json. r being the response of the fetch. Then it finally takes that data and puts it in the emptyObj we defined, so when you see the code run in real time, it first is undefined(basically empty data), then once the fetch is complete it is filled with the data from the fetch.
There has been so much I have learned from this school, and I can't wait to learn even more. So many headaches, joys from it finally clicking in my brain, and happiness from being able to create things I enjoy, like my Phase 1 project. Week 5 of 15, done. Can't wait for the next 10!
Top comments (0)