Online React Exploration

[periode]

Create a React application by:

1. going to glitch.com.
2. creating a new account, or signing-in
3. creating a new hello-react-app project

Once the application is created, modify the App.jsx, styles/style.css and the files in pages/ in order to make the react app look like the website you're working on!

Post a link to your glitch project (e.g. https://pierre-basic-react.glitch.me), along with:

• things in React that you're confused about (it's OK if you're confused about most things, but it's important to articulate them, as it helps us think through what exactly we don't understand)
• things in React that you think you figured out (for instance, what components might be doing, or what import might be doing; feel free to look up other documentation, such as the official tutorials)

[Cate-Hackett]

https://first-react-attempt-cate.glitch.me
https://glitch.com/edit/#!/first-react-attempt-cate

Weird words like "li" and "ul". Turns out that it is a list of items .. and then the other ("ul") is for listing/ using the list?
Can't figure out how to put background photo - tried to do it in style css and it didn't work ... Maybe should attempt in html home page. Change the background color instead and then couldn't change the about page link color (sigh). Messed up the footer so I commented it out :( Taking a long time to reorganize formatting (css) and what not. Made a fun interaction keeping the interactive visual with the title though. Wondering if i could make the gif start with the click of the heart.

[marianapazzi]

https://holy-gregarious-dog.glitch.me/

I struggled with function component at the beginning, and just understanding how different components are put together. But now I think I like how everything is organized into smaller parts. I also didn't understand exactly what the key prop is.

[Gthunderr]

https://berghain.glitch.me/

I have the basic structure of my site. However I'm struggling with getting the images to actually appear as themselves rather than black boxes. I researched how to upload images in gtich/react, and it involves getting the images URL from the assets folder. I tried using:

import React from 'react';
const imgURL = "asset URL from the Glitch asset folder";

function Header() {
return ;
}

export default Header;

within my jsx and also html sections and with the image url, but the images are still not appearing. There are some differences in language/syntax in react vs. what we were previously learning, which i have yet to figure out.

[harrydnewman]

https://brainrotarchive.glitch.me/

I think that Glitch is a really useful tool to quickly deploy react apps onto the web, and I think it creates a very easy environment to begin learning react. However, I also found many aspects of it frustrating. I think that glitch’s heavy reliance on a GUI often times actually makes it slower to get things done, such as installing packages. I feel like because I have become so accustomed to BASH it made it really difficult to use an environment where solving problems didn’t feel intuitive and it made me feel like I had less control over my code. I also was not a fan of the fact that assets weren’t stored in the file structure itself, you can’t batch upload files, you can’t select and copy an array of links from a group of files, and you cant write a script to collect all the assets for you either because of the way the links are formatted. Overall, I think that Glitch is a really fantastic platform for learning react, however, at the same time I feel like if I were to only learn react through it, it might be difficult to migrate into a more traditional environment due to its proprietary nature.

[el-dah]

I tried four times to recreate the format of my original site on the Glitch React template

Since this is my fifth attempt I'm just going to include what i have here: https://glitch.com/edit/#!/eldah-react

Harry was so kind as to explain what should be in my terminal but I didn't have success modifying that portion on glitch. So altogether my website is currently showing as blank when I preview it.

[el-dah]

Edit: it’s fixed!

[jkaveh-dr]

https://cypress-axiomatic-haircut.glitch.me
https://glitch.com/edit/#!/cypress-axiomatic-haircut

It took a little bit of trial and error but I figured out how to make the glitch site look like the one i've been working on!
I couldn't figure out how to link the javascript correctly, or my site on ball culture.

[SophiaC-R]

https://glow-heady-gate.glitch.me

I wasn't able to fully make the page look like the initial website and did also have some trouble allowing the images to fully appear. Every time I tried to move around information on package.json the website would crash and I would need to restart I'm not sure if it's what I was doing to the website but was able to get some information up!

[marianapazzi]

I really tried 😔😔👍 haha

[periode]

Hi @marianapazzi ! We can schedule learner hours if you're having issues figuring it out (or you could ask Harry for assistance).