Forem: Charles 🛰

Dynamic routes in react-router v6

Charles 🛰 — Thu, 10 Mar 2022 08:44:12 +0000

Hey I found my self with a problem of not knowing how to do dynamic routes in react router v6 so here it is a short tutorial

In the file where you have your routes let's make a new dynamic routes such like this

App.tsx

    <BrowserRouter>
      <Routes>
        <Route index element={<Main/>}/>
        <Route path='/main' element={<Home />}/>
        <Route path='/main/:id' element={<ProductPage/>}/>
      </Routes>
      </BrowserRouter>

You will notice that the dynamic route is the one with the :id, once we got this we should go to the component page which in this case is ProductPage

ProductPage.tsx

import { useParams } from 'react-router-dom';
import React, { useContext } from 'react';
import shopContext from '../context/shopContext';

const ProductPage = () => {
    const state = useContext(shopContext)
    const { id } = useParams();
    const product = state.list.find((p: any) => p.id === id)

    return(
        <div>
            <h1 style={{color: 'white'}}>{product.title}</h1>

        </div>
    )
}

export default ProductPage;

Here you will see a lot but the main thing here is the following

 const { id } = useParams();
    const product = state.list.find((p: any) => p.id === id)

Here is where with useParams we know the url id and then on the product constant we compare it with the data from the api or mock data.

Once we got that from the product constant we can access to the data from our api like so

return(
        <div>
            <h1 style={{color: 'white'}}>{product.title}</h1>

        </div>

And now how to pass the data and navigate to the right page? Let's see

 <Link to={`/main/${data.id}`}>
 </Link>

With the above we pass the id of the product when we are map all the data, so depends on what product do we click it will pass the id of the right product.

Hope someone found it helpful.

Lautaro

How to navigate to the previos page with react-router v6

Charles 🛰 — Tue, 08 Mar 2022 11:10:16 +0000

If found an approach that i do not like that much but it works

So if you want to return to the previous page using react router v6 you can do the following

import { useNavigate } from 'react-router-dom';

const Component = () => {
   const navigate = useNavigate()
  return(
   <div>
     <button onClick={() => navigate(-1)}
   </div>
)
}

Hope someone found it helpful.

Lautaro

How to know your url location on react (with react-router-dom)

Charles 🛰 — Thu, 03 Mar 2022 15:59:36 +0000

In this post we will be able to see how to know the url we are currently on so for example if we have to fire an event depending on the url we can do it.

First of all we need to have installed or we have to be using react-router-dom

If you already got it let's begin

First import it at the top of your js or ts file

import { useLocation } from 'react-router-dom';

Once you import it we can call it like this inside the component

const Home = () => {
  const location = useLocation();

  useEffect(() => {
    console.log(location.pathname)
}, [])
return(
  <div></div>
)
}

Now if you go to the console on the browser you will be able to see the path you currently at.

Absolute imports (in react)

Charles 🛰 — Wed, 23 Feb 2022 09:58:54 +0000

Hey there, some time ago i found my self with imports like this:

import Card from "../../../components/card";

Which is quite a mess and not clear at all.

But here is where absolute imports came to rescue me.

The first thing we have to do is create a file, if you`re using **javascript **the name of your file will be jsconfig.json
and the file have to be at the same level as package.json.
Inside of it we will add this

{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }

If you`re using typeScript you already should have the file which is tsconfig.json and you will have to add

{
  "compilerOptions": {
    ...,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

Now that we have out jsconfig.json file set up we can do our imports.

Different ways of export and import

Charles 🛰 — Wed, 23 Feb 2022 09:51:33 +0000

Here we will talk about how and when should we use the import without brackets like this:

import Card from "components/card";

and when we have to use the import with brackets like this:

import { Card } from "components/card";

It depends on how we made the export, if we made a export default we will have to import without brackets like in the first example

whereas if we made an export like this:

export const Card = () => {
 return(

)
}

our import will look like this

import { Card } from "components/card";

Thanks for reading.

How to solve fu***** cors?

Charles 🛰 — Mon, 14 Feb 2022 10:29:49 +0000

I will document how to solve cors in a few steps.

Imagine you have an api where you want to POST or GET things but when you post or get something you receive a CORS error policy, if you want a deep understanding of cors i will leave this link.

Imagine you have an api at localhost:9000 and all the different routes related to it.

We will have to create a proxy

mkdir proxy
cd proxy
npm init -y
npm i express
npm i http-proxy-middleware nodemon --save-dev
touch index.js

Now that we have installed our dependencies we can go to the code.

Inside package.json add the following

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

Now inside index.js we add the following code

const express = require('express');
const app = express()
const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/', createProxyMiddleware({target: 'http://localhost:9000', changeOrigin:true}))

app.listen(5000)

This way we will be able to make request to the url localhost:5000 and since it is a proxy we will be able to make request to the routes that the original route has for instance the main route is localhost:9000/api/users, but now in order to not get cors policy we will have to make a call to localhost:5000/api/users and it should work just fine.

Thanks.

Basic git command you have to know.

Charles 🛰 — Tue, 08 Feb 2022 23:08:16 +0000

I will talk about the basic commands about GIT you have to know.

First you need to have installed git.

For now on i will assume that you have installed git.

There are several ways to use git but i will show in the two more basic ways you would need to use it.

Maybe you saw a github repository that you want to saw at your code editor or you want to test it localy or for work or whatever reason you have.
You will need to run on the console the following command
git clone https://github.com/lautaroCharles/typeApp.git

You will have to replace the url with the url you want.

Once you run the command you will be able to cd inside the folder and be able to see the code or even run it.

Now let's talk about if you want to publish your code on github

First thing you will need is to be inside your project folder. Once you are there you will have to run the following command
git init
This command will initialize git.

After that you will need to run a command to add your code into the staging area
git add .
the command above will add your files into the stage area, but maybe you just want one file, for that you will have to run this
git add index.js
This way you just will add the changes you made inside index.js

Now that you have your code on staging area we can make a commit with a clear comment, in other blog i will explain how to make clear commits.

git commit -m 'first commit'

Now we just have two more steps
git remote add origin https://github.com/lautaroCharles/typeApp.git

On the url you will put your empty repository so after that we can push our code like this
git push -u origin main

Now we just have to go to our github repository and see our upload

I will leave some other useful commands
git status: See what is the status of your code, if you have something on staging or something that you can pass into staging.
git branch: See what branches do you have into your repository
git checkout main: (main is the branch name which can have another name) With this command you can change the branch that you currently are.

I will leave this link which a bunch of other git commands link

useCallback and useMemo?

Charles 🛰 — Mon, 07 Feb 2022 14:27:42 +0000

Lets's talk about useCallback and useMemo, both of them are really similar.
UseCallback is used to optimize the rendering behavior of your React function components, while useMemo is used to memoize expensive functions to avoid having to call them on every render.
So what means that?

The first difference between them is the syntax, useMemo do not take in consideration the arguments whereas useCallback do take arguments.

function memoUsed() {
  const a  = useMemo((arg1) => {
    // React ignores arguments
    return ‘insert JSX here’
  }, [])

  return a
}

function callbackUsed() {
  const a = useCallback((what, where) => {
    // can be used inside functions
    return ‘insert ${what} ${where}’
  })

  return a(‘JSX’, ‘here’)
}

useMemo memoize values whereas in useCallback you can not.

useCallback gives you referential equality between renders for functions. And useMemo gives you referential equality between renders for values.