Reactjs

Reactjs

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Conor  Grady

Conor Grady

1665105780

Squeezed: A Prototyping tool for The Freshest Deno Framework

Squeezed

A prototyping tool for the Freshest Deno framework

Squeezed is a charming web application prototyping tool for rendering the islands of your Fresh app. Squeezed uses a drag-and-drop canvas that enables users to see how their codebase is laid out, see the island being rendered dynamically, and edit HTML elements. HTML elements can be readily modified, and the code preview will render live updates as you modify your code.

Let's Get Started!

First, make sure to download deno on your local machine. Squeezed uses deno v1.24.1. For more information and instructions, head to: https://deno.land/

After installing Deno, Linux users will have to update their bashrc file to gain access to Deno commands globally. Mac users will have to run these commands in every new instance of their terminal:

export DENO_INSTALL="/$HOME/.deno"

export PATH="$DENO_INSTALL/bin:$PATH"

Next, run this command in your terminal:

deno install -A --unstable -n deno-create-react-app https://deno.land/x/create_react_app/mod.ts

For more information on Create React App, visit: https://deno.land/x/create_react_app@v0.1.2

Fork and clone this repo, and create a .env file with the following:

POSTGRES_URI = “<your key here>”

Then run the following command to create your database tables:

deno run --allow-env --allow-read --allow-net server/createDb.js

Lastly, run this command inside your terminal, and you’re done!

deno-create-react-app run & deno run --allow-env --allow-read --allow-net server/server.ts

Squeezed should be running on your localhost:8000 with full functionality. Make sure your environment is set up by setting up a working database as well as running the proper paths to enable Deno commands globally.

How to Use?

You can create an account by entering a new username, password, and email, or sign in to an existing account in your database.

From there, you can load new projects that are stored in your database or start working on a fresh project right away. When you save progress on a new project, you will be prompted to input a project name. If you try to save progress while working on an existing project, the database will just update your previous work instead of asking for a new project name.

Clear project will only clear the HTML elements that your project currently uses but will keep you in the same project that you have loaded. Starting a new project will take you out of your current project and into a new one as well as clear all HTML elements. Deleting a project will clear your elements and delete the project inside your database.

To add HTML elements to your project, just drag and drop from the list on the right to the main area. You can now select elements by clicking on each one in the list as well as rearrange them by dragging them and dropping them in the desired position. To add styling attributes to your HTML elements, select the intended element, input the value to the corresponding attribute in the styling area, and click submit.

You should see your HTML elements update inside the code preview! You can also see what that code will render by clicking on island preview at the top right. To use the code that is produced, just click on the clipboard at the bottom of the code preview window and paste the code wherever it is needed!

Future Tasks:

  • Adding drag and drop nesting functionality for html elements.
  • Squeezed currently relies on a third-party library and requires a local download to ensure full functionality. Future plans including updating the codebase to ensure compatibility when deploying.
  • We hope to migrate from a browser application to a desktop application once a tool that supports Deno browser applications in javascript is released.

If you’d like to contribute to Squeezed or have any feedback, please let us know!

Check us out at our Website and our Linkedin!

Tech Stack:

Deno, TypeScript, Javascript, PostgreSQL, oak, dex, bcrypt, React (Hooks and Router)

License

Distributed under the MIT License. See LICENSE for more information.


Download Details:

Author: oslabs-beta
Source Code: https://github.com/oslabs-beta/squeezed

License: MIT license

#react #deno 

Squeezed: A Prototyping tool for The Freshest Deno Framework
Conor  Grady

Conor Grady

1665098340

Galumpher: A Podman Monitoring tool Built on Electron with React

Galumpher

A Podman monitoring tool built on electron

Summary

Galumpher is an open-source developer tool to help monitor the health and status of your Podman containers that are currently running on your local machine. Galumpher allows users to view important metrics at a quick glance and update them at the click of a button.

metricsContainer

Features

  • Galumpher will display all of the containers that are currently running on the machine in the dropdown menu located in the sidebar.
  • The main metrics page will display the metrics of the first container on the list by default.
  • Clicking on a different container within the dropdown will automatically fetch the most recent metrics for that container and load them into the metrics display section.
  • Key metrics currently available are CPU usage, memory usage, and net input/output.
  • All figures are displayed in MB.

Geting started

1. Prerequisites

  • Users must have Podman installed and currently running on their machine.

2. Clone this repo using the following command

git clone https://github.com/oslabs-beta/Galumphing.git

3. Create a .env file in the project's root level directory

  • Create a .env file in the project's root-level directory.
root
  ├─ .env
  ├─ server
  └─ src
  • In the .env file, add the following environment variable and add your Postrges URI. This is required.
POSTGRES_URI=''

4. Run the following commands

npm install
npm run build
npm start

To contribute

  • Fork this repo.
  • Pull your fork down to your machine
  • Create your own branch based off of dev branch with the following command
git checkout -b <yourBranchName> 
  • Run the following commands
npm install
npm run dev
  • Push your changes up and create a PR to the Galumpher repo

Built with


Download Details:

Author: oslabs-beta
Source Code: https://github.com/oslabs-beta/Galumpher

License: MIT license

#react #electron 

Galumpher: A Podman Monitoring tool Built on Electron with React
Conor  Grady

Conor Grady

1665090540

Highlight A Keyword in A Piece Of Text and Return A React Element

react-keywords  

