DEV Community: okeken

How to Download a Folder from GitHub

okeken — Sun, 18 May 2025 23:44:32 +0000

If you’ve ever needed just one folder from a GitHub repository, you know cloning the entire repo can be overkill. This guide shows you how to download a specific folder from GitHub quickly and easily.

Why Can't You Download a GitHub Folder Directly?

GitHub doesn’t offer a native way to download subfolders as ZIP unless you clone the entire repo. But there's a workaround — and it’s free and easy.

Use a GitHub Folder Downloader Tool

Instead of cloning, just:

Navigate to the folder on GitHub.
Copy the URL (e.g., https://github.com/user/repo/tree/main/folder-name)
Paste it into a GitHub Folder Downloader
Click Download ZIP

That’s it!

No command line, no Git, no hassle.

Bonus: Works on Any Public GitHub Repo

As long as the repository is public, this method works for any branch or folder.

Regex for Developers: From Zero to Confident with a Real-Time Tester

okeken — Tue, 29 Apr 2025 15:22:35 +0000

Regular expressions (regex) often feel like deciphering an alien script. If you've ever stared at a pattern like (?<=\b\d{3})-(?=\d{4}\b) and felt overwhelmed, you're definitely not alone. For many developers, regex is powerful yet notoriously difficult to read and debug.

But what if regex could be less painful? What if you had a clear guide and the right tools? This post aims to demystify regex, transforming it from a source of frustration into a valuable part of your developer toolkit. We'll cover the core concepts, common pitfalls, and how using a real-time regex pattern tester can make all the difference.

Why Does Regex Seem So Hard?🤯

The typical introduction to regex often throws a dense list of symbols at you without much context. It's like learning a language by memorizing a dictionary – you know the words, but not how to form sentences.

The reality is: Regex is a mini-language for pattern matching. Like any language, it has:

Vocabulary: The special characters and sequences (., \d, [], +, *, ?).
Grammar: How you combine these tokens to define specific patterns.

Understanding this structure is the first step to taming regex. It's not magic; it's just a compact, specialized syntax.

When and Why Use Regex? The Developer Sweet Spot

Regex shines when you need to work with text patterns. It's the go-to solution for:

Validating Input: Ensuring data like emails, phone numbers, or passwords match a required format (regex pattern tester for form validation).
Extracting Data: Pulling specific information from larger blocks of text (e.g., finding all URLs, extracting log details).
Searching and Replacing: Performing complex find-and-replace operations that simple string methods can't handle.
Parsing and Tokenizing: Breaking down strings into meaningful parts based on delimiters or patterns.
Cleaning and Sanitizing: Removing unwanted characters or standardizing text formats.

Essentially, if you're manipulating strings based on patterns, regex is often the most efficient and powerful tool for the job, especially in scripting, data processing, and web development.

Learning Regex Systematically: Core Building Blocks

Instead of memorizing every symbol, focus on the fundamental components. Here’s a quick reference:

Symbol	Meaning	Example	Notes
`.`	Any single character (except newline)	`h.t` matches `hat`, `hot`, `h t`
`\d`, `\D`	Digit (`0-9`), Non-digit	`\d{3}` matches `123`
`\w`, `\W`	Word character (`a-zA-Z0-9_`), Non-word	`\w+` matches `user_id_1`
`\s`, `\S`	Whitespace character, Non-whitespace	`\s+` matches spaces, tabs, newlines
`^`	Start of the string (or line in multiline)	`^Start` matches "Start of text"	Use `m` flag for multiline mode
`$`	End of the string (or line in multiline)	`end$` matches "text ends"	Use `m` flag for multiline mode
`[]`	Character Set: Match any one character inside	`[aeiou]` matches any vowel	`[^abc]` matches any char except a, b, c
`()`	Grouping / Capturing	`(\d{2})-(\d{4})` captures `12` and `3456`	Creates numbered capture groups
`(?:...)`	Non-capturing group	`(?:Mr	Ms). `matches` Mr. `or` Ms.`

Note on Flavors: Regex syntax can vary slightly between languages (JavaScript, Python, PCRE, etc.). Always test your patterns in the specific environment where they'll be used. This is another area where a good regex tester for JavaScript developers is essential.

Using Regex in JavaScript: Common Methods ⚙️

Knowing the syntax is one thing; applying it in code is another. JavaScript provides several built-in methods on strings and RegExp objects:

RegExp.prototype.test(str):
- Checks if a pattern exists within a string.
- Returns true or false. Simple and fast for validation.
- Example: /abc/.test('abcdef') returns true.
String.prototype.match(regexp):
- If the regex doesn't have the g (global) flag, it returns the first match as an array (with details like index, input, and captured groups) or null.
- If the regex has the g flag, it returns an array of all matches (strings only, no details) or null.
- Example (no g): 'hello 123 world'.match(/\d+/) returns ['123', index: 6, input: 'hello 123 world', groups: undefined].
- Example (with g): 'cat dog cat'.match(/cat/g) returns ['cat', 'cat'].
String.prototype.matchAll(regexp):
- Requires a regex with the g flag.
- Returns an iterator that yields detailed match objects for all matches (including groups, index, etc.), even with the g flag. Best for getting full details on multiple matches.
- Example: [... 'cat dog cat'.matchAll(/cat/g)] returns detailed match objects for both 'cat' occurrences.
RegExp.prototype.exec(str):
- Similar to match() without the g flag, but maintains a lastIndex property on the regex object itself, allowing you to iterate through matches one by one if the regex has the g flag.
- Returns a detailed match array for the next match or null.
- Example: const regex = /\d+/g; regex.exec('1a2b3'); // returns ['1', ...] regex.exec('1a2b3'); // returns ['2', ...].
String.prototype.search(regexp):
- Returns the index of the first match, or -1 if no match is found. Doesn't provide match details.
- Example: 'abcdef'.search(/cde/) returns 2.
String.prototype.replace(regexp|substr, newSubstr|function):
- Finds matches and replaces them. Can replace the first match or all matches (if regex has g flag).
- The replacement can be a string (allowing special patterns like $1, $2 for backreferences to captured groups) or a function that computes the replacement.
- Example: 'hello world'.replace(/world/, 'everyone') returns 'hello everyone'.
- Example (backreference): 'Doe, John'.replace(/(\w+), (\w+)/, '$2 $1') returns 'John Doe'.
String.prototype.split(separator|regexp, limit):
- Splits a string into an array of substrings based on a separator, which can be a string or a regex.
- Example: 'a,b c'.split(/[, ]/) returns ['a', 'b', 'c'].

Choosing the right method depends on whether you need validation (test), the first match details (match no g, exec), all match strings (match with g), all match details (matchAll), the index (search), replacement (replace), or splitting (split).

Common Regex Pitfalls and How to Avoid Them

Writing effective regex involves dodging common mistakes:

1. Greedy vs. Lazy Quantifiers

Problem: Greedy quantifiers (*, +) match as much as possible. This often leads to overmatching, especially with HTML/XML.

// Tries to match an HTML tag
<p>Content</p><p>More</p>
<.*> // Matches from the first '<' to the last '>' greedily!

Solution: Use lazy quantifiers (*?, +?) to match as little as possible.
```
<.*?> // Correctly matches '<p>' then '</p>' etc.
```

2. Forgetting to Escape Special Characters

Problem: Characters like ., *, +, ?, (, ), [, ], {, }, ^, $, \ have special meanings in regex. If you want to match them literally, they must be escaped with a backslash (\).
```
// Trying to match 'example.com'
example.com // The '.' matches ANY character, not just a literal dot!
```

Solution: Escape the special characters.

example\.com // Correctly matches the literal string 'example.com'

3. Over-Reliance on `.`

Problem: Using . (match any character) too liberally can make patterns less precise and harder to debug.
```
// Trying to match time like HH:MM
..:.. // Matches 'AB:CD', '12:34', but also 'XX:YY'
```

Solution: Be specific with character classes or digits.

\d{2}:\d{2} // Only matches two digits, a colon, then two digits

4. Misunderstanding Anchors (`^`, `$`) in Multiline Mode

Problem: By default, ^ matches the start of the entire string, and $ matches the end of the entire string.
Solution: If you need ^ and $ to match the start/end of each line, enable the multiline flag (m). Many online testers allow toggling flags easily. A regex tester with multiline support and flags is crucial here.

Debugging Regex: Why Visual Feedback is Key

Writing regex is often an iterative process. You write a pattern, test it, find it doesn't quite work, and then try to figure out why. This debugging step is where many developers get stuck, especially with complex patterns involving groups, lookarounds, or flags.

Traditional debugging might involve console.log or simple text matching, which often isn't enough. You need to see what the regex engine is doing. This is where modern tools excel.

Introducing a Smarter Way: The Visual Regex Tester

Instead of guesswork, imagine a tool that provides immediate, visual feedback. Consider the benefits offered by tools like the Online Regex Tester:

Real-Time Highlighting: See matches appear as you type the pattern. This allows you to test regular expressions online instantly and catch errors immediately. It's the best online regex tester with live preview experience.
Color-Coded Match Groups: Understand exactly which parts of the text are being captured by your parentheses (). This regex tester with color-coded match groups (or online regex tool with group capture highlights) makes debugging captures trivial.
Clear Explanation of Matches: See not just that it matched, but what parts matched and which groups captured what.
Easy Flag Toggling: Experiment with global (g), case-insensitive (i), multiline (m), unicode (u), and other flags with simple buttons.
Helpful Error Messages: If your regex is invalid, get clear feedback instead of cryptic errors.
Designed for Developers: Often includes features like dark mode, mobile-friendliness, and shareable links to specific test cases – making it a great tool to test and debug regex in JavaScript and other environments.

Using such a free JavaScript regex tester tool transforms debugging from a chore into an interactive learning experience. You can debug regex expressions visually online, making complex patterns much easier to grasp and refine.

Example Use Case: Fixing a Date Pattern

Let's say you're trying to match dates in MM/DD/YYYY format:

\d{2}-\d{2}-\d{4}

You test it against 01/02/2023. Why no match? A visual tester instantly shows the pattern expects hyphens -, but the text has slashes /.

The fix is obvious:

\d{2}\/\d{2}\/\d{4} // Escape the slashes!

With real-time feedback, this takes seconds, not minutes of head-scratching.

Practical Regex Recipes for Developers

Here are some common developer tasks solved with regex. Test and adapt them using a tool like the Online Regex Tester!

1. Extract All URLs from Text

https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)

