DEV Community: Baldo Bo

ReactJs Responsive AppBar MaterialUI (v5) React Router(v6)

Baldo Bo — Thu, 10 Nov 2022 00:38:14 +0000

You can find the repository here
a live version here

Basic layout for routing (client side)
Integrating Material UI responsive AppBar

Number converter: decimal to base(2-36) ReactJs

Baldo Bo — Wed, 09 Nov 2022 22:01:27 +0000

This is an app that converts decimal numbers to base(2-36). The user indicates both, the number you want it to be converted and the base.

You can find the code here

JavaScript

Javascript gives us as default decimal numbers but it has a method to convert them to base 2-36:

let number = 10;
console.log(number.toString(2));//1010

ReactJS

Let's see, our app will need:

2 user input: decimal and base
An event that makes the conversion
The result display on the screen

First

A basic structure of our app


const App = () => {
return(
<>
 <h2>Number converter</h2>
 //Decimal
  <input/>
  //Base
  <input/>
  //Display the result
  <p>{}</p>
</>
);
}

export default App;

Second:

We need to store the user and conversion data.

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

const App = () => {
//Store decimal
const [decimal, setDecimal] = useState('');
//Store base
const [base, setBase] = useState('');
//store conversion data
const [convert, setConvert] = useState(0);
return(
<>
<h2>Number converter</h2>
//Decimal
<input/>
//Base
<input/>
//Display the result
<p>{}</p>
</>
);
}

export default App;

Third:

Let's track the user input

function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);
  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;

Fourth:

Add a form and the event that makes the conversion

function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);

  const convertNumber = (event) => {
    event.preventDefault();
    setConvert(numberConverterBase(decimal, base));
  };

  const numberConverterBase = (decimal, base) => {
    return Number(decimal).toString(Number(base));
  };

  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form onSubmit={convertNumber}>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;

And taht's it!

Random Number generator ReactJs

Baldo Bo — Tue, 08 Nov 2022 04:39:21 +0000

We are going to make a random number generator where the user indicate the range.
This is the code

Create our app with CRA

npx create-react-app random-number-generator

We write a simple structure for our app.

App.js

import React from 'react';

export default function App() {
  return (
    <div>
      <h2>Random Numbers</h2>
      <input type="text" />
      <input type="text" />

      <button>Random Number</button>
    </div>
  );
}

Then add state

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);
  return (
    <div>
      <h2>Random Numbers</h2>
      <input
        type="text"
        value={minRange}
        onChange={(event) => setMinRange(+event.target.value)}
      />
      <input
        type="text"
        value={maxRange}
        onChange={(event) => setMaxRange(+event.target.value)}
      />

      <button>Generar número aleatorio</button>

    </div>
  );
}

And the final code looks like this:

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);

  function randomGenerator() {
    //const a = minRange;
    //const b = maxRange;

    setRandomNumber(randomNumberInRange(minRange, maxRange));
  }
  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  return (
    <div>
      <h2>Random Numbers</h2>
      <input
        type="text"
        value={minRange}
        onChange={(event) => setMinRange(+event.target.value)}
      />
      <input
        type="text"
        value={maxRange}
        onChange={(event) => setMaxRange(+event.target.value)}
      />

      <button onClick={randomGenerator}>Generar número aleatorio</button>
      <p> {randomNumber}</p>
    </div>
  );
}

Add a form

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);

  function randomGenerator(event) {
    event.preventDefault();
    //const a = minRange;
    //const b = maxRange;

    setRandomNumber(randomNumberInRange(minRange, maxRange));
  }
  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  return (
    <div>
      <h2>Random Numbers</h2>

      <form onSubmit={randomGenerator}>
        <input
          type="text"
          value={minRange}
          onChange={(event) => setMinRange(+event.target.value)}
        />
        <input
          type="text"
          value={maxRange}
          onChange={(event) => setMaxRange(+event.target.value)}
        />
        <button type="submit">Generar número aleatorio</button>
      </form>

      <p> {randomNumber}</p>
    </div>
  );
}

Git

Baldo Bo — Fri, 04 Nov 2022 14:05:20 +0000

First-Time Git Setup

This is a summary of the git official docs

Your identity

The first thing you should do when you install Git is to set your user name and email address. This is important because every Git commit uses this information, and it’s immutably baked into the commits you start creating:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

Your default branch name

By default Git will create a branch called master when you create a new repository with git init. From Git version 2.28 onwards, you can set a different name for the initial branch.

To set main as the default branch name do:

$ git config --global init.defaultBranch main

Checking your settings

If you want to check your configuration settings, you can use the git config --list command to list all the settings Git can find at that point:

git config --list