Highlight a keyword in a piece of text and return a React element.

Highlight keyword

Installation

npm i react-keywords

Basic Usage

import React from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  return (
    <Keywords value="react">
      Highlight a keyword in a piece of text and return a React element.

      React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

      Build encapsulated components that manage their own state, then compose them to make complex UIs.
    </Keywords>
  );
}
import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  const [value, setValue] = useState('react');
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <Keywords value={value}>
        Highlight a keyword in a piece of text and return a React element.

        React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

        Build encapsulated components that manage their own state, then compose them to make complex UIs.
      </Keywords>
    </Fragment>
  );
}

render

import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  const [value, setValue] = useState('react');
  const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <Keywords value={value} render={highlight}>
        Highlight a keyword in a piece of text and return a React element.
      </Keywords>
    </Fragment>
  );
}

color

import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  const [value, setValue] = useState('react');
  const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <Keywords value={value} color="red" backgroundColor="">
        Highlight a keyword in a piece of text and return a React element.
      </Keywords>
    </Fragment>
  );
}

caseIgnored

Case is ignored by default caseIgnored=true.

import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  const [value, setValue] = useState('re');
  const text = `caseIgnored={true} Highlight A Keyword In A Piece Of Text And Return A React Element.`
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <br />
      <Keywords value={value} color="red" backgroundColor="">
        {text}
      </Keywords>
      <br />
      <Keywords
        value={value}
        caseIgnored={false}
        children={`caseIgnored={false} Highlight a keyword in a piece of text and return a React element.`}
      />
    </Fragment>
  );
}

Support bundle

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
    <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
  </head>
  <body>
    <div id="container" style="padding: 24px"></div>
    <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
    <script type="text/babel">
      import Keywords from 'react-keywords';

      function Demo() {
        const [value, setValue] = React.useState('react');
        return (
          <React.Fragment>
            <input value={value} onChange={(evn) => setValue(evn.target.value)} />
            <Keywords value={value}>
              Highlight a keyword in a piece of text and return a React element.
            </Keywords>
          </React.Fragment>
        );
      }
      const container = document.getElementById('container');
      const root = ReactDOM.createRoot(container);
      root.render(<Demo />);
    </script>
  </body>
</html>

API

import { FC, PropsWithChildren } from 'react';
export interface KeywordsProps {
  value?: string;
  color?: string;
  caseIgnored?: boolean;
  backgroundColor?: string;
  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
}
declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
export default KeywordsInner;

Contributors

As always, thanks to our amazing contributors!.


Download Details:

Author: uiwjs
Source Code: https://github.com/uiwjs/react-keywords

#react 

Highlight A Keyword in A Piece Of Text and Return A React Element
Conor  Grady

Conor Grady

1665084480

A Simple Ecommerce Website Built with React and Tailwind CSS

Ecommerce Website

A simple Ecommerce website built with react and tailwind CSS. JSON server used for the backend to store user data for authentication, orders, favorites.

Context API used for state management, React Router used for navigation.  

Home Page

Favorites:

Product Page

Login/Signup Page

User can signup by clicking create account and using the same input fields as the signup form.

Checkout Page

Possible Future Additions:

  • Third Party Payment Integration
  • Third Party Auth like Google, Facebook, etc.
  • Recaptcha for security
  • Reccommendations/ Frequently Bought Together
  • Forgot Password
  • For-You-Page based on favorites and previous orders

Download Details:

Author: gauthumj
Source Code: https://github.com/gauthumj/Krypto-Ecommerce-website

License: MIT license

#react #tailwindcss 

A Simple Ecommerce Website Built with React and Tailwind CSS
Conor  Grady

Conor Grady

1665083160

React Unit Test: React Unit Testing using Jest and Enzyme

React Unit Test using Jest and Enzyme

Testing React using Jest and Enzyme

Installation

# Package Installation
npm install

# Run the Project
npm start

# Project Test
npm test

# Generate Code Coverage Report
npm run test -- --coverage --watchAll=false

↥ back to top

Project Covers

  • Component Testing
  • Props Testing
  • Snapshot Testing
  • Event Testing
  • Mocking function
  • Rest API Testing

↥ back to top

Folder Structure

 + src
   + components
     + Events
       + __snapshots__
       - Events.js  
       - Events.test.js
     + Header
       - Header.js
       - Header.test.js
     + Props
       - Props.js
       - Props.test.js
     + RestAPI
       - RestAPI.js
       - RestAPI.test.js
   + __mocks__
     - axios.js

↥ back to top

Code Coverage Report

|File                    |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
|------------------------|----------|----------|----------|----------|-------------------|
|All files               |    88.89 |        0 |       75 |    88.24 |                   |
| src                    |      100 |      100 |      100 |      100 |                   |
|  App.js                |      100 |      100 |      100 |      100 |                   |
| src/Components/Events  |       50 |        0 |    33.33 |       50 |                   |
|  Events.js             |       50 |        0 |    33.33 |       50 |             14,16 |
| src/Components/Header  |      100 |      100 |      100 |      100 |                   |
|  Header.js             |      100 |      100 |      100 |      100 |                   |
| src/Components/Props   |      100 |      100 |      100 |      100 |                   |
|  Props.js              |      100 |      100 |      100 |      100 |                   |
| src/Components/RestAPI |      100 |      100 |       80 |      100 |                   |
|  RestAPI.js            |      100 |      100 |       80 |      100 |                   |
|------------------------|----------|----------|----------|----------|-------------------|