Handles http and https, optional www., and various valid URL characters.

2. Basic Email Validation

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

A common starting point. Note: Perfect email validation via regex is notoriously complex and often impractical. This covers most common cases.

3. Remove HTML Tags (Simple)

<[^>]*>

Matches < followed by any characters except >, then >. Be cautious with nested or malformed HTML. Use lazy *? if needed: <.*?>.

4. Match Repeated Words (e.g., "the the")

\b(\w+)\s+\1\b

\b: Word boundary.
(\w+): Capture one or more word characters into Group 1.
\s+: Match one or more whitespace characters.
\1: Backreference - matches the exact text captured by Group 1.
\b: Word boundary.

5. Match Standard US Phone Numbers

^\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$

Handles formats like (123) 456-7890, 123-456-7890, 123.456.7890, 1234567890. Captures area code, prefix, and line number.

6. Extracting Route Parameters (Using Named Groups)

const url = '/users/123/posts/45';
const regex = /^\/users\/(?<userId>\d+)\/posts\/(?<postId>\d+)$/;
const match = url.match(regex);

if (match && match.groups) {
  console.log('User ID:', match.groups.userId); // Output: User ID: 123
  console.log('Post ID:', match.groups.postId);  // Output: Post ID: 45
}

Uses named capture groups (?<name>...) to easily access extracted IDs.

7. Basic Password Complexity Check (Example)

function checkPassword(password) {
  // At least 8 characters
  if (password.length < 8) return false;
  // Contains at least one digit
  if (!/\d/.test(password)) return false;
  // Contains at least one lowercase letter
  if (!/[a-z]/.test(password)) return false;
  // Contains at least one uppercase letter
  if (!/[A-Z]/.test(password)) return false;
  // Contains at least one special character (example set)
  if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(password)) return false;

  return true;
}

console.log(checkPassword('Password123!')); // true
console.log(checkPassword('weak'));        // false

Uses multiple test() calls for different criteria. You can combine these into fewer, more complex regexes, but separating them can be clearer.

8. Swapping Date Formats (MM/DD/YY to DD/MM/YY)

const usDate = '12/25/24'; // MM/DD/YY
const regex = /(\d{2})\/(\d{2})\/(\d{2})/; // Capture month, day, year

// Use replace with backreferences ($1, $2, $3)
const ukDate = usDate.replace(regex, '$2/$1/$3');
console.log(ukDate); // Output: 25/12/24 (DD/MM/YY)

// Using named groups for clarity
const regexNamed = /(?<month>\d{2})\/(?<day>\d{2})\/(?<year>\d{2})/;
const isoDate = usDate.replace(regexNamed, '20$3-$1-$2'); // To YYYY-MM-DD
console.log(isoDate); // Output: 2024-12-25

Demonstrates using replace() with captured groups ($n syntax for numbered groups, or $<name> for named groups in some environments, though $n is more universal in basic JS replace) to reorder parts of a string.

Final Thoughts: Regex is a Skill Worth Honing

Regex might have a steep initial learning curve, but it's an incredibly valuable skill for any developer. The key is to learn the fundamentals, practice consistently, and leverage the right tools.

Stop fighting cryptic syntax and start seeing patterns clearly. A good visual regex tester transforms the experience from frustrating guesswork to interactive problem-solving. So next time you face a text manipulation challenge, don't shy away from regex. Embrace it, test it visually, and make it work for you.

🔗 Ready to try a better way? Check out the Online Regex Tester – it’s a powerful, free tool to help you test and debug regex expressions visually online.

Javascript to know for Reactjs

okeken — Mon, 08 Aug 2022 17:17:00 +0000

Learning React js should not be that difficult if you're already comfortable with some concepts in Javascript. One of the interesting things about using reactjs is, it sharpens your javascript skills, but hey before you decide to give react js a try, do make sure to understand these javascripts concepts.

One of the mistake people make when learning a framework/library is, what it's bringing to the table. Before we get started, here're topics we will be covering. While some of this topics are not directly related to reactjs, you'll likely see them often in a react codebase. Note, most of the topics mentioned here, are es6 and es-next javascripts features.

Let and Const
Ternaries
Template Literals
Shorthand Properties
Rest/Spread
Destructuring
Default Parameters
ES Modules
Short circuit Evaluation
Higher Order Functions (Array Methods)
Nulish Coalescing Operation
Optional Chaining
Arrow Functions

Introduction

React js is an open javascript library that enables us to be build fast, declarative and component driven web development. With react js you can build web apps, cross platform mobiles apps(react native), desktop apps (electron, node gui), progressive web apps(pwas). So learning react js is worthwhile because you can port your knowledge in building lot of stuffs.

For example if you're to do the operation below in vanilla javascript, let's say you want to fetch the list of users and display appropriate loading or errors, you would do something like this.

<button onclick='displayData'> see users </button>
<div id='users'>
</div>
<div id='loading'>
</div>
<div id='error'>
</div>

const usersUI = document.getElementById("users");
const loadingUI = document.getElementById("loading");
const errorUI = document.getElementById("error");
const apiUrl = "https://jsonplaceholder.typicode.com/users";

// fetch data from an api
const fetchData = async () => {
const res = await fetch(apiUrl);
return await res.json();
};

// display your data to the ui
const displayData = async () => {
errorUI.innerHTML = "";
loadingUI.innerHTML = "Loading...";

fetchData()
.then((users) => {
usersUI.innerHTML = users.map((item) => <p>$ {item.name}</p>);
})
.then(() => (loadingUI.innerHTML = ""))
.catch(() => {
loadingUI.innerHTML = "";
errorUI.innerHTML = "Error fetching data";
});
};

import React, {useState} from 'react'

const User = ()=>{
const [loading, setLoading] = useState=(false)
const [hasError, setHasError] = useState("")
const [users, setUser] = useState([])

const loadData = async()=>{
setLoading(true)
setHasError("")
fetch(apiUrl).then(res=> res.json() )
.then((data)=> {
setUsers(data)
})
.catch((error)=> setHasError(error))
.finally(()=>setLoading(false))
}
return (

<div>
  <button onClick={loadData}> load users </button>
  {loading ? "Loading..." : ""}
  {!!users && users.map((user) => <p> {user.name} </p>)}
  {!!hasError && "Error Fetching Data"}
</div>
) }

Look how we start from targeting the elements from the html, making the api and setting the appropriate UI from the function, what if we have up to 100 UI to update on the screen, that'll quickly turn it int a spagetti code. Compared to our react version, we set the status of our application in a html-like syntax called jsx.

Let and Const

Let and const are similar way of declaring a variable in javascript, the keyword let indicates the variable can still be re-assigned to another value, whille with const, we're saying that's the final value

let favNumber = 7;
const LargestSea ='The Philippine Sea'

favNumber can still be re-assigned without any issue, but if you try to re-assign LargestSea, you will get a parser error, Assignment to constant variable.

Ternaries

Ternaries are shorter way of declaring if-else statement in programming. For example, declaring a function to check if an number is even;


function isEven(input){
const even = n % 2 == 0;
if(even) {
  return true
  } else    { 
    return false
   }
}

this can be re-written to input % 2===0 ? true :false the expression input % 2===0, checks for ? which indicates the output if the statement is truthy and : tells what to put in the else output.
A practcal example is conditionally add className or style when performing an operation.

 <div className={success?'success-item' :'item'}>
      Items List
  </div>

Although, you can have multiple nested ternaries, it's not considered the best pratice, because it reduces code readability.

Template Literals

Template literals are cleaner way of concatenating items in a javascript expression. it starts by declaring backticks, and followed by the $ sign and curly brackets with the intended variable to be concatenated in-between the curly brackets, it's structure looks like this, ${variable} other texts. Take for instance,
let age = 10; you'll probably concatenate like,

const ageOutput = 'You are ' + age + ' years old'

we can do better by writing something like this in template literals, const ageOutput = `You are ${age} years old `. Look at how clean that is. A practical exmple in react, we will extend our ternary operator example a bit, say you also have different classes in the div below, having "item-section first-section" beside the curly brackets indicates this as a string, it works perfectly without us needing to concatenate.

  <div className={ $ {success?'success-item' :'item'} item-section first-section}>
    Items List
  </div>

Shorthand Properties

Take for example, we have a sample object,

