React - Day 3.md

React Day 3 - https://bit.ly/2HJGzrn

Agenda:

• Checkin
  • Review Submission
  • Counter
  • Tab Components
  • Form Validation
  • Calculator
• Kahoot Quiz
• Input Declarative vs Imperative
• React Routing
• Fetching Data within useEffect

R1 - Routing

Add react-router-dom to the project. Then set up two basic routes.

1. The first route '/' displays the <Home /> component.

2. The second route '/dashboard' which displays the text Dashboard component. You can find the Component under /pages/dashboard/Dashboard.

You will need the following imports from react-router-dom.

import {
  BrowserRouter,
  Switch,
  Route,
} from "react-router-dom";

And your routing will probably look something like this :)

function Twitter() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact to="/">
          Home
        </Route>
        <Route to="/profile">
          Profile
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

R2 - Routing 2

Next, we want to be able to move between the routes when clicking on links or buttons within our application. So let's set up some of that logic.

There are two ways of redirecting with react-router-dom. One of them is by using the <Link /> component from react-router-dom.

<Link to="/dashboard">
  Twitter
</Link>

The other way is to manipulate the history programmatically to force redirections. This programmatic redirection we use if we first would like to run some other code before making the redirection, for example when we first check the values of a login form with the backend and once we get a successful response we want to redirect the user to the authorized part of our application.

import React from 'react'
import { useHistory} from "react-router-dom";

function ProgrammaticRedirection() {
  const history = useHistory()
  const handleClick = () => {
    history.push("/dashboard")
  }

  return (
    <button onClick={handleClick}>Redirect</button>
  )
}

So let's go ahead and do that. Your task, for now, is to:

1. Add redirection on the login screen to the /dashboard after a successful login.

2. Add redirection on the signup screen to the /dashboard after successfully signing up.

R3 - Fetching Data

Beautiful, we can navigate already quite a bit within our app. As a next step, we would like to get some data from our server. Let's go to the tweet form. We would like to fetch the active user (e.g. us) and then display his name and avatar picture (the avatar picture is just a default one).

Fetch the data using the useEffect hook.

Once we have fetched we would also like to create tweets once we click on the Tweet button.

The functions to fulfill this task from the utils are createTweet and getActiveUser.

R4 - Fetching Data & Subscription

Let's make the Feed display the tweets!

1. As a next step, we would like to fetch all the tweets and display then within the feed. Add the functionality to fetch the data from the server and display the tweets within the feed.

2. It would be really handy if we could not only fetch the tweets that have already been sent. But also get the new tweets that are sent out. That's something we can do with a subscription. So let's set up a subscription which listens for new tweets and adds them to our feed.

The function from the utils we will need are getTweets, subscribeToNewTweets to fetch the data. As well as formatDate to format the date from a tweet a way that we can display to the screen.

R5 - Routing with params

Some times we would like to display specific data, for example, the data from a user. So let's hook it up that if we click on a profile picture of another user, that we get redirected to that user's profile.

To use react-router with params we can use the useParams function. Then we can use the getUserById function from the utils to get the specific user.

RX Additional Challenges

1. JSX to JS

Rebuild the App component with no JSX syntax e.g. recreate it with React.createElement().

// App.jsx
export default function App() {
  return (
    <div className="App">
      <h1 id="title" style={{ color: "blue", fontSize: `${Math.pow(2, 6)}px` }}>
        React Bootcamp
      </h1>
      <h2 className="subheading">React is just javascript.</h2>
      <p>So let's go write some javascript!</p>
    </div>
  );
}

// styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}


.subheading {
  color: grey;
}

2. RedButton with Children

Create a component called RedButton which renders a button with red text.

function RenderChildren({ children }) {
  return (
    <div>
      <RedButton>This text is written in red</RedButton>
    </div>
  );
}

Challenge:

• Jokes on you