↥ back to top

Technology

↥ back to top


Download Details:

Author: learning-zone
Source Code: https://github.com/learning-zone/react-unit-test

License: MIT license

#react 

React Unit Test: React Unit Testing using Jest and Enzyme
Conor  Grady

Conor Grady

1665079020

Built with The MERN Stack (MongoDB, Express, React and NodeJS)

MERN Stack Invoicing Application

Built with the MERN stack (MongoDB, Express, React and NodeJS). Invoice

Update

I am pleased to inform you that the name of this repository has been changed from Arc Invoice to Accountill. There are so many things coming! Stay tuned!!

Panshak

Introduction

This is a side project I've been working on. A full stack invoicing application made using the MERN stack (MongoDB, Express, React & Nodejs), specially designed for freelancers and small businesses, but can be used for almost any type of business need. With this application, you can send beautiful invoices, receipts, estimates, quotes, bills etc to your clients. Jump right off the Live App and start sending invoice or download the entire Source code and run it on your server. This project is something I've been working on in my free time so I cannot be sure that everything will work out correctly. But I'll appreciate you if can report any issue.

Invoice Dashboard

Key Features

  • Send invoices, receipts, estimates, quotations and bills via email
  • Generate and send/download pdf invoices, receipts, estimates, quotations and bills via email
  • Set due date.
  • Automatic status change when payment record is added
  • Payment history section for each invoice with record about payment date, payment method and extra note.
  • Record partial payment of invoice.
  • Clean admin dashboard for displaying all invoice statistics including total amount received, total pending, recent payments, total invoice paid, total unpaid and partially paid invoices.
  • Multiple user registration.
  • Authentication using jsonwebtoken (jwt) and Google auth

Technologies used

This project was created using the following technologies.

Client

  • React JS
  • Redux (for managing and centralizing application state)
  • React-router-dom (To handle routing)
  • Axios (for making api calls)
  • Material UI & CSS Module (for User Interface)
  • React simple Snackbar (To display success/error notifications)
  • Cloudinary (to allows users to upload their business logo)
  • Apex Charts (to display payment history)
  • React-google-login (To enable authentication using Google)

Server

  • Express
  • Mongoose
  • JWT (For authentication)
  • bcryptjs (for data encryption)
  • Nodemailer (for sending invoice via email)
  • html-pdf (for generating invoice PDFs)

Database

MongoDB (MongoDB Atlas)

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

  • Open the project in your prefered code editor.
  • Go to terminal -> New terminal (If you are using VS code)
  • Split your terminal into two (run the client on one terminal and the server on the other terminal)

In the first terminal

  • cd client and create a .env file in the root of your client directory.
  • Supply the following credentials
REACT_APP_GOOGLE_CLIENT_ID = 
REACT_APP_API = http://localhost:5000
REACT_APP_URL = http://localhost:3000