const name = "Roy"
let user = { name:name }

we can re-write this to be let user= {name}
note, 'name' is now singular inside the object.

Rest/Spread

Rest/Spread is an es6 feature of copying, joining arrays in javascript. It starts with "..." three dots followed by what you want to join or copy.

for example if we have a sample data,

Objects

const user  = {
  name:'Tony',
  age:12
}

const otherPropertie = {
   hobby:'hiking',
   bestColor:'red'
 }

if we're to join this together before es6, we can use the Object.assign method.

The Object.assign() method allows you to copy all enumerable own properties from one or more source objects to a target object, and return the target object, Object.assign(target, user, Obj2, Obj3, ...) :

let finalMerge = Object.assign({}, user, otherProperties)

console.log(finalMerge) // { name: 'Tony', age: 12, hobby: 'hiking', bestColor: 'red' }

using the spread operator we can simple just put it this way, let finalMerge = {...user, ...otherProperties}

Arrays

Take for example you have two sample arrays;

const permissions = ['view user', 'view reports', 'download reports']
const otherPermissions = ['initiate transactions', 'delete user']

Before es6, we could do use the array concat method, const finalArray = permissions.concat(otherPermissions) would give us something like this ['view user', 'view reports', 'download reports', initiate transactions', 'delete user']. We can do better by using the spread operator,

const finalMerge = [...permissions, ...otherPermissions]

Destructuring

Destructuring is a way of accessing the values inside an object or array in a more cleaner and readable way.

Object Destructuring

const person ={
  favNumber:'green',
  name:'Mike',
  cars:['mercedes', 'toyota']
}

before es6, if we want to get the individual properties in the person object, we'll first need to assign each of the properties to a varaiable;

const favNumber = person.favNumber;
const name = person.name
const cars = person.cars

with object destructuring, we could do something like below;

const { favNumber, name, cars } = person
console.log(favNumber, name, cars) // green, Mike, ['mercedes', 'toyota']

Look at how, we are able to get the values without needing to re-assign it. We can still do some somethings with object destructuring, what if we want to rename the name property on the person object immediatelty after destructuring, we can have something like this.

  const {name:realName, favNumber, cars} = person,
  console.log(realName) // "Mike".

What if we destructure an object and we want to give it a default value, even while we're not sure this is available yet on the object,

const {name, favNumber, cars, favFood='jollof rice'  } = person
console.log(favFood) // 'jollof rice'

We can even go ahead and destructure nested objects, eg


const customer = {
name:'Tom',
mobile:"078 7070 2325",
email:tomfield@email.com,
address:{
country:'UK',
city:'East Davoch',
zipCode:AB34,
street:'33 Guildford Rd'
 } 
}

if we want to get the customer country, we could destructure it,

const {address: { country } } = customer
console.log(country) // UK

in our previous topic, we talked about 'rest/spread', Let's talk more about the rest operator, most of the time, we use both interchangeably, specifically we use 'rest' to copy part or rest of an array or object.


const {cars, favNumber, ...otherObj} = person
console.log(otherObj) // {name:'Mike'}

It copies the rest of the object for us to use. Practical react example


const HeaderComponent = ({title, ...restProps})=>{
return <div {...restProps}> {title} </div>
}

we can use our HeaderComponent like this <HeaderComponent className='my-item' /> thereby applying our 'my-item' class as if we added it manually to the component itself.

function Argument Destructuring

If we are to pass an object as argument to a function, we can destructure it out, during usage. For example


let car = {name:'Tesla', color:'red'}

function getCar({name, color}){
 return `Your car is ${name} with the color ${color}`
}

In the getCar function argument, we can destructure it out, since we know what we're expecting.

Array Destructuring

Array destructuring works similarly like object destructuring. for example, let's look at the sample data below.


const users = ['John', 'Mike', 'Cole', 'Bekky']
const [a,b, ...others] =users

console.log(a,b, others) // 'John', 'Mike', ['Cole, Bekky']

Practical example in react is the useState function

import {useState} from 'react'
const [loading, setLoading] = useState(false)

Default Parameters

Default parameters allows us to set a default value for a function parameter if its missing while being called. For example;


function greetUser(username='user'){
 return `Welcome ${username}, hope you bought some pizzas`
}

const greetingsOne = greetUser('Greg')
console.log(greetingsOne) // 'Welcome Greg, hope you bought some pizzas'

const greetingsTwo = greetUser()
console.log(greetingsTwo) // 'Welcome user, hope you bought some pizzas'

Note, the difference between the two greetings, in the second greeting, username returned as 'user' because that's what we passed as the default value.

ES Modules

ES Modules is the standard way Javascript handles, javascript files that exposes values needed externally from other files/places, using the export keyword. It's worth noting, we also do have commonjs standard for many years, but the implementation of ECMAScript (a JavaScript standard meant to ensure the interoperability of web pages across different web browsers), ES module paves the way browsers parses and loads javascript files.

ES Module

person.js

export const person = {
  name:'Simon',
  color:'yellow'
}

user.js


import { person } from 'person.js'
console.log(person) // { name:'Simon', color:'yellow' }

We can export values in our js file in two ways, named export and default export, our first example in, person.js is a named export, the name you use to declare it its file must be the same name you are using to importing it, in our case, 'person' but what if we already have a variable in our file having the same name? well we can rename it with alias import {person as currentPerson } from './person.js' we have successfully rename person to currentPerson.

import { person as currentPerson } from "./person.js";

console.log(currentPerson) // { name:'Simon', color:'yellow' }

Default Export

Default exports allows us to only expose a single value to the outside world in a js file. It is indicated by using the keyword, export default 'value' usually at the bottom of the file or immediately after it's declaration. You can only use a default export once in a file, else, it throws a parser error;

colors.js

const colors = ['red', 'blue', 'green', 'orange']

export default colors;

views.js

import colorList from './colors.js'

console.log(colorList) // '['red', 'blue', 'green', 'orange']'

When a file is exported by default you can import it with any name you want, we could have called, 'colorList', 'colorsArray' and it will still work fine.

Short circuits

Short circuits is evaluating expression from left to right, until it is confirmed, the already evaluated conditions, is not going to affect the remaining conditions, thereby skipping unneccessary works leading to efficient processing. Short cicuits supports two operators, (&&) AND and (||) OR.


AND (&&)
true && 'Hello' -> This outputs 'Hello'
true && true && false -> This outputs 'false'

false && true -> This outputs 'false'
(true && false) && false -> This outputs 'false'

OR (||)

true || false -> This outputs true

false || 'hello' || false -> This outputs 'hello'

Pratcical react usage

import {useState, useEffect} from 'react';

const Items = ()=>{
const [loading, setLoading] = useState(false)
const [data, setData] = useState([])
async function ladData(){
const response = await (await fetch('http://apiEndPoint')).json()
setData(response)
setLoading(false)
}
useEffect(()=>{
   setLoading(true)
   loadData()
},[])

return (

<div>
  {loading && "Loading"} // while loading is true shows 'Loading...'
  {data.lengtht && data.map((item) => <p key={item.id}> {item.sampleName} </p>)}
  // if data.length is truthy, ie, it's length is greater than 1 // then go
  ahead to ahead to show list in the UI
</div>
) }

Be careful when using short-circuit for conditional rendering, scenarios like zero and undefined can cause weird behaviours on the UI.
for example,

const Todos = ()=>{

const list = []
return (

<div>
  {list.length && list.map((todo) => <p key={todo.id}> 
  {todo.title} </p>)}
</div>
) }

Guess what will be displayed as the list of todos? "0". Yeah, basically javascript interpretes zero or undefined value to falsy value. One way we can solve this is typecasting the list.length to boolean, !!list.length or Boolean(list.length) would have prevented this kind of error.

Higher Order Functions (Array Methods)

Higher Order Functions (HOF) are function which takes another function as an argument/parameters or returns a function.

The chances are, you've used at least once or more unknownly. Commons one's you may be using are;

Find
Filter
Map
Includes
Reduce

other notable mentions here, some, every.


const users = [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"lifeTimePurcahse":4000
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"lifeTimePurcahse":78200

    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "username": "Samantha",
      "email": "Nathan@yesenia.net",
      "phone": "1-463-123-4447",
      "website": "ramiro.info",
      "lifeTimePurcahse":600
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "username": "Karianne",
      "email": "Julianne.OConner@kory.org",
      "phone": "493-170-9623 x156",
      "website": "kale.biz",
      "lifeTimePurcahse":10000
    },

]

Find

find method takes in a function as the argument, and returns the find element that satisfies the testing function.

  function Checker(item){
return item.id === 1
}

users.find(checker) // or users.find((item)=> item.id ===1) both functions returns the same output
// {
//"id": 1, "name": "Leanne Graham", "username": "Bret","email": "Sincere@april.biz",
// "phone": "1-770-736-8031 x56442", "website": "hildegard.org","lifeTimePurcahse":4000
// }

Filter

The filter method returns a new array filled with the elements that passed the test set by the callback function. It doesn't change or mutate the original array.

const userPurchases = users.filter(user => user.lifeTimePurchase > 70000)
// only user with id 2 has lifetimePurchase greater than 70,000
console.log(userPurchases)
// [ {
// "id": 2,
// "name": "Ervin Howell",
// "username": "Antonette",
// "email": "Shanna@melissa.tv",
// "phone": "010-692-6593 x09125",
// "website": "anastasia.net",
// "lifeTimePurcahse":78200
// }]

