React Tutorial For beginners - Part 2 -> Getting reactive

In the previous post we saw how jsx and css work with react. It is enough to create nice html static html pages, but now we shall start doing something more dynamic.

Static vs Dynamic

Static sites are sites that have some content that doesn't depend on a data layer or a database. Games can be static they can use your localstorage as a database to store their data within your browser. It is fine enough for small apps but if you're the next Jeff Bezos consider a dynamic option to let users interact from different machines to your website.

How React embraces dynamicness

React is a library built on top of javascript. So, you can do basically anything javascript can do over there. You can send requests to a server get the data throw it off the page and do much more. We will do some of the action in the later parts of this series.

The Key takeaway here is that react can be a lot more dynamic than just dull html and css, but here what we want is user interaction. The user submits a form the application processes it and shows some output to the user a very basic app you can say.

React Component Lifecycle

As I told earlier that the jsx you just saw was the actual javascript code which will be compiled by babel to produce functions out of nowhere. These functions create React components you can use them instead of jsx (if you are a jerk) or just let compilers do their thing.

What happens after that is when you visit a website the app component is mounted on the page just as we saw earlier then it does the user interacts with that in the web page. Let's say that he enters a form and we want to handle that in react what do we do then. All we have to do is process that our way and re-render the component with the new data? ( Cause if we don't re-render the page will look the same as before)

Of course there is still a lot of technicality but the above is just enough for starters.

Introducing State

In computer terminology the state is all the data a certain process (app) requires for functioning. So, if you have a app that takes in a users name say x and prints hi x. The only state for the app is the user's name.

In React state can work with the useState hook (React is actually had class based views but you can use simple functions and just "hook" in with hooks! )

Functioning demo

Open up codesandbox to code Along!

First we need to import React and useState so at the top do

import React, {useState} from 'react'

Usestate accepts a default value for your state and returns you two things

1. A variable with the value of the state
2. A function with which if you change the value of the state the component re-renders automatically.

So, you don't have to worry just use variables and edit their values using useState. forget about re-renders.

There are certain rules of hooks such as

1. You can't use one inside a conditional block
2. They must be at the top of a react component function.

The syntax for a useState is this.

  const defaultvalue = ''
  const [value, setValue] = useState(defaultvalue)

and use setValue like this.

setValue(() => {return somevalue})

Yes, takes a function that returns the value of the new state.

you can also have the previous value and do something to it.

setValue((prevValue) => {prevValue + 1})

Events

One final thing we need to know about user interactivity is events. Events are when a user does something so great that it changes the face of the app.

You may be familiar with the events in html. Like onclick() onsubmit() onmouseover() events in react are similar you can use them to set different things you can go to codesandbox and playaround.

Events in react can reference a function. So, that when they will occur they will execute the function.

You can do this like

onClick={handleClick} where handle Click is a defined function. Execute the following code to see how to toggle a div.

import "./styles.css";
import React, {useState} from 'react'

export default function App() {
  const defaultvalue = false
  const [toggle, setToggle] = useState(defaultvalue)

  const handleClick = () => {
    setToggle(prevstate => !prevstate)
  }

  return (
    <div className="App">
      { toggle &&
      <h1>Hello</h1>}
      <button onClick={handleClick}>Toggle</button>
    </div>
  );
}

Pay heed to the line <button onClick={handleClick}>Toggle</button>. It is saying that whenever the button is clicked execute the mentioned function. What the function does is says whatever the prevstate is reverse it (! is the not operator is converts true to not true and false to not false). Then when the component re-renders the jsx says that if toggle is true display hello. That is why this code works the way it does.

Exercise

I want you to create a component where the user gives his name and you greet him. (HINT - use the onChange event with an input). You can google if you get caught up. ( That is the spirit of programming. :)

When you are done you can view this gist