To get your Google ClientID for authentication, go to the credential Page (if you are new, then create a new project first and follow the following steps;

  • Click Create credentials > OAuth client ID.
  • Select the Web application type.
  • Name your OAuth client and click Create
  • Remember to provide your domain and redirect URL so that Google identifies the origin domain to which it can display the consent screen. In development, that is going to be http://localhost:3000 and http://localhost:3000/login
  • Copy the Client ID and assign it to the variable REACT_APP_GOOGLE_CLIENT_ID in your .env file
$ cd client
$ npm install (to install client-side dependencies)
$ npm start (to start the client)

In the second terminal

  • cd server and create a .env file in the root of your server directory.
  • Supply the following credentials
DB_URL = 
PORT = 5000
SECRET = 
SMTP_HOST = 
SMTP_PORT = 
SMTP_USER = 
SMTP_PASS = 

Please follow This tutorial to create your mongoDB connection url, which you'll use as your DB_URL

$ cd server
$ npm install (to install server-side dependencies)
& npm start (to start the server)

Troubleshooting

If you're getting error while trying to send or download PDF, please run the following in your server terminal.

$ npm install html-pdf -g
$ npm link html-pdf
$ npm link phantomjs-prebuilt

Docker

Using docker is simple. Just add the .env contextualized with the docker network.

e.g:

goes to path "server/.env"

DB_URL = mongodb://mongo:27017/arch
PORT = 5000
SECRET = 
SMTP_HOST = 
SMTP_PORT = 
SMTP_USER = 
SMTP_PASS = 

goes to path "client/.env"

REACT_APP_GOOGLE_CLIENT_ID = 
REACT_APP_API = http://localhost:5000
REACT_APP_URL = http://localhost

And run

docker-compose -f docker-compose.prod.yml build

And then

docker-compose -f docker-compose.prod.yml up

Comment

I intend to keep adding more features to this application, so if you like it, please give it a star, that will encourage me to to keep improving the project.

Author

License

  • This project is MIT licensed.

Download Details:

Author: panshak
Source Code:  https://github.com/panshak/accountill

License: MIT license

#react #nodejs #mongodb 

Built with The MERN Stack (MongoDB, Express, React and NodeJS)
Conor  Grady

Conor Grady

1665077100

Claps: Adds Clap Button to any Page for Your Next.js Apps

@upstash/claps

Add a claps button (like medium) to any page for your Next.js apps.

Nothing to maintain, it is completely serverless 💯

Check out the demo.

 

1. Create Database

Create a free Redis database at Upstash Console

We will use Upstash Redis to keep the data as well as messaging (Redis pub/sub).

2. Environment Variables

Copy the .env.local.example file to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN can be found at the database details page in Upstash Console.

3. Install Package

yarn add @upstash/claps

4. Import CSS

// pages/_app.js
import "@upstash/claps/style.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

4. Import Components

// pages/example.js
import Claps from "@upstash/claps";

export default function Example() {
  return (
    <div>
        <Claps fixed="left">
    </div>
  )
}

The options can be passed as React props

keytypedefault
key?string 
fixed?"left", "center", "right" 
replyUrl?string 
replyCount?string 
apiPath?string/api/claps
iconClap?null, React.ReactElement 
iconReply?null, React.ReactElement 

Url of the page is being used as the key/identity to keep the claps count. You can override this giving the key attribute.

5. Create API

// pages/api/claps.js
import createClapsAPI from "@upstash/claps/api";

const ClapsAPI = createClapsAPI({
 // maxClaps: 10
});
export default ClapsAPI;

Support

Use Upstash Discord channel to get support.


Download Details:

Author: upstash
Source Code:  https://github.com/upstash/claps

License: MIT license

#react #nextjs 

Claps: Adds Clap Button to any Page for Your Next.js Apps
Conor  Grady

Conor Grady

1665069568

Clean Web3 Dapp Starter Template using Typescript and React

Web3 Boilerplate

Disclaimer

  1. This is a work in progress...
  2. Just getting started with Typescript and no React expert on top of that, so any contribution/improvment pull-request is more than welcomed!

Description

Simple and minimalist Web3 boilerplate to boost your Dapp development. Don't waste time setting up CRA, Typescript, react-script v5 polyfill, and connecting metamask and other wallets any longer. Instead, get this web3-boilerplate and start coding right away with the latest stack available out there!

Try it yourself: https://web3-boilerplate.netlify.app/

Built With

  • React
  • typescript
  • AntDesign
  • web3react
  • prettier
  • ESLint

Installation

Make sure you have the following ready:

  • node.js installed (developped on LTS v16.16.0)
  • typescript installed (developped on v4.7.4)
  • yarn installed
  • MetaMask (or any web3 compatible wallet) installed in your browser

Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:

git clone https://github.com/Pedrojok01/Web3-Boilerplate.git .

Install all package dependancies by running:

yarn install

start the web3-boilerplate:

yarn start

Features:

  •  Web3 Wallet (Metamask / Wallet connect / Coinbase)
  •  Chain selector
  •  Hooks to query user's Native Balance / Token Balances
  •  Hook to query user's NFTs

Enjoy!!!

⭐️ ... and don't forget to leave a star if you like it! ⭐️

(back to top)


Download Details:

Author: Pedrojok01
Source Code: https://github.com/Pedrojok01/Web3-Boilerplate

License: MIT license

#react 

Clean Web3 Dapp Starter Template using Typescript and React
Conor  Grady

Conor Grady

1665062040

A Full-stack DApp Starter Built on Ethereum with Next.js

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React)

This repo contains boilerplate code for interacting with a simple smart contract from the client-side using Solidity, React and TailwindCSS.

Prerequisites

Getting Started

Clone This Repo

Use git clone https://github.com/tomhirst/solidity-nextjs-starter.git to get the files within this repository onto your local machine.

Environment Setup

Duplicate .env.example to .env and fill out the HARDHAT_CHAIN_ID environment variable. The port from the example file, if it's free, will be fine in most cases.

Run npm install.

Running The Smart Contract Locally

Compile the ABI for the smart contract using npx hardhat compile.

If you're successful, you'll recieve a confirmation message of:

Compilation finished successfully

And, a src/artifacts folder will be created in your project.

Deploy the smart contract to the local blockchain for testing with npx hardhat node.

If you're successful, you'll be presented with a number of account details in the CLI. Here's an example:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Then in a new terminal window, npx hardhat run scripts/deploy.js --network localhost.

If you're successful, you'll get something like the following CLI output:

Greeter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0

Adding A Local Account To MetaMask

Open your MetaMask browser extension and change the network to Localhost 8545.