Filter will always return an array with the filtered results.

Map method

The map method returns a new array filled with items that satisfies the condition of the callback function. It also ends up changing the original array.


const userIds = users.map((user, index)=> user.id)
console.log(userIds) // [1,2,3,4]

Includes

The include method is used to check whether a given item is present in an array, it returns a boolean value, either true or false.

const userIsPresent = users.map(i=> i.id).includes(1)

console.log(userIsPresent) //true

Reduce Method

The reduce method takes in a reducer function to return a singular value,

Anatomy of the reduce method looks like below;
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)


function reducerFunc(total, currVal, currIndex, arr){
// currIndex -> Current Index during iteration
// arr -> The whole
// total -> current total on each iteration
//currVal -> Current value on each iteration

return total + currVal.lifeTimePurchase

}
// we are setting zero as the initial value of total
const totalLifeTimePurchases = users.reduce(reducerFunc,0)

console.log(totalLifeTimePurchases) // 92800

Let's see a react example of Higher Order Functions;

const Users =()=>{
const currenttUserId=3
const vipUserPurchase = 10000
const raffleUserWinners = [1,4,3]

// map
const _users = users.map(user => (<p key={user.id}> 
  {user.username} </p>))

 function reducerFunc(total, currVal){
    return total + currVal.lifeTimePurchase
 }

//reduce
const totalLifeTimePurchases= users.reduce(reducerFunc,0)

// find
const currentUser = users.find(user=> user.id== currentUserId)

//filter
const vipList = users.filter(user=> user.lifeTimePurchase >= vipUserPurchase)

// includes
const isRaffleWinner = users.map(user=>user.id).includes(currenttUserId)

return (
<div>
{_users}
<p>Total Purchase: {totalLifeTimePurchase} </p>
<p>current user: {currentUser.username} </p>

    <h4> vip list <h4>
    {
      vipList.map(user=> <p key={user.id}> {user.username} </p>)
    }

    raffle status: {isRaffleWinner ? 'Congrats, you're a raffle winner' : 'Oops! Try again later'}

    </div>)

}

Nulish Coalescing Operation

Nullish coalescing operations(??) allows us to return the right hand operand when the left side operand is null or undefined;


const a =12
const b = 50;

a ?? b // -> 12

let c;
let d =45
c ?? d // -> 45

Optional Chaining

Optional chaining(?.) allows us to access the key of an object safely or call functions when we're not sure if it'll be available or not.


let user = {
name: "Joe",
details: { age: 82 }

};
const userTown= user?.address?.town;
console.log(userTown); // undefined
const user.fullInfo?.() // undefined

Arrow Functions

Arrow function also called fat-arrow are alternative way of declaring functions in javascripts. They do behave differently in how they handle this, they do bind to the this execution context of their parent class/object. but since the current convention in react is hooks, rather than es6 classes, we do not need to bother much about this. a user has to explicitly bind the this of function to the parent elements. They also provide a short and implicit way to return values from a function.


const sum = (a + b)=> a+b
const sqaure = (a)=> a**2
// can even be shortened to square = a =>a**2, when we have a singular argument.

// this is the same as

function sum(a,b){
   return a + b;
 }
//sum()

function square(a){
   return a**2
  }

// React Example
function List({List=[]}) {
return (

<ul>
  {list.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>
) }

Conclusion

Learning reactjs shouldn't be a struggle, after being comfortable with the basics of javascript. You just need to know the most commonly used concepts that are being used in a react application. Learning theses topics will definitely make you more comfortable to take a launch into learning reactjs.

Other notable things, you can learn are ES6 classes and async/await.

Thanks for reading, see you in the next article!

Follow me for more interesting articles 👇👇

okekenFollow

Web Developer, specializing in React Web Applications. When not working with Javascript, loves to build Dapps on the Ethereum Ecosystem.

How to create an admin panel in React JS - Part 2

okeken — Fri, 24 Jun 2022 09:02:12 +0000

In the previous article, we went through how to create a react admin dashboard with the package react-admin where we were able to create the user and post module, with the ability to

View all existing post
Create a new post
Edit a post
Delete a post
Filter post by User
Also we're able to export our data as a CSV file

The only downside to our previous build, is we're using the provided dataProvider, given to us by react-admin, in real-life projects, we'll definitely be working with our own APIs and backend, therefore it's important we know our to integrate our own backend. By the end of the article, you'll be able to

Integrate your own API/backend to react-admin
Add pagination
Add filtering and searching
Add authentication pages

Without further ado, let's get started.

We'll first clone our previous repo, and checkout to a new branch

https://github.com/okeken/react-admin-tutorial.git

cd react-admin-tutorial

git checkout -b v2

yarn  or npm install

Step 4 will install all dependencies if, everything works fine, your screen should be like below.

Before we proceed we'll quickly go-ahead to set up our backend for this demo, we'll be using json-server, json-server-auth and fakerjs.

create a new folder, and initiate a new nodejs project in it,

open a new terminal run this command one after the order

mkdir admin-backend

cd admin-backend

npm init --y

These commands will setup our nodejs project, lastly we'll go ahead to installed the needed packages,

yarn add json-server@0.16.1 @faker-js/faker@7.6.0

There are two ways to set up our database, we can create a db.json or an index.js.

But we'll be using a mix of both due to some flexibility, we need either after deployment or during development So, we'll first an index.js

Add the code below,

const { faker } = require("@faker-js/faker");

// sample brand list

const brandList = [
  {
    id: 1,
    name: "Unbranded",
  },
  {
    id: 2,
    name: "Handmade",
  },
  {
    id: 3,
    name: "Recycled",
  },
  {
    id: 4,
    name: "Bespoke",
  },
  {
    id: 5,
    name: "Small",
  },
  {
    id: 6,
    name: "Generic",
  },
  {
    id: 7,
    name: "Intelligent",
  },
  {
    id: 8,
    name: "Licensed",
  },
  {
    id: 9,
    name: "Oriental",
  },
  {
    id: 10,
    name: "Sleek",
  },
  {
    id: 11,
    name: "Luxurious",
  },
  {
    id: 12,
    name: "Gorgeous",
  },
  {
    id: 13,
    name: "Refined",
  },
  {
    id: 14,
    name: "Awesome",
  },
  {
    id: 15,
    name: "Practical",
  },
  {
    id: 16,
    name: "Electronic",
  },
  {
    id: 17,
    name: "Fantastic",
  },
  {
    id: 18,
    name: "Modern",
  },
  {
    id: 19,
    name: "Handcrafted",
  },
  {
    id: 20,
    name: "Tasty",
  },
];

module.exports = () => {
  const data = { products: [], customers: [], orders: [], brands: brandList };

  // Create 2000 products
  for (let i = 0; i < 2000; i++) {
    const title = faker.commerce.product();
    const price = faker.commerce.price();
    const description = faker.commerce.productDescription();
    const image = faker.image.image();

    const chosenBrand = Math.floor(
      Math.random() * (brandList?.length ?? 10 + 1)
    );
    const brand = brandList[chosenBrand]; // pick a random brand from the brands array with  ranging from 0 to the length of the brands array
    const brandName = (id) => brandList.find((brand) => brand.id === id)?.name;
    data.products.push({
      id: i + 1,
      title,
      price,
      description,
      image,
      brandId: brand.id,
      brandName: brandName(brand.id),
    });
  }

  // Create 50 users
  for (let i = 0; i < 50; i++) {
    const name = faker.name.firstName();
    const email = faker.internet.email();
    const address = faker.address.streetAddress();
    const city = faker.address.city();
    const state = faker.address.state();
    const zip = faker.address.zipCode();
    const phone = faker.phone.phoneNumber();
    const country = faker.address.country();
    data.customers.push({
      id: i + 1,
      name,
      email,
      phone,
      address: `${address} ${city}, ${state} ${zip} ${country}`,
    });
  }

  // create 300 orders
  for (let i = 0; i < 500; i++) {
    const customerId = faker.datatype.number({ min: 1, max: 50 });
    const productId = faker.datatype.number({ min: 1, max: 2000 });
    const quantity = faker.datatype.number({ min: 1, max: 10 });
    const price = faker.commerce.price();
    data.orders.push({
      id: i + 1,
      customerId,
      productId,
      quantity,
      price,
      total: price * quantity,
    });
  }

  return data;
};

Go to the package.json, under the scripts, remove, the default

"test": "echo \"Error: no test specified\" && exit 1"
and replace it with

   "dev": "json-server  --watch index.js --port 5000  --no-cors",
    "start": "json-server  index.js --port 5000  --no-cors"

--watch -> Is to watch for file changes
--port -> to set up the port we're running our server
-no-cors -> to prevent any cors issue from the frontend.

Go ahead and save your changes and start up the server in the terminal with

yarn dev

If everything works as expected, you should see the screens below both on your terminal and browser.

We're done with the backend, let's move back to the frontend.

Let's Connect to a real API.

We'll try to model our API structure to look like the table below, based on this, we'll try to configure react-admin to consume our API.

Actions	Api Endpoints
get all products	GET baseUrl/products
get a product by id	GET baseUrl/products/id
update product	PUT baseUrl/products/id
delete a product	DELETE baseUrl/products/id
create a product	POST baseUrl/products/id
get paginated products	GET baseUrl/products?_page=1&_limit=10
search products	GET baseUrl/products?q=search terms
filter product	GET baseUrl/products?brandsId=2

Go and create a file called dataProvider.js and put the code below in it. This file is responsible for mapping our API requests to react-admin, think of it as the translator react-admin needs, to talk to our API and effectively deliver the needed manipulation to build our dashboard.

import { fetchUtils } from 'react-admin';
import { stringify } from 'query-string';

const apiUrl = 'localhost:5000';
const httpClient = fetchUtils.fetchJson;

export default {
    getList: (resource, params) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
            filter: JSON.stringify(params.filter),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers, json }) => ({
            data: json,
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },

    getOne: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`).then(({ json }) => ({
            data: json,
        })),

    getMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids }),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;
        return httpClient(url).then(({ json }) => ({ data: json }));
    },

    getManyReference: (resource, params) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
            filter: JSON.stringify({
                ...params.filter,
                [params.target]: params.id,
            }),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers, json }) => ({
            data: json,
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },

    update: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`, {
            method: 'PUT',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({ data: json })),

    updateMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids}),
        };
        return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
            method: 'PUT',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({ data: json }));
    },

    create: (resource, params) =>
        httpClient(`${apiUrl}/${resource}`, {
            method: 'POST',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({
            data: { ...params.data, id: json.id },
        })),

    delete: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`, {
            method: 'DELETE',
        }).then(({ json }) => ({ data: json })),

    deleteMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids}),
        };
        return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
            method: 'DELETE',
        }).then(({ json }) => ({ data: json }));
    }
};

Now let's begin to modify this file, based on the structure of our API.

GetList: This returns all the items in an resource, from our api it returns array of products, orders, users, and brands. to use it, we have to first modify our const query = { sort: JSON.stringify([field, order]), range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]), filter: JSON.stringify(params.filter), }; and return httpClient(url).then(({ headers, json }) => ({ data: json, total: parseInt(headers.get('content-range').split('/').pop(), 10), })); to const query = { _page: page, _limit: perPage, ...params.filter, }; return httpClient(url).then((resp) => { return { data: resp.json, total: +resp.headers.get("X-Total-Count"), }; });

_page, _limit are coming from our api for pagination purposes, the params.filter will return an object which we can use for sorting, filtering, ordering purpose. the total key on our return statement represents the toal number of items in our resource, json-server exposes a header "X-Total-Count" for us to use here, note the + sign in front of resp.headers, it's used to typecast from a string to an integer.

DeleteMany: json-server do not allow us to delete multiple items at once, however, I did a workarond for this. first we'll set the header to use const headers = { Accept: "application/json", "Content-Type": "application/json", }; we went ahead to scrap the fetchUtils.fetchJson() and replace it with fetch, afterall it's just a wrapper around fetch plus some little additions.

params.ids will give us an array of item ids we want to delete, we mapped through it and make our API request, then we use promise.all to retrieve the response of all our requests. brilliant! 😎

 const delFetch = params.ids.map((eleid) => {
      return fetch(`${apiUrl}/${resource}/${eleid}`, {
        method: "DELETE",
        headers: headers,
      });
    });

    const response = await Promise.all([delFetch]).then((res) => {
      return {
        data: params.ids,
      };
    });

Note: the format, we return from our response has to be in this format, a 'data' key with the value of params.ids as an array. Else react-admin will start yelling at us.
If you have made it to this place, I'm so proud of your progress. 👏🏼👏🏼

Now, let's go and integrate all our changes to our app and start doing stuff. 😁

Head over to app.js and import dataProvider.js, replace it with the previous dataProvider, and comment out our previous components.

In our components directory create a new component Filter.jsx and paste the code below into it.

//FilterPost.jsx
import React from "react";
import { Filter as FilterAdmin, ReferenceInput, TextInput, SelectInput } from "react-admin";

const Filter = ({searchLabel = 'Search', label='', reference='', source='', ...otherProps}) => (
  <FilterAdmin {...otherProps}>
    <TextInput
    label={searchLabel}
    source="q"
    alwaysOn />
    <ReferenceInput
    label={label}
    source={source}
    reference={reference}
    allowEmpty>
      <SelectInput optionText="name" />
    </ReferenceInput>
  </FilterAdmin>
);



export default Filter;

Under src again, create a new folder called, "views"
create a sub-directory under it like the image below
(

in views/brands/index.jsx add the code below in it

import * as React from "react";
import {  Datagrid, List, TextField } from "react-admin";


const BrandList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
        </Datagrid>
    </List>)

export default BrandList;

in views/products/index.jsx

import React from "react";
import { List, Datagrid, TextField,  EditButton } from "react-admin";
import Filter from "../../Components/Filter";


const filterProps = {
  label: "brands",
  reference: "brands",
  source: "brandId",
}
 const ProductsList = props => (
  <List filters={<Filter  {...filterProps} />}  {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="brandName"  />
      <TextField source="price" />
      <TextField source="description" />
      <EditButton />
    </Datagrid>
  </List>
);


export default ProductsList

in views/products/components/CreateProducts.jsx add the code below

//CreateProducts.jsx
import React from "react";
import {
  Create,
  SimpleForm,
  ReferenceInput,
  TextInput,
  SelectInput,
} from "react-admin";


const ProductsCreate = props => (
  <Create {...props}>
    <SimpleForm>
      <ReferenceInput
      source="brandId"
      reference="brands"  label="brands">
        <SelectInput optionText="name" />
      </ReferenceInput>
      <TextInput source="title" />
      <TextInput source="price" />
      <TextInput multiline source="description" />
    </SimpleForm>
  </Create>
);

export default ProductsCreate;

in views/components/EditProducts.jsx add the code below;

//EditProducts.jsx
import React from "react";
import {
  Edit,
  SimpleForm,
  ReferenceInput,
  TextInput,
  SelectInput,
} from "react-admin";
//

 const EditProducts = props => (
  <Edit {...props}>
    <SimpleForm>
      <ReferenceInput source="brandId" reference="brands"  label="brands">
        <SelectInput optionText="name" />
      </ReferenceInput>
      <TextInput source="title" />
      <TextInput source="price" />
      <TextInput multiline source="description" />
    </SimpleForm>
  </Edit>
);

export default EditProducts;

Go to app.js and import the newly create components, with the final code looking like the one below.

import * as React from "react";
import { Admin, Resource } from "react-admin";
import { Dashboard } from "./Components/DashBoard.jsx";
import BrandList from "./views/brands/index.jsx";
import dataProvider from "./dataProvider";
import ProductsCreate from "./views/products/components/CreateProducts.jsx";
import EditProducts from "./views/products/components/EditProducts.jsx";
import ProductList from "./views/products";

const App = () => (
  <Admin dashboard={Dashboard} dataProvider={dataProvider}>
    <Resource name="brands" list={BrandList} />
    <Resource
      name="products"
      list={ProductList}
      edit={EditProducts}
      create={ProductsCreate}
    />
  </Admin>
);

export default App;

Open your admin-backend and run yarn dev to spin up your local backend
Go back to your frontend project and run yarn start in your terminal. If everything works fine, you should see the gif video below.

Let's add make some modifications to our backend code, so we can deploy it on our favorite hosting server plus authentication and authorization,

run yarn add json-server-auth axios or npm install json-server-auth axios in your terminal, then
create a new folder src, move our previous index.js inside, create app.js, and put the code below

json-server-auth exposes some API for us for authentication purposes plus some guarded routes, which we did for products and brands

Register a new user

Any of the following routes registers a new user :

POST /register
POST /signup
POST /users email and password are required in the request body :

POST /register
{
  "email": "user@user.com",
  "password": "mypassword"
}

your response should be something like this:

{
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9saXZpZXJAbWFpbDEyLmNvbSIsImlhdCI6MTY1NTkyMzg4NCwiZXhwIjoxNjU1OTI3NDg0LCJzdWIiOiIyIn0.eNVKi0mjOeZl7RpLPWZbpo5ggdAtB2uq1h96cuAp3eQ",
    "user": {
        "email": "user@user.com",
        "id": 1
    }
}

Login a user

Any of the following routes logs an existing user in :

POST /login
POST /signin
email and password are required fields:

POST /login
{
  "email": "user@user.com",
  "password": "mypassword"
}

you should a get response like the below, it contains the JWT token and the user data excluding the password:

{
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9saXZpZXJAbWFpbDEyLmNvbSIsImlhdCI6MTY1NTkyNzA3MSwiZXhwIjoxNjU1OTMwNjcxLCJzdWIiOiIyIn0.PixNo_fWZJ2IiCByjtePLDSrf4_Zikup6hQt_qxQbmI",
    "user": {
        "email": "user@user.com",
        "id": 1
    }
}

const path = require("path");
const jsonServer = require("json-server");
const auth = require("json-server-auth");

const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, "db.json"));
server.db = router.db;
const middlewares = jsonServer.defaults();

server.use(middlewares);

const rules = auth.rewriter({
  "/products*": "/660/products$1",
  "/orders*": "/440/orders$1",
});

// You must apply the middlewares in the following order
const port = process.env.PORT || 5000;
server.use(rules);
server.use(auth);
server.use(router);
server.listen(port, () => {
  console.log("JSON Server is running on port " + port);
});

create db.json and put some sample data there

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" },
   "users": [],

}

create routes.json and put the authorization route guard there

{
    "/products*": "/660/products$1",
    "/orders*": "/440/orders$1"
  }

Notes:

Routes	Permission
/660/*	User must be logged in to write or read the resource.
/440/*	No one can write the resource. User must be logged in to read the resource

There are more multiple ways to implement route guard with json-server-auth, for extensive study you can checkout their github repo here

head over to src/index.js and let's extract all the products, orders, and customer creation inside a function. We'll use the node js fs(file system) to dynamically modify our db.json
Go ahead and copy the modified data in your src/index.js

const { faker } = require("@faker-js/faker");
const fs = require("fs");

// sample brand list
const brandList = [
  {
    id: 1,
    name: "Unbranded",
  },
  {
    id: 2,
    name: "Handmade",
  },
  {
    id: 3,
    name: "Recycled",
  },
  {
    id: 4,
    name: "Bespoke",
  },
  {
    id: 5,
    name: "Small",
  },
  {
    id: 6,
    name: "Generic",
  },
  {
    id: 7,
    name: "Intelligent",
  },
  {
    id: 8,
    name: "Licensed",
  },
  {
    id: 9,
    name: "Oriental",
  },
  {
    id: 10,
    name: "Sleek",
  },
  {
    id: 11,
    name: "Luxurious",
  },
  {
    id: 12,
    name: "Gorgeous",
  },
  {
    id: 13,
    name: "Refined",
  },
  {
    id: 14,
    name: "Awesome",
  },
  {
    id: 15,
    name: "Practical",
  },
  {
    id: 16,
    name: "Electronic",
  },
  {
    id: 17,
    name: "Fantastic",
  },
  {
    id: 18,
    name: "Modern",
  },
  {
    id: 19,
    name: "Handcrafted",
  },
  {
    id: 20,
    name: "Tasty",
  },
];

// Get content from file
const filePath = process.cwd() + "//src/db.json";
var contents = fs.readFileSync(filePath);
// Define to JSON type
var jsonContent = JSON.parse(contents);

const products = () => {
  const product = [];
  for (let i = 0; i < 2000; i++) {
    const title = faker.commerce.product();
    const price = faker.commerce.price();
    const description = faker.commerce.productDescription();
    const image = faker.image.image();

    const chosenBrand = Math.floor(Math.random() * brandList.length);
    const brand = brandList[chosenBrand]; // pick a random brand from the brands array with  ranging from 0 to the length of the brands array
    const brandName = (id) => brandList.find((brand) => brand.id === id).name;
    product.push({
      id: i + 1,
      title,
      price,
      description,
      image,
      brandId: brand.id,
      brandName: brandName(brand.id),
    });
  }
  return product;
};

const users = () => {
  const user = [];
  // Create 50 users
  for (let i = 0; i < 50; i++) {
    const name = faker.name.firstName();
    const email = faker.internet.email();
    const address = faker.address.streetAddress();
    const city = faker.address.city();
    const state = faker.address.state();
    const zip = faker.address.zipCode();
    const phone = faker.phone.number();
    const country = faker.address.country();
    user.push({
      id: i + 1,
      name,
      email,
      phone,
      address: `${address} ${city}, ${state} ${zip} ${country}`,
    });
  }

  return user;
};

const orders = () => {
  const order = [];

  // create 300 orders
  for (let i = 0; i < 500; i++) {
    const customerId = faker.datatype.number({ min: 1, max: 50 });
    const productId = faker.datatype.number({ min: 1, max: 2000 });
    const quantity = faker.datatype.number({ min: 1, max: 10 });
    const price = faker.commerce.price();
    order.push({
      id: i + 1,
      customerId,
      productId,
      quantity,
      price,
      total: price * quantity,
    });
  }

  return order;
};

const modified = {
  ...jsonContent,
  brands: brandList,
  customers: users(),
  orders: orders(),
  products: products(),
};

// write to a new file named 2pac.txt
fs.writeFile(filePath, JSON.stringify(modified, null, 2), (err) => {
  // throws an error, you could also catch it here
  if (err) throw err;
});

module.exports = () => {
  const data = {
    products: products(),
    customers: users(),
    orders: orders(),
    brands: brandList,
  };
  return data;
};

Go to package.json, let's modify our script dev and start logic;

    "dev": "json-server --watch src/index.js -m ./node_modules/json-server-auth --port 5000  --no-cors -r src/routes.json",
    "start2": "node  src/index.js  && json-server src/db.json -m ./node_modules/json-server-auth  --port 5000  --no-cors -r src/routes.json",
    "start":"node  src/index.js  && node src/app.js  --no-cors"

note: the "dev" is for development purpose while start is for deployment/production purpose

Open the terminal do yarn start or yarn dev, and everything should still work as like before.
Except, you'll not be able to view the products again unless we login in

Add Authentication Pages

Modify the dataProvider to send the authorization header,

Just like dataProvider, we'll be implementing the auth logic in a file called authProvider.js. Go ahead and create one and paste the code below,

// src/components/authProvider.js
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from "react-admin";
import axios from "axios";
import { baseUrl } from "./env";

export const authProvider = async (type, params) => {
  // when a user tries to log in
  if (type === AUTH_LOGIN) {
    const { email, password } = params;
    return axios
      .post(`${baseUrl}login`, {
        email,
        password,
      })
      .then(({ data }) => {
        localStorage.setItem("authToken", data.accessToken);
        return data;
      })
      .catch((e) => e);
  }
  // when a user tries to logout
  if (type === AUTH_LOGOUT) {
    localStorage.removeItem("authToken");
    return Promise.resolve();
  }
  // when the API throws an error
  if (type === AUTH_ERROR) {
    const { status } = params;
    if (status === 401 || status === 403) {
      localStorage.removeItem("authToken");
      return Promise.reject();
    }
    return Promise.resolve();
  }
  // when a user navigates to a new location
  if (type === AUTH_CHECK) {
    return localStorage.getItem("authToken")
      ? Promise.resolve()
      : Promise.reject();
  }

  return Promise.reject("Unknown Method");
};

Header over to app.js and import authProvider.js and add a prop of authProvider ={authProvider} to the Admin component.

import * as React from "react";
import { Admin, Resource } from "react-admin";
import { Dashboard } from "./Components/DashBoard.jsx";
import BrandList from "./views/brands/index.jsx";
import dataProvider from "./dataProvider";
import { authProvider } from "./authProvider.js";
import ProductsCreate from "./views/products/components/CreateProducts.jsx";
import EditProducts from "./views/products/components/EditProducts.jsx";
import ProductList from "./views/products";


const App = () => (
  <Admin
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
    <Resource name="brands" list={BrandList} />
    <Resource
      name="products"
      list={ProductList}
      edit={EditProducts}
      create={ProductsCreate}
    />
  </Admin>
);

export default App;

Restart your frontend server, you should have a login page automatically pop up. But we want to supply our own login and register page. Let's go ahead and install some Material UI package we need for these two pages,

 yarn  add @mui/material  @mui/icons-material  @emotion/react @emotion/styled react-admin@latest

We also want to upgrade to the latest version of react-admin, because of many breaking changes from version 3.x.x, after the installations are done, go ahead and create Login.jsx inside our views folder and paste the code below;

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useLogin, useNotify } from 'react-admin';


const theme = createTheme();

 function Login() {
  const login = useLogin()
  const notify = useNotify()
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const userData = {
        email: data.get('email'),
        password: data.get('password'),
      }

      notify('Login successful', {type:'success'})
    login(userData);
  };

  return (
    <ThemeProvider theme={theme}>
      <Grid container component="main" sx={{ height: '100vh' }}>
        <CssBaseline />
        <Grid
          item
          xs={false}
          sm={4}
          md={7}
          sx={{
            backgroundImage: 'url(https://source.unsplash.com/random)',
            backgroundRepeat: 'no-repeat',
            backgroundColor: (t) =>
              t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          <Box
            sx={{
              my: 8,
              mx: 4,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in
            </Typography>
            <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                autoFocus
              />
              <TextField
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                id="password"
                type="password"
                autoComplete="current-password"
              />

              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Sign In
              </Button>
              <Grid container>
                <Grid item xs>

                </Grid>
                <Grid item>
                  <Link href="#/register" variant="body2">
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>

            </Box>
          </Box>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

export default Login;

For registration, create Register.jsx inside the views folder and paste the code below into it;

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import axios from 'axios'
import { baseUrl } from '../env';
import { useNotify } from 'react-admin';
import { useNavigate } from "react-router-dom";

const theme = createTheme();

export default function SignUp() {
  const notify = useNotify()
  const navigate = useNavigate()
  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });

    const userData = {
      email: data.get('email'),
      password: data.get('password'),
    }

    try{
      const response = await axios.post(`${baseUrl}register`, userData)
      localStorage.setItem('authToken', response.data.accessToken)
      notify(`Registration successful`, { type: 'success' });
      navigate('/#')
    }
      catch(e){

        notify(`Error registering, try again`, { type: 'error' });

      }
  };

  return (
    <ThemeProvider theme={theme}>
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign up
          </Typography>
          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <TextField
                  required
                  fullWidth
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="new-password"
                />
              </Grid>
              <Grid item xs={12}>

              </Grid>
            </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign Up
            </Button>
            <Grid container justifyContent="flex-end">
              <Grid item>
                <Link href="#/login" variant="body2">
                  Already have an account? Sign in
                </Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </Container>
    </ThemeProvider>
  );
}

Let's go ahead and use these pages in our app.js, and import both of them. pass a prop of loginPage to the admin component just like what we did for Dashboard, import CustomRoutes from react-admin, and use it as shown below;

 <CustomRoutes noLayout>
      <Route path="/register" element={<Register />} />
    </CustomRoutes>

you should import Route component from react-router-dom, the final version should look like below

import * as React from "react";
import { Admin, Resource, CustomRoutes } from "react-admin";
import { Dashboard } from "./Components/DashBoard.jsx";
import BrandList from "./views/brands/index.jsx";
import dataProvider from "./dataProvider";
import { authProvider } from "./authProvider.js";
import ProductsCreate from "./views/products/components/CreateProducts.jsx";
import EditProducts from "./views/products/components/EditProducts.jsx";
import ProductList from "./views/products";
import Login from "./views/Login.jsx";
import { Route } from "react-router-dom";
import Register from "./views/Register";

const App = () => (
  <Admin
    loginPage={Login}
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
    <CustomRoutes noLayout>
      <Route path="/register" element={<Register />} />
    </CustomRoutes>

    <Resource name="brands" list={BrandList} />
    <Resource
      name="products"
      list={ProductList}
      edit={EditProducts}
      create={ProductsCreate}
    />
  </Admin>
);

export default App;

You might notice, that your products and brand page no more display their data, let's quickly add authorization to these requests. In dataProvider.js, let's change the getList to be as shown below

.....

  getList: (resource, params) => {
    const { page, perPage } = params.pagination;
    const query = {
      _page: page,
      _limit: perPage,
      ...params.filter,
    };
    const url = `${baseUrl}${resource}?${stringify(query)}`;

    const token = localStorage.getItem("authToken");
    const options = {
      headers: new Headers({ Accept: "application/json" }),
    };
    if (token) {
      options.headers.set("Authorization", `Bearer ${token}`);
      return httpClient(url, options).then((resp) => {
        return {
          data: resp.json,
          total: +resp.headers.get("X-Total-Count"),
        };
      });
    }
  },
  ....

Logout, and create a new user, after successful registration, you'll be redirected to the dashboard page, everything should work as expected.

You can go ahead and deploy your backend api to your preferred hosting service,and point it to the baseUrl in our frontend. I'm using heroku for this tutorial.

Todo: Because this article is already long enough, there are few other things we can make to extend this further

Customize the dashboard with our own styles
Port the project to nextjs
Adding form validation on the login and page registration.

That's it guys, If you make it this far, I'm rooting for you, let me know your thoughts, suggestion, and questions in the comment section.

source codes: frontend end and backend

xoxo

How to create an admin panel in React JS- Part 1

okeken — Sat, 05 Dec 2020 17:31:15 +0000

Building a react dashboard panel can quickly get complicated especially if you'll be working on multiple modules. Think of building software that models a human resource management system, that has a time and attendance management module, finance management module, recruiting, hiring, employee management, etc.

What if there's an out of the box solution to drastically reduce the lines of codes you'll be writing. A mini framework that takes care of creating, updating, deleting, getting your items to display on the screen, state management, and themed with one of the best design systems. That's is what a singular took will be using can do for us.

In this tutorial, we'll be using the react-admin package to bootstrap our application. At the end of this tutorial, you should be able to

Create a basic dashboard of users and post
Be able to create new users/post
Be able to edit new user/post
Be able to Adds new user/post
Be able to update new user/post
Be able to able to create your own data provider(more to that in the tutorial).

So let's jump in 😊

You should have the nodejs installed on your system to download all the needed packages. download the nodejs on your system if you don't have one installed.get it here
if you have it installed, open up your terminal and type node -v or node --version and should return a version, as below

First, we will be installing the, create react app to get started.

open up your terminal


 create-react-app reactadmin

hit enter, it'll take a while for all the needed packages to get installed, depending on your internet speed.
after installation, type, npm start this will start up your application and you should be greeted with a frontend as below.

Now, we're set to begin the react-admin project.

open up your terminal and type in


 i react-admin ra-data-json-server prop-types

Go to your source file, open your app.js and replace the codes with the ones below;



// in src/App.js
import * as React from "react";
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider
 (
'https://jsonplaceholder.typicode.com'
 );
const App = () => <Admin dataProvider={dataProvider} />;

export default App;

Save your changes and check your browser, if everything works fine with no error, you should be greeted with a page as below.

Mapping And Adding Our Resources

Our preferred API we'll be using is the popular JSON placeholder API, we will pulling out the users, and post resources available to us from the API.

if you hit the user's endpoint(get), you should be greeted with a response as below.

code source

One of the props, the Admin component will be expecting is the dataProvider props, this is what inject the data from an API into the app, because, we're using the JSON placeholder as a test here, we have the dataProvider already prepared for consumption later on we'll go ahead to add our own custom one, but for now, we'll be sticking with the available one.

The Admin Component will also expect one or more of Resources components as its child children. We can have one or two or more even depending on our use case scenario.

Our code should look like this.



import * as React from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

export default App;

Note the addition of the name prop, users, list prop, ListGusser.
The name prop users is synonymous with we telling react-admin to fetch our data from https://jsonplaceholder.typicode.com/users.

Then we have the list props, which is getting the data and mapping it for us. The ListGuesser is great a tool for us to know how to build the components returning our data on the UI, from the name guesser it's guessing what our structure should look like. if you save your changes and look at your UI, you will see a list of users displayed on the screen.

Now, things are getting interesting, 🤓

Under the hood, react-admin is displaying our data with what is known as ListGuesser, these components can only be used in the development, well, should be used only in the development phase, let's proceed to get rid of it and build our own components to display the same content. Go ahead to open the console, ListGuesser will tell us how our new component should look like.

We'll now go-ahead to create that component and import it into our app.js. A pattern I'll like to follow is creating a component folder, inside that, I can begin to create all other components. Note, this is not mandatory this is a personal preference to make sure everything stays organized.



//Post.js

import React from "react"
import { List, Datagrid, TextField, EmailField} from 'react-admin';


export const UserList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="address.street" />
            <TextField source="phone" />
            <TextField source="website" />
            <TextField source="company.name" />
        </Datagrid>
    </List>
);

And in our app.js we'll delete the ListGuesser, import our post component, and pass the List prop as the List value



import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { UserList } from "./Components/Post.jsx";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
  </Admin>
);

export default App;

Save and check out your browser, you'll discover nothing changed, but we have successfully removed the Guesser component.

You can begin to do amazing stuff, with this setup, like rendering the list, showing a set maximum number of items on the page, selecting and deleting items We're getting to where to edit and add items in a moment.

While deleting, react-admin makes use of what is called optimistic UI updates. What does this even mean? 🤔

Stay with me, I'll not bother you with the database, response jargon.😄 When we're making an update to a UI, for example delete functionality, there's a time lag to when the data is actually removed from the server.

Ultimately when the data is no more present in the database it'll be removed from the UI, however, we want to create an illusion for the user, such that when they hit the delete button it's removed automatically from the UI and the request is sent to the database.

Behind the scene, in this scenario we're hopeful/optimistic it'll truly be removed from the database without any issue. But if anything goes wrong probably a sudden slow internet connection, server, etc. The removed item will be reinstated back to the UI.

Using the pessimistic approach, we'll send our request to the backend and wait until we get a response before we can update the UI.

react-admin use an optimistic approach, which is cool by the way, 🥳.

One thing you may notice is, we're getting and mapping all the data returned to us from the serve. Ideally, we only want some certain data on the UI not all.

The Datagrid in the Post.js is responsible for allocating different data types to our returned information, we'll go ahead to trim down our information. Under the Datagrid, we have different components, and so many of them. I'll proceed to remove the address, textfield, company name, and leave the rest for now.

Relationship Between Data

One thing react-admin is capable of doing is handling the relationship between data between APIs it can detect the relationship between them and help us to render our view in the most appropriate way. Let's render another set of data to the screen using the same API but this time, the post endpoint.

We're going to first use the ListGuesser, then create a new component as suggested by the ListGuesser and import it inside our app.js just like how we did the users' components.

Let's remove the guesser, create a new component in the component folder, and import it.



import React from "react";
import { List, Datagrid, TextField, ReferenceField } from "react-admin";

export const PostList = props => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <ReferenceField source="userId" reference="users">
        <TextField source="id" />
      </ReferenceField>
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="body" />
    </Datagrid>
  </List>
);

Let's go through some of the components given to us in the posts. First is the , the reference field does not actually add any markup to your UI, what it does is get some data from an external source prepare and get it ready to be consumed by its children component.

In our example, the userId prop is telling the reference field to use the data here as the entry point to begin to fetch data from the reference "users". I hope that makes sense to you.

The is what is actually consuming our and displaying our data. Looking at the post, the column Id not actually making much sense, let's switch it to display the author's name instead.


 <TextField source="name" /> 

```, this is what we now have instead of using the id.

I'll go ahead to trim down the data, put the post-Id as the first column, remove the *<TextField />, and add an edit button to the UI. I'll be importing the Edit button component to our UI and removing the "rowClick" prop on our Datagrid component.

import React from "react";
import {
List,
Datagrid,
TextField,
ReferenceField,
EditButton,
} from "react-admin";

export const PostList = props => (

);


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ct4391384267sezcqsr.PNG)

