Rebuilding VSC

This was a very interesting week. After last week, when I got to finally restart my labs, Windows had a fatal error with my Visual Studio Code, so this week I did a little bit of updating on Github, along with two labs, but overall this week I decided to rebuild my Chromebook and install Linux after my discovery of the instability of Windows.

I had to wait for my brother to come over because he is farm more familiar with Linux than I am, but it really showed how much more user friendly Linux is than Windows for coding. I still am looking to get a MacBook, but for now gaining my familiarity with navigating through Linux will greatly benefit me as well. After installing the terminal, and downloading VSC, connecting Github was no issue at all either.

We did set it up a way different than my school had us do, so using my labs from school, cloning has been a little bit different but that only took a few minutes to take care of.

The original problem I had was just to change a few elements on my assignment, with the starting code of —

return (
      <div className="App">
        <header className="App-header">
          {moment().format('MMMM Do YYYY, hh:mm:ss a')}
        </header>
        <p className="App-intro">
          In React apps, we write JSX - it looks like HTML, and uses a lot of HTML syntax.
          JSX lets us include JavaScript functions right along with the HTML, and also
          allows us to add in components, which are separate, self-contained chunks of JSX.
        </p>
        <ExampleComponent />
</div>
    );

What I needed to do was for the header, add the string “Now”, and then have it import the test component into it as well. This was just a basic intro lab with the final solution being —

return (
      <div className="App">
        <header className="App-header">
          Now
          {/* {moment().format('MMMM Do YYYY, hh:mm:ss a')} */}
        </header>
        <p className="App-intro">
          In React apps, we write JSX - it looks like HTML, and uses a lot of HTML syntax.
          JSX lets us include JavaScript functions right along with the HTML, and also
          allows us to add in components, which are separate, self-contained chunks of JSX.
        </p>
        <ExampleComponent />
        <TestComponent />
</div>
    );

My next assignment I think was equally as easy this week, I just needed to add a few components, and import them at the top of the sheet as well. The starting code for this assignment was —

import React, { Component } from 'react';
class App extends Component {
 render() {
  // your code in the return statement below!
  return (
   <div className="App">
    <CatComponent />
    <GraceHopperQuoteComponent />

   </div>
  ); }
}
 
export default App;

With already finishing the class, it was very obvious that the issue with this code was missing the import, and not having the mouse movement class imported or called on, so after adding that I passed first try. The final solution ended up being —

import React, { Component } from 'react';
import CatComponent from './CatComponent.js'
import {GraceHopperQuoteComponent} from './GraceHopperQuoteComponent.js'
import MouseComponent from './MouseComponent.js'
class App extends Component {
 render() {
  // your code in the return statement below!
  return (
   <div className="App">
    <CatComponent />
    <GraceHopperQuoteComponent />
    <MouseComponent />
   </div>
  ); }
}
 
export default App;

This week was definitely a lot different than I thought it would be. I was hoping to dive more into React and bust out a few lessons, but really it was practicing IT and rebuilding of a Chromebook, and getting familiar with Linux. I still find this to be very much beneficial though.