belachkar

Pagination using ReactJS and Bootstrap v4

Using:

• React v17 framework
• Bootstrap v4 UI framework
• jsonplaceholder Fake REAST API
• axios HTTP requests

App.js

belachkar

If there is a problem installing node-sass (Build error):

Install AS ADMINISTRATOR windows-build-tools package globally: npm --vs2015 install -g windows-build-tools. Delete the node_modules folder. Delete the package-lock.json file. Reinstall the dependencies: npm i.

Please hit the Star at the top if you like the guidance project,

I hope it helps.

belachkar

Simple React Redux example

Simple React Redux example tiny app files, on how to use store, reducers, actions.

index.js:

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';

belachkar

Netlify Lambda Function Simple Example

Package.json the changes to made:

{
  "proxy": "http://localhost:9000",
  "scripts": {
    "lambda": "netlify-lambda serve src/lambda",
    "build": "npm run build:app && npm run build:lambda",
    "build:app": "react-scripts build",

belachkar

Material UI

Simple example of code using Material UI

App.js:

import {
  AppBar,
  Button,

belachkar

Advanced dropdown facebook animation

Created using react-transition-group package.

App.js:

import { useEffect, useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { ReactComponent as ArrowIcon } from './icons/arrow.svg';

belachkar

React Apollo GraphQL basic implementation

Frontend app

React application using Apollo to request a GraphQL API.

.eslintignore:

public
.cache

belachkar

Node Typescript Initial Project

Repository - Github: init-node-typescript

Packages

package.json:

{
  "scripts": {

belachkar

Strapi Import CSV Data

For one-time import.

const _ = require('lodash');
const request = require('request');
const parse = require('csv-parse');
var strapi = require('strapi')();
var fs = require('fs');

belachkar

React SEO

SEO.js

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ title, description }) => {