Our UI should look like the above screenshot. 😎

###Editing and Adding New Records.
up until now, we have been viewing, deleting our records, it's time to edit and add new records. 

Like the ListGuesser component, we also have what we call the EditGuesser component, sweet! right?  😇

In our app.js, we'll be importing the EditGuesser, check our console, to see the guessed components that will enable us to edit our displayed items.

So, we will have some like this in our app.js

import * as React from "react";
import { Admin, Resource, EditGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { UserList } from "./Components/User.jsx";
import { PostList } from "./Components/Post.jsx";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (

);

export default App;

We imported the EditGuesser, add another prop, edit to our post component, and give it the value EditGuesser. Sure we'll be removing the EditGuesser and replace it with our created component as suggested by the EditGuesser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iu3j3e8nj7bkin1sjqom.PNG)

//EditPost.jsx
import React from "react";
import {
Edit,
SimpleForm,
ReferenceInput,
TextInput,
SelectInput,
} from "react-admin";

export const PostEdit = props => (

);

This is our newly created edit component, I have successfully removed the EditGuesser and everything still works well.

Let's make some adjustments to our EditPost component to improve its UX. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ht52bxv1qnvae0pyuxpr.PNG)

First, we want to make sure the user options is giving us the name of the user, not its id, we want to make sure the id of the id is read-only and should be placed at the top of the component, lastly, the body section should be able to expand and display the text at only. 

We'll be placing the textfield component immediately after the simpleform component, add a disabled prop to it. One issue is settled.

We'll be changing the SelectInput OptionText from the value id to name, to reflect the name of the posts' author.

We'll add the multiline prop to the textinput body, this will expand the text input for the user to see all the text at once.

//EditPost.jsx
import React from "react";
import {
Edit,
SimpleForm,
ReferenceInput,
TextInput,
SelectInput,
} from "react-admin";

export const PostEdit = props => (

);

Our code should be above as above and UI should change to what we have below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1we2ft1o21hn0yfpw78o.PNG)