Next, import one of the accounts by adding its Private Key (for example, 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 to MetaMask.

If you're successful, you should see the a balance resembling something like 10000 ETH in the wallet.

Connecting The Front-End

In .env set the NEXT_PUBLIC_GREETER_ADDRESS environment variable to the address your smart contract was deployed to. For example, 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0.

In a new terminal window, load the front-end with npm run dev. If you want to use an alternate port from 3000, use npm run dev -- --port=1234, or whatever port number you prefer.

Demo'ing The Functionality

Once set up, go to localhost:3000 (or whatever post number you used), to view your dApp in the browser.

Clicking Fetch greeting from the blockchain should bring back a value of Hello world! in the input above. This is the default string passed to the smart contract on first deloy.

To update the greeting value, type something in the input with placeholder Write a new greeting, then click Set new greeting on the blockchain. If you're successful, a MetaMask window will open in your browser. From here you can connect the local account you added earlier and sign the transaction.

Click Fetch greeting from the blockchain again to see the changes you've made.

Editing The Front-End

To modify the front page of your application, edit pages/index.js.

All TailwindCSS classes are available to you.

To lint your front-end code, use npm run lint.

Testing

To test your smart contracts, run npx hardhat test.

A sample test can be found in test/sample-test.js.

Deploying To The Ropsten Test Network

This is a more advanced step after running the smart contract locally.

Up to now, the smart contract has been running on a local blockchain. The next step, is to test how it works on a live test network. We'll do this by deploying to Ropsten.

MetaMask

First, switch your MetaMask network from Localhost 8545 to Ropsten Test Network.

Then, view the account details of your test account. Click Export Private Key. After entering your password, you'll be given a private key. Copy and paste your private key (example, df57089aefbcaf7ba0bc227dafbffa9fc08a93fdc65e1e42214a14efcf23656e) as the value of ROPSTEN_PRIVATE_KEY in .env.

Important: Never expose the private key of an account with real assets inside. Always add private keys as environment variables. Never commit private keys to code.

Infura

Infura is a service that allows developers to connect to Ethereum infrastructure through their API. In this boilerplate, we'll be using Infura to deploy our smart contract to the Ropsten test network.

Sign up for an account if you don't have one already, then create a new Ethereum project. Name your project, then select Ropsten from the endpoints drop down. Save changes.

Copy and paste the URL starting with https and set it as the ROPSTEN_URL value in your .env file.

Obtaining Test ETH

You'll need some test ETH in your wallet for use on Ropsten. Head over to the Ropsten Ethereum Faucet, paste in your wallet account address (for example, 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80) and press Send me test Ether.

In a few minutes, you should see your balance update in MetaMask. This is your test ETH.

Deploying Your Smart Contract To Ropsten

In your terminal enter, npx hardhat run scripts/deploy.js --network ropsten.

If you're successful, you'll get a confirmation message as follows:

Greeter deployed to: 0x9045cEc7161f380C224ae95c15EbE96659A53c46

This address is where your smart contract is deployed on the Ropsten Test Network.

Post deployment, you should also see your ETH decrease a little in MetaMask from the gas transaction fee.

Etherscan

Because your smart contract is now deployed to a live test network, you'll be able to view it's details on Etherscan. Go to Ropsten Etherscan and copy and paste the address you were given in the previous step (for example, 0x9045cEc7161f380C224ae95c15EbE96659A53c46) into the explorer.

You'll be able to see all historical transactions and events here.

Testing The Functionality

Change the NEXT_PUBLIC_GREETER_ADDRESS variable in .env to be the smart contract address on the Ropsten Test Network (for example, 0x9045cEc7161f380C224ae95c15EbE96659A53c46).

Start (or restart) the front-end using npm run dev.

Fetching the greeting from the blockchain will return Hello world! on first run.

Setting a new greeting may take a little longer than it did locally as we're using a real test network.

All instance of setting a new greeting will now create a transaction attached to the smart contract that you can view on Ropsten Etherscan

Roadmap


Download Details:

Author: tomhirst
Source Code: https://github.com/tomhirst/solidity-nextjs-starter

#react #next 

A Full-stack DApp Starter Built on Ethereum with Next.js
Tech2 etc

Tech2 etc

1665061593

React Website Tutorial - Beginner React JS Responsive Tour/Travel Project

It is one of the easiest ways to spin up a new React project and is an ideal choice to use for your own personal projects as well as for serious, large-scale applications.

We're going to cover, step-by-step, how to use all of the major features of Create React App to quickly and easily build your own React projects.

Throughout this guide, I've also included a lot of helpful tips I've learned through building apps with Create React App to make your workflow even easier.

Her we will see

Step 1. How to Install Create React App
Step 2. Reviewing the Project Structure
Step 3. How to Run your React Project
Step 4. How to Run Tests with the React Testing Library
Step 5. How to Change the App's Meta Data
Step 6. How to Work with Images and Other Assets
Step 7. How to Install Dependencies
Step 8. How to Import Components
Step 9: How to Style our App with CSS
Step 10. How to Build the App and Publish It
 

#react-native #react #javascript #node #framework #programmer 

React Website Tutorial - Beginner React JS Responsive Tour/Travel Project

Get Multiple Checkbox Value On Submit Using React with Example

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. In this tutorial guide will explain to you in detail how to get multiple checkboxes values in react js app with bootstrap form.

Table Of Contents

  • 1. Create React App
  • 2. Set up Bootstrap 
  • 3. Create Checkbox Form Component
  • 4 . Add Component in App.js

1. Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

2. Set up Bootstrap 

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <!-- something here -->
    </div>
  );
}
 
export default App;

3. Create Checkbox Form Component

In this step, visit src directory of your react js app and create a checkbox form component named CheckboxForm.js. And add the following code into it:

import React from 'react'
class CheckboxForm extends React.Component{
constructor(){
super();
this.state = {
hobbies:[]
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
var value = target.value;
if(target.checked){
this.state.hobbies[value] = value;   
}else{
this.state.hobbies.splice(value, 1);
}
}
submit(){
console.warn(this.state)
}
render(){
return(
<div>
<div class="row">
<div class="col-md-6 offset-md-3">
<br /><br />
<h3>Get Multiple Checkbox Value On Submit</h3><br />
<div class="form-row">
<div class="form-group col-md-6">
<label>Hobbies :</label><br />
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh1" value="1" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh1">Reading</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="2" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh2">Developing</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh3" value="3" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh3">Desiging</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary" onClick={()=>this.submit()}>Submit</button>
</div>
</div>
</div>
</div>
</div>
)  
}
}
export default CheckboxForm;

Note that, CheckboxForm.js component uses a state array to store multiple checkbox values.

4 . Add Component in App.js

In this step, you need to add CheckboxForm.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import CheckboxForm from './CheckboxForm'
function App() {  
return (  
<div className="App">  
<CheckboxForm/>  
</div>  
);  
}  
export default App;

In this tutorial, you have learned in detail how to get multiple checkbox values in react js app with bootstrap form.

#react #javascript 

Get Multiple Checkbox Value On Submit Using React with Example
Conor  Grady

Conor Grady

1665054480

Example Of invoking React Components From an Ember App

Example: Invoking React Components from Ember

This repo contains a runnable demo that shows how to invoke a React component from an Ember app.

Run it

