Week 2 (completed)

I will post a short recap of week 2 due to this being technically week 3. I can’t believe we covered a language, React, within 1 week. I’m not sure how to feel about learning something like React in just 5 days but I managed to understand a few concepts. I mostly understood the concept of components, props, and states. I am still struggling to learn hooks and the benefits of using it.

React as a language act as a virtual DOM and use components to break down big chunks of functions, then export and import data via components. “Visually” it looks like this
Our main “App.js” => pass components we set => Return () or render our web page to visually display all the components that we have imported from ComponentA, ComponentB, etc. ComponentA could be a table written in HTML and has another component inside of it. The component inside ComponentA can be an array imported from another component called ComponentData, then ComponentData could have another component inside of it as well, so on and so forth. This makes building a website with different functions more manageable. React uses a JSX syntax that is similar to JS which gets compiled by Babel. Babel then takes React code and compiles into ES5 or ES6 to make it more universal for different browsers

Props are how data gets passed into React components. E.g. a React component called Sushi with a prop called name that is being passed, with a value called “Uni”
<Sushi name="Uni" />
Here’s a component filled with more than 1 prop.
let firstSushi = "Uni";
let secondSushi = "Otoro";
<Sushi className = "sushi" quantity = {4} name = {firstSushi + "and" + secondSushi}/>;

One important take away with React is its data-flow. One way flow from parent to child, that is read-only. If you want to communicate something to a parent component then you will need to have a function that will pass the function to the child component. If something happens within the child component, calling the function alerts the parent-component about the child component.

State is the primary method of storing data in a component and use to keep track of data in a component. A state-change trigger React to re-render components to display accurate data change. If something visual is being changed, it belongs in the state. Value and on change are used in two way binding to accurate display data change. I.e.,
State = { text: ‘’ }
handleChange = (event) => {
this.setState({
text: event.target.value
});
};

Hooks let you use state and other React features without writing a class. That’s the definition directly from reactjs.org. Currently, I only understand how to use a State Hook which is display below.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div&gt;
      <p&gt;You clicked {count} times</p&gt;
      <button onClick={() =&gt; setCount(count + 1)}&gt;
        Click me
      </button&gt;
    </div&gt;
  );
}

The example component will have two states, count and setCount. Whenever you click on the button “Click Me” it will change your setCount by +1 then displayed your count times via prop {count}. That is all I have on hooks for now, like I mentioned. Not sure what are the benefits of using hooks vs. this.state. Alrighty, that is all I have for week 2 recap. See ya next time! ~Soosh signing off…nope! That still sounds ridiculous AF.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s