###Adding New Records.

For us to be able to add a new record, we just have to copy the PostEdit component add little tweaks and we're good to go.

Create a PostCreate component, replace the Edit with Create, remove the *<TextInput disabled source="id" />* and import the new component into our app.js

//CreatePost.jsx
import React from "react";
import {
Create,
SimpleForm,
ReferenceInput,
TextInput,
SelectInput,
} from "react-admin";

export const PostCreate = props => (

);


In our app.js, under our Resources component, add a new prop "create" and let the value be the newly imported "PostCreate".

We have successfully added the ability to create, update, delete, and view our records. 🎉🎉🎉

Note, because the JSON placeholder API is read-only when we attempt to create a new record it doesn't appear on our records, if we're using a real API that accepts a post request then everything should work fine.

##Adding Filters To Our Post

From our previous work, we have been able to sort, view according to pages but not the ability to filter our records, filtering our records is short and simple and let' do just that.

//FilterPost.jsx
import React from "react";
import { Filter, ReferenceInput, TextInput, SelectInput } from "react-admin";

export const PostFilter = props => (

);


The **<Filter>** component comes in handy from react-admin, the source prop of the value "q" is pertaining to the JSON placeholder API the alwaysOn makes our filter feature always visible in the UI.

We'll be embedding our filter component in a different way compared to how we have been adding other components to the app.js. This time we'll be adding it as a prop to the List Component in Post.jsx.