  1. pnpm install
  2. cd app && pnpm run start

Understand it

  • some-react-lib is intended to stand in for your library package that contains a React component.
  • app is the Ember app

Gotchas

  • this example assumes your JSX is in a separate NPM package, so we're importing it via ember-auto-import. If instead you want to make JSX work inside your app's own package, you would need to move @babel/preset-react into the app's own babel config.
  • remember to install ember-modifier. It's not part of the default Ember app blueprint.
  • make sure your app declares its dependency on your library, otherwise ember-auto-import won't be able to import it.
  • It's a good idea for the library to declare a peerDependency on react so that it will definitely share the app's copy.

Download Details:

Author: ef4
Source Code:  https://github.com/ef4/ember-react-example

#react 

Example Of invoking React Components From an Ember App
Karim Aya

Karim Aya

1665045003

React Checkbox List with Example

A checkbox is an HTML element, and It allows the user to choose one or multiple options from a limited number of choices. In this article, you will learn how to create a list of items with input checkboxes using React JS. We build the list using controlled input checkbox input with React state.

To understand how to create a list of items with input checkbox using React JS let's go through the following example.In this example user can check/uncheck items via input checkbox

Table Of Contents

  • Step 1 . Display list of items using Array.map()
  • Step 2. Add input checkbox for every item
  • Step 3. React State to track checked items
  • Step 4. Add and remove item from checked list
  • Step 5. Strikethrough text for checked items
  • Step 6. Generate string with checked item names
  • Step 7. Display the checked item names

Step 1 . Display list of items using Array.map()

The first step is to declare the list of the item names as an array of strings. Next, we will apply Array.map() on the checkList constant and return the JSX code with the item name in the callback function.

const checkList = ["Apple", "Banana", "Tea", "Coffee"];

return (
  <div className="checkList">
    <div className="title">Your CheckList:</div>
    <div className="list-container">
      {checkList.map((item, index) => (
         <div key={index}>
           <span>{item}</span>
         </div>
      ))}
    </div>
  </div>
);

Step 2. Add input checkbox for every item

In order to add a checkbox for every item, we will include the HTML input of type=”checkbox” in the JSX code returned by the callback function of Array.map().

{checkList.map((item, index) => (
   <div key={index}>
     <input value={item} type="checkbox" />
     <span>{item}</span>
   </div>
))}

Step 3. React State to track checked items

React State is declared to maintain the list of all checked items. The code is dynamically updated whenever “setChecked()” is called with the updated list as a parameter.

const [checked, setChecked] = useState([]);

Step 4. Add and remove item from checked list

We will create a JS function to update the array based on the checkbox input with the following steps:

  1. Create JS variable with a copy of the checked React state.
  2. If the item is checked, a concatenated array of the existing array of items with the checked item.
  3. IIf the item is unchecked, the item is removed from the index using Array.splice().
  4. Call setChecked() with updated array value.
// Add/Remove checked item from list
const handleCheck = (event) => {
  var updatedList = [...checked];
  if (event.target.checked) {
    updatedList = [...checked, event.target.value];
  } else {
    updatedList.splice(checked.indexOf(event.target.value), 1);
  }
  setChecked(updatedList);
};

Next, we add the function to trigger for the onChange of checkbox input element.

<input value={item} type="checkbox" onChange={handleCheck} />

Learn more about Array.splice() from developer.mozilla.org/JavaScript/Array/splice.

Step 5. Strikethrough text for checked items

We will assign different classNames for checked and unchecked items. We declare a JS function that returns string value based on whether the item is included in the checked array.

// Return classes based on whether item is checked
const isChecked = (item) =>
checked.includes(item) ? "checked-item" : "not-checked-item";

Next, we will use the isChecked() function to determine the className of the <span></span> containing the item name.

<span className={isChecked(item)}>{item}</span>

We will add a strike-through text effect by including CSS styles for className “checked-item” in styles.css.

.checked-item {
  text-decoration: line-through;
}

Step 6. Generate string with checked item names

The checkedItems() JS function is declared to generate a string of checked items in the format of “item1, item2, item3, …” or return an empty string if no items are checked.

// Generate string of checked items
var checkedItems = checked.length
    ? checked.reduce((total, item) => {
        return total + ", " + item;
      })
    : "";

Step 7. Display the checked item names

Finally, to display the string of checked items, we will include checkedItems variable in the JSX code returned by the App component.

<div>
  {`Items checked are: ${checkedItems}`}
</div>

Full Source Code

App.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  // State with list of all checked item
  const [checked, setChecked] = useState([]);
  const checkList = ["Apple", "Banana", "Tea", "Coffee"];

