React.js

Today I wanted to talk about all the wonders that React gives for frontend development. First off the pure organization that components allow a programmer are amazing. Do you have a big application that is fairly complicated? or a simple project that just has too much going on? Components! They break up your code in a manner that is easy to read and follow. They also allow the user to pass information through them in a controlled state. So, lets talk about what exactly is a component. A component is a function like block of code that returns JSX. JSX is a markup language that is similar to HTML but with a mix of JavaScript added into it. Futhermore, a component can also take in props as arguments. like this,

import React from 'react';

function Home(props.name){

  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  )
}
export default Home;

Now, this is extremely useful but you can refactor this more with destructuring, which would just look like this,

import React from 'react';

function Home({name}){

  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}
export default Home;

You just simple get rid of the "props" at the beginning of the word. As you can see in the examples above you may notice that I have my <h1> wrapped inside of a <div> this is because React components only return one element in the return statement. You could also just use a plain tag like this, <> if you prefer that over using a <div> element.

React components also can return other components inside one another. Such as,

import React, {useState} from 'react';
import Search from './Search';

function Home({name}){

  return (
    <div>
      <h1>{name}</h1>
      <Search />
    </div>
  )
}
export default Home;

In the example above I am importing a Search component and then inside of the return I am calling that component with the <Search /> , this is where you could also pass down info as props from the home to the search component. You also may have noticed that components start with a capitalized letter and the reason for this is because when we reference that components inside the return statement if it were to lower case it would return an HTML tag instead.

Another wonderful thing about React is the {useState}. Which lets you assign an initial value to you a variable and then later change the value if you so wish. So, say you're creating a search bar in your project, you can assign the initial value of that search bar to empty but later change its state to equal whatever the user has entered into the search bar. This is also very useful when creating a controlled form for a user to submit on your application as well.

const [variable, setVariable] = useState("");

as seen above the useState takes in two properties, one being the variable itself and the other being a setter variable which is used whenever you want to change the value of the first variable.

Just like the {useState} hook there is another react hook called {useEffect} this is what allows a developer to fetch data and it looks like this,

import React, {useState, useEffect} from 'react';

function Home({name}){
const [variable, setVariable] = useState("");

useEffect(() => {
fetch('placeholder')
.then(res => res.json())
.then(data => setVariable(data))
}, [])

  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}
export default Home;

There is a lot going on in this example so let me help break it down for you. We first import both the React hooks {useState} and {useEffect} and then we declare a variable with an empty value using state. Next, we fetch our data using the useEffect hook just like normal JavaScript but then we assign the returned data to the variable using the setter variable. You also may of noticed the square brackets at the end of the useEffect. This is very important to do because otherwise if you don't do that then the server will continually fetch the data infinitely and I'm sure you could figure out why that would not be a good thing to happen.