Import the FilterPost Component, add the "filters" props to the List component and let the value be the FilterComponent, just like what we have below.

import React from "react";
import {
List,
Datagrid,
TextField,
ReferenceField,
EditButton,
} from "react-admin";

import { PostFilter } from "./FilterPost";

export const PostList = props => (
} {...props}>

);


Now, we can filter our records, and users can even add search criteria.

###Adding Homepage to our Dashboard

Let's add a home page to our dashboard. By default react-admin places the first resource as the home page, we can however change that and add our own custom dashboard home.

import * as React from "react";

export const Dashboard = () =>

THis is the dashboard

;


Create a dashboard.jsx in the components folder, go to the source folder, app.js, and import the newly created dashboard.js as a dashboard prop to our **<Admin />** component.

import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { UserList } from "./Components/User.jsx";
import { PostList } from "./Components/Post.jsx";
import { PostEdit } from "./Components/EditPost.jsx";
import { PostCreate } from "./Components/CreatePost.jsx";
import { Dashboard } from "./Components/DashBoard.jsx";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (

name="posts"
list={PostList}
edit={PostEdit}
create={PostCreate}
/>

);

export default App;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgirmwopw373xa3hu23v.PNG)

There are a couple of things we can still do to make this dashboard, a little better, for example, supporting mobile devices, how to add own API instead of the JSON placeholder, and build a custom dataprovider, this will be rolled out in the next post. So keep your eyes peeled. 