  // Add/Remove checked item from list
  const handleCheck = (event) => {
    var updatedList = [...checked];
    if (event.target.checked) {
      updatedList = [...checked, event.target.value];
    } else {
      updatedList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedList);
  };

  // Generate string of checked items
  const checkedItems = checked.length
    ? checked.reduce((total, item) => {
        return total + ", " + item;
      })
    : "";

  // Return classes based on whether item is checked
  var isChecked = (item) =>
    checked.includes(item) ? "checked-item" : "not-checked-item";

  return (
    <div className="app">
      <div className="checkList">
        <div className="title">Your CheckList:</div>
        <div className="list-container">
          {checkList.map((item, index) => (
            <div key={index}>
              <input value={item} type="checkbox" onChange={handleCheck} />
              <span className={isChecked(item)}>{item}</span>
            </div>
          ))}
        </div>
      </div>

      <div>
        {`Items checked are: ${checkedItems}`}
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.app {
  font-family: sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.title {
  font-size: 22px;
  margin-bottom: 10px;
}
.list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 20px;
}
.checked-item,
.not-checked-item {
  margin-left: 10px;
}
.checked-item {
  text-decoration: line-through;
}

#react #javascript 

React Checkbox List with Example
Shubham Ankit

Shubham Ankit

1665044003

Save Multiple Checkboxes Values in React with Example

The React Checkbox is a custom checkbox-type HTML5 input component for selecting one or more options from a list of predefined choices. It supports an indeterminate state, different sizes, custom labels and positions, and UI customization.

In today's tutorial we will learn how to save multiple checkbox values ​​in React with example

To save multiple checkbox values in React, convert the checkbox values to a string and filter the state, and if any of the checkbox values are true, we add to an array and then change that array into the string and send that data to the server.

In this example, we will take three checkboxes, and users can check multiple boxes and save their values inside the MongoDB database. As we know, form control values are always controlled by the React.js state. So when the user submits the form, we need only to send the values of checkboxes whose values are valid or whose checkbox values are checked.

We save the values as a String in a MongoDB database. We use Node.js as a platform. There are many ways you can save multiple checkbox values in React js inside the MongoDB database.

Table Of Contents

  • Step 1: Install React.js
  • Step 2: Create Form inside an App.js
  • Step 3: Convert checked values into String
  • Step 4: Use Axios to send a POST request
  • Step 5: Create a Node.js backend

Step 1: Install React.js

First of all, let us install React.js using the following command.

npx create-react-app checkbox

Now, go inside the folder, and we need to install the bootstrap and axios libraries.

 

yarn add bootstrap axios

# or

npm install bootstrap axios --save

The next step is to import the bootstrap css file inside the src >> App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Step 2: Create Form inside an App.js.

I am merely taking the checkboxes and not other input types for this example. So I am making three textboxes. So, first, we need to define the three initial state values.

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  state = {
    isMJ: false,
    isJB: false,
    isDrake: false
  };

  toggleChangeMJ = () => {
    this.setState(prevState => ({
      isMJ: !prevState.isMJ,
    }));
  }

  toggleChangeJB = () => {
    this.setState(prevState => ({
      isJB: !prevState.isJB,
    }));
  }

  toggleChangeDrake = () => {
    this.setState(prevState => ({
      isDrake: !prevState.isDrake,
    }));
  }

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div className="container">
        <h2>Save the multiple checkbox values in React js</h2>
        <hr />
        <form onSubmit = {this.onSubmit}>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isMJ}
                onChange={this.toggleChangeMJ}
                className="form-check-input"
              />
              MJ
            </label>
          </div>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isJB}
                onChange={this.toggleChangeJB}
                className="form-check-input"
              />
              JB
            </label>
          </div>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isDrake}
                onChange={this.toggleChangeDrake}
                className="form-check-input"
              />
              Drake
            </label>
          </div>
          <div className="form-group">
            <button className="btn btn-primary">
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

We have defined the three initial states. Each state is for one checkbox. 

We also need to handle the change event. So when the user either checks the checkbox or uncheck the checkbox, the state will be changed. So when the user submits the form, we get all the three-state, and if any of the checkboxes are checked, we send it to the server and save the data in the MongoDB database.

Step 3: Convert checked values into String.

We will save the string into the database. The String is comma-separated values. So, we filter the state, and if any of the checkbox value is right or true, we add to an array and then finally change that array into the string and send that data to the Node.js server.

So, write the following code inside the onSubmit() function.

// App.js

onSubmit = (e) => {
    e.preventDefault();
    let arr = [];
    for (var key in this.state) {
      if(this.state[key] === true) {
        arr.push(key);
      }
    }
    let data = {
      check: arr.toString() 
    };
}

So, here as I have explained, the first loop through the states, and if the value is true, we push into the new array and finally cast that array into the String.

Step 4: Use Axios to send a POST request.

Import the axios module and send the POST request to the node server. So our final App.js file looks like below.