[Source code available on Github](https://github.com/okeken/react-admin-tutorial)

UPDATE: The Part 2 is available  <a href="https://dev.to/okeken/how-to-create-an-admin-panel-in-react-js-part-2-3j9">here </a>

Getting Started With Reactjs - For Complete Newbie

okeken — Thu, 13 Aug 2020 13:18:18 +0000

Getting Started with reactjs for a beginner might be an herculean task, especially if you're not yet sound in basic fundamentals of JavaScript before moving to react, or probably the react way of thinking might be a little difference in the conventional way of updating the DOM in Javascript. However the case may be. When you get the hang of it, it actually more beautiful to use. Enough talking let's get to the react itself.

Fundamentally reactjs works by updating the virtual DOM, now the question what's a virtual dom, according the react official documentation, The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

This means reactjs works by creating a snapshot of the current UI of the DOM, whenever something changes in the application, it compares with to each other if there's difference it updates according. The major shift in paradigm of updating the DOM with this approach is basically,

updating the DOM is an expensive operation. Imagine you have hundreds of stuffs to update on the screen using a vanilla JS to do this, will not only be cumbersome to do, but also expensive that's where reactjs begins to shine.
With Reactjs you can do much more with less code.

There are many more benefits of using reactjs, maintainability, scalable etc. But the two mentioned are just too obvious not to begin to learn Rectjs asap.

Let's begin with a simple counter app to kick start the journey of our react, we will be building a simple counter that increases and/or decreases the output number,

We'll be using the react hooks to get this done, instead of the class based components more on this later.

Let's start by installing our react app for this project, we'll be using the create react app boilerplate:
make sure you have node installed on your machine, if you don't download the latest version here
to confirm everything is good to go, do node --version via your terminal it should returned something shown below.

npx create-react-app my-app
cd my-app
npm start

Be sure to clear the dafault text and images that comes loaded with the create-react-app.

Navigate to your App.js file and type in the code below.

import React, { useState} from 'react';
import { render } from 'react-dom';

import './style.css';

function App () {
const [count, setCount] = useState (0)

let increaseCount =()=>{
  setCount(count + 1);
}
let decreaseCount =()=>{
  setCount(count - 1);
}

    return (
      <div className = 'counter-div'>
      <h1>{count} </h1>
      <br />
      <button onClick ={increaseCount}>+ </button>
      <button onClick ={decreaseCount}> - </button>

      </div>
    );

}

render(<App />, document.getElementById('root'));

Here's the live app link here

In the next series we'll be exploring what does UseState actually do behind the screen, other type of hooks we can use in our react apps like

UseEffect
useEffectLayout
UseCallback
UseMemo
UseRef
how to do conditional rendering in react
Fetching data from an API
A Medium size project, An Online Book Search App, to cement our knowledge.

I'm excited on this journey, stay tuned for another post of the reactjs series.

DEV Community: okeken

How to Download a Folder from GitHub

Why Can't You Download a GitHub Folder Directly?

Use a GitHub Folder Downloader Tool

Bonus: Works on Any Public GitHub Repo

Regex for Developers: From Zero to Confident with a Real-Time Tester

Why Does Regex Seem So Hard?🤯

When and Why Use Regex? The Developer Sweet Spot

Learning Regex Systematically: Core Building Blocks

Using Regex in JavaScript: Common Methods ⚙️

Common Regex Pitfalls and How to Avoid Them

1. Greedy vs. Lazy Quantifiers

2. Forgetting to Escape Special Characters

3. Over-Reliance on .

4. Misunderstanding Anchors (^, $) in Multiline Mode

Debugging Regex: Why Visual Feedback is Key

Introducing a Smarter Way: The Visual Regex Tester

Practical Regex Recipes for Developers

Final Thoughts: Regex is a Skill Worth Honing

Javascript to know for Reactjs

Introduction

Let and Const

Ternaries

Template Literals

Shorthand Properties

Rest/Spread

Objects

Arrays

Destructuring

Object Destructuring

function Argument Destructuring

Array Destructuring

Default Parameters

ES Modules

Default Export

Short circuits

Higher Order Functions (Array Methods)

Find

Filter

Map method

Includes

Reduce Method

Nulish Coalescing Operation

Optional Chaining

Arrow Functions

Conclusion

okekenFollow

How to create an admin panel in React JS - Part 2

Let's Connect to a real API.

Register a new user

Login a user

Add Authentication Pages

How to create an admin panel in React JS- Part 1

Mapping And Adding Our Resources

Relationship Between Data

THis is the dashboard

Getting Started With Reactjs - For Complete Newbie

3. Over-Reliance on `.`

4. Misunderstanding Anchors (`^`, `$`) in Multiline Mode