import React, { Component } from 'react';
import axios from 'axios';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  state = {
    isMJ: false,
    isJB: false,
    isDrake: false
  };

  toggleChangeMJ = () => {
    this.setState(prevState => ({
      isMJ: !prevState.isMJ,
    }));
  }

  toggleChangeJB = () => {
    this.setState(prevState => ({
      isJB: !prevState.isJB,
    }));
  }

  toggleChangeDrake = () => {
    this.setState(prevState => ({
      isDrake: !prevState.isDrake,
    }));
  }

  onSubmit = (e) => {
    e.preventDefault();
    let arr = [];
    for (var key in this.state) {
      if(this.state[key] === true) {
        arr.push(key);
      }
    }
    let data = {
      check: arr.toString() 
    };
    axios.post('http://localhost:4000/checks/add', data)
          .then(res => console.log(res.data));
  }

  render() {
    return (
      <div className="container">
        <h2>Save the multiple checkbox values in React js</h2>
        <hr />
        <form onSubmit = {this.onSubmit}>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isMJ}
                onChange={this.toggleChangeMJ}
                className="form-check-input"
              />
              MJ
            </label>
          </div>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isJB}
                onChange={this.toggleChangeJB}
                className="form-check-input"
              />
              JB
            </label>
          </div>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.isDrake}
                onChange={this.toggleChangeDrake}
                className="form-check-input"
              />
              Drake
            </label>
          </div>
          <div className="form-group">
            <button className="btn btn-primary">
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

Step 5: Create a Node.js backend.

First, start the mongodb server using the following command.

mongodb

Now, create one folder inside the root of the checkbox – our react project folder called backend and go inside that folder and initialize the package.json file.

npm init -y

Now, install the following dependencies for the node project.

yarn add express body-parser mongoose cors

# or

npm install express body-parser mongoose cors --save

Now, create a database connection using the following command.

module.exports = {
  DB: 'mongodb://localhost:27017/checks'
};

Now, create the routes and models folders inside the backend folder.

Inside the models folder, create one file CheckModel.js add the following code.

// CheckModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let CheckModel = new Schema({
  check: {
    type: String
  },
},{
    collection: 'checks'
});

module.exports = mongoose.model('CheckModel', CheckModel);

Also, you need to create the check.route.js file. Add the following code inside that file.

// CheckRoute.js

const checkRoute = require('express').Router(),
  CheckModel = require('../models/CheckModel');

  checkRoute.route('/add').post(function (req, res) {
    let checkmodel = new CheckModel(req.body);
    checkmodel.save()
      .then(Checkvalue => {
        res.status(200).json({'Checkvalue': 'Checkbox values have added successfully'});
      })
      .catch(err => {
        res.status(400).send("unable to save to database");
      });
  });

module.exports = checkRoute;

Finally, our server.js file looks like this.

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose')
  config = require('./DB'),
  checkRoute = require('./routes/check.route');

  mongoose.Promise = global.Promise;
  mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
  );

  const PORT = process.env.PORT || 4000;

  app.use(bodyParser.json());
  app.use(cors());

  app.use('/checks', checkRoute);

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });

Open the terminal inside the backend folder and hit the following command.

node server

So, now you have three servers running.

  1. React Development Server
  2. Node server
  3. MongoDB server

Go to the browser and navigate to this URL: http://localhost:3000/

That’s it for this tutorial . Happy Coding!!!

#react #javascript

Save Multiple Checkboxes Values in React with Example
Conor  Grady

Conor Grady

1665043158

Most to Coast App with React

Most_to_Coast

Description:

This app will reduce travel planning time. Creating a time schedule for the trip would be a little troublesome to some people and sometimes have no clue where one should go and how they should plan. This app will be the solution to those problems.

Heroku Deployment:

https://peaceful-journey-57215.herokuapp.com/main

Description:

  • This program is designed to perform CRUD (Create, Read, Update, Delete) operations from a non-relational database on a front-end Travel Plan sharing Website.
  • Backend: The back-end of this project was completed using Node.js, express server, Mongo database, npm Mongoose and tested in a backend environment (Apollo Server).
  • Frontend: This front-end of this project was completed using React, css, bootstrap rendered with graphQL requests.

Built By:

  • JavaScript
  • Node.js
  • express.js
  • npm (dotenv)
  • Path
  • React & react router
  • MongoDB (Mongoose)
  • Apollo Server (express)
  • GQL
  • Apollo Client
  • JWT
  • Nodemon & concurrently & react router dom

Built-Logic:

  1. Write out DB Models
  2. Relations of DB models (Associations) drawn in an ER Diagram.
  3. Work on queries and mutations on backend && add JWT Authentications.
  4. Once routes on backend are tested (graphql), go to frontend JS files (react) and connect queries && mutations from backend to the frontend elements using react states.
  5. styling (stylesheets).

Models && Associations Diagram (ER Diagram):

-This is a middleman diagram to help us to convert our business idea into a database schema. image

How to Install:

  • Open Gitbash/terminal, navigate towards your project location from your root by using "cd ./ project location"
  • Choose a clone option from the "Most_to_Coast" repository (either HTTPS or SSH should work)
  • In Gitbash, type "git clone HTTPS or SSH"
  • Once the clone is successful, navigate to the root directory of this repo.
  • Enter npm run install into the terminal to install all dependencies linked in the package.json file (both client and server sides).

How to initialize the database:

Create a .env file in your server directory, as the seeding the database requires connection to your database.

(optional) In terminal, enter npm run seed to feed the database with test seeds.

How to Use:

Cloud: Open the deployed heroku link, the project is hosted on the cloud and ready to be used!

Local Machine: type npm run develop in your gitbash shell and the react app would be automatically opened.

Sample Screenshots of the application:

Login/Signup image

Home/Main image

Account image

View Planner image

Create a Plan image


Download Details:

Author: utorproj3
Source Code: https://github.com/utorproj3/Most_to_Coast

#react 

Most to Coast App with React