ReactJS on Aamnah - Frontend Web Developer

Generic Props in React and TypeScript to get rid of Children being Implicitly Any

Fri, 22 Dec 2023 09:46:01 +0200

error TS7031: Binding element "children" implicitly has an "any" type.

If you have ever come across the error above, it usually happens in a situation where you have a wrapper element that will have children, but you don’t know all the other props it might be getting and are spreading them..

You can get rid of the error by typing the props you are spreading as generic props. Code would look like below:

Convert Create React App project to Vite

Thu, 21 Dec 2023 13:51:49 +0200

Make sure all the needed dependencies in package.json are copied to the new project and installed
Make sure the import paths are okay

URLs need to be updated in `index.html`

%PUBLIC_URL% is Create React App specific, you need that for CRA to be able to process files in the public/ folder. For Vite, it is not necessary.

1<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
2<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
3<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
4<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#ed254e">
5<meta name="msapplication-TileColor" content="#000411">
6<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
7<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
8
9<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

would become

1<link rel="icon" href="/favicon.ico" />
2<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
3<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
4<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ed254e">
5<meta name="msapplication-TileColor" content="#000411">
6<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
7<link rel="apple-touch-icon" href="/logo192.png" />

Environment variables (`process.env`)

Vite: Env and Mode

Getting started with React Context

Wed, 05 Aug 2020 00:00:00 +0500

Are we doing the Context vs. Redux debate? No. Just consider this article as someone who hasn’t heard of Redux, someone who’s new to React, managing state that needs to be shared by multiple components, with React’s built-in functionality.

Every component that’s using a particular context re-renders if anything tin that context changes.

Provider will have hooks and redux logic

<Provider> must be passed a value prop, this value is what the Consumer will have access to. This will be your values in state and funtcions to modify state etc.

 1import React, { createContext, useContext, useState } from 'react'
 2
 3import { sampleData } from 'sample-data.ts'
 4
 5const ListsContext = createContext(sampleData.lists)
 6ListsContext.displayName = 'ListsContext'
 7
 8// the hook to use our context and have reducer logic
 9function useListsContext() {
10  const context = useContext(ListsContext)
11  if (!context) throw new Error('ListsContext must be used with ListsProvider')
12  return context
13}
14
15// the provider we'll export
16function ListsProvider(props: any) {
17  const [data, setData] = useState(sampleData.lists)
18
19  const value = { data, setData }
20
21  return <ListsContext.Provider value={value} {...props} />
22}
23
24export { useListsContext, ListsProvider }

 1import React, { Fragment } from 'react'
 2
 3import { Text } from 'react-native'
 4
 5import * as Type from './Lists.types'
 6import { useListsContext, ListsProvider } from './ListsContext'
 7
 8export default function Lists(props: any) {
 9  const data: Type.Lists = useListsContext()
10
11  return (
12    <ListsProvider>
13      <Fragment {...props}>
14        <Header>
15          <Text>Lists</Text>
16        </Header>
17        <Body>
18          {data.map((list: Type.List) => (
19            <Item key={list.id}>
20              <Title>{list.title}</Title>
21              <Description>3 items</Description>
22            </Item>
23          ))}
24        </Body>
25      </Fragment>
26    </ListsProvider>
27  )
28}

Leigh Hailday passes {children} https://www.youtube.com/watch?v=u06qAON66iw

Custom Path mapping (i.e. absolute imports) in React and React Native

Tue, 04 Aug 2020 12:00:24 +0500

The benefit of doing so

neater imports and organization
when i move components around by copy pasting code, the paths in the import statements don’t change. I know VS Code can auto-update import paths, and it is wonderful, but when it does the path updates you have to go in and save all files where the path was updated. Not having to update any paths to begin with is cool.

You have to update both babel.config.js and tsconfig.json if you’re using TypeScript.

Notes on SWR

Tue, 04 Aug 2020 00:00:01 +0500

tl;dr:

Application state !== remote data from a server. Remote data should be in a cache, application state should be in state (React Context is fine)
Once you accept the above, you’ll stop using Redux to store everything that comes back from the server (i.e. remote data)
Because you stopped making a client side copy of the server side data, you no longer have to worry about your state becoming stale
You can access the data from the SWR cache the same way you can access data from a store. Because SWR cahce is a global state object. (fyi, server side data is also called server cache)
You can use Axios with SWR, it will not force you to give it up. As a matter of fact, you can use any library you want for making HTTP requests
With SWR, you no longer have to worry about manually updating error, loading, success state and write reducers for them. SWR gives you these out of the box
SWR is only meant for reading data (GET), for other CRUD operations, you can handle them outside SWR
You can use a mutate function to update SWR cache
You still need global app state, (be it Redux or React Context), we just don’t store remote data in it.

Its cache is a global state object, keys are things in the state, useSWR calls and dependent fetching are selectors. Not sure about the local app state part though that would probably need to be in a separate context. @rauchg is smarter than me so he might have a better idea!
— Giuseppe (@giuseppegurgone) October 31, 2019

Notes on state management in React Apps

Tue, 04 Aug 2020 00:00:00 +0500

	MobX	Redux	Context + Hooks	Recoil
Status	stable, being used in Production at large companies	battle tested in large scale production apps		experimental
	multiple stores	multiple reducers	multiple contexts
Tooling		Redux DevTools
Verbosity		verbose, but Redux Toolkit to the rescue	verbose, but useContext is cool

MobX

Observable pattern. In MobX you can directly edit the state tree, unlike Redux where you must dispatch actions in order to update state.

Notes on responsive screen dimensions in React Native

Wed, 29 Jul 2020 12:13:18 +0500

getting dimensions

Dimensions for static values
useWindowDimensions hook for responsive values, but it can only be used inside a React component (as opposed to something like a Theme.ts file)
react-native-responsive-dimensions that offers both responsive values and hooks

static vs. responsive values

static values won’t constantly update when the window/screen size changes. On Android, the width and height can change for a variety of reasons: the screen orientation was changed, split screen view, freeform views where window size is smaller than screen size (e.g. floating Google maps) and so on. There are also foldable phones now!

Automatically sort import statements in React projects

Tue, 28 Jul 2020 14:55:14 +0500

Why

Less cognitive load, faster file scanning!

Solution

ESLint! Because:

it’ll do it automatically on file save
it’ll do it for the other devs in the team as well

Config

1npm i -D eslint eslint-plugin-import @typescript-eslint/parser

My config is in YAML because i prefer YAML (it has comments). You can convert it to JSON if you use JSOn.

 1# .eslintrc.yaml
 2# Configuration: https://eslint.org/docs/user-guide/configuring
 3# Using with Prettier: https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration
 4
 5extends:
 6  - eslint:recommended
 7  - plugin:import/errors
 8  - plugin:import/warnings
 9  - plugin:import/typescript
10
11plugins:
12  - import
13
14settings:
15  import/resolver:
16    node:
17      extensions: ['.js', '.jsx', '.ts', '.tsx']
18      moduleDirectory: ['node_modules', 'src/']
19
20rules:
21  import/order:
22    - error
23    - groups:
24        - builtin
25        - external
26        - internal
27        - - parent
28          - sibling
29      pathGroups:
30        - pattern: react
31          group: external
32          position: before
33      pathGroupsExcludedImportTypes:
34        - builtin
35      newlines-between: always
36      alphabetize:
37        order: asc
38        caseInsensitive: true

Result

 1// React import (Always at the top)
 2import React, { useState, useEffect } from 'react'
 3
 4// External
 5import { LinearGradient } from 'expo-linear-gradient'
 6import ContentLoader, { Rect } from 'react-content-loader/native'
 7import { View, Text, Image, ScrollView, TouchableOpacity, Alert, Platform } from 'react-native'
 8import { SafeAreaView } from 'react-native-safe-area-context'
 9import { NavigationActions, NavigationRoute } from 'react-navigation'
10import { useNavigation } from 'react-navigation-hooks'
11import { NavigationStackOptions, NavigationStackProp } from 'react-navigation-stack'
12import { useDispatch, useSelector } from 'react-redux'
13
14// Internal imports
15import { SvgIcon } from 'components/icons'
16import { Routes } from 'components/navigation'
17import { Profile as TextLocalization } from 'helpers'
18import { selectUser } from 'store/auth'
19import { contactStateSelector, sendContact, clearContact, selectContactStateById } from 'store/contact'
20import { archiveConversationRequest } from 'store/conversation'
21import { selectConversationByUserId } from 'store/conversations'
22import { blockUserRequest } from 'store/report'
23import { RootState } from 'store/rootReducer'
24import { getUserDetails, clearUser, getUserByIdSelector } from 'store/user'
25import { UserSearch, ContactType, ContactState, UserDetails, UserProfile } from 'types'
26
27// Parent & Sibling imports
28import { Dimension, Color } from '../../Theme'
29import { DateTimeUtils, Localization, Sex } from '../../utils'
30import OptionsMenu, { Option } from '../common/OptionsMenu'
31import { Carousel } from '../profile/Carousel'
32import { ProfileActionButton } from '../profile/ProfileActionButton'
33import { ProfileTabs } from '../profile/ProfileTabs'
34import { styles, placeholderBgColor, placeholderFgColor, viewportWidth } from './Profile.style'

Troubleshooting

If VS Code Prettier isn’t formatting on Save, set Prettier as the Default Formatter in Settings
Enable ESLint as a formatter, and set it as the default formatter for VS Code, that’ll format the doument for import statements.

React Context and useContext in Functional Components

Fri, 20 Dec 2019 00:00:00 +0500

Instead of wrapping everything in <MyContext.Consumer>, we’ll use useContext(Context)

useContext

Theming styled-components in React

Tue, 05 Nov 2019 00:00:00 +0500

1npm i styled-components styled-theming

if you have a Typescript project

1npm i @types/styled-theming

 1// App.js
 2
 3import React from 'react'
 4import { ThemeProvider } from 'styled-components'
 5
 6export default function App() {
 7  return(
 8    <ThemeProvider theme={{ mode: 'light' }}>
 9      {/* rest of your app */}
10    </ThemeProvider>
11  )
12}

You can style variations of the same button with theme.variants()

 1import styled from 'styled-components';
 2import theme from 'styled-theming';
 3
 4const backgroundColor = theme.variants("mode", "kind", {
 5  default: { light: "#123456", dark: "#123456" },
 6  primary: { light: "#123456", dark: "#123456" },
 7  success: { light: "#123456", dark: "#123456" },
 8  danger: { light: "#123456", dark: "#123456" },
 9  warning: { light: "#123456", dark: "#123456" },
10})
11
12const Button = styled.button`
13  background-color: ${backgroundColor};
14`
15
16Button.propTypes = {
17  kind: PropTypes.oneOf(["default", "primary", ...]),
18};
19
20Button.defaultProps = {
21  kind: "default",
22};

Props

Here, default, primary, danger etc. are props that you can pass to your Button, and the styles will change based on what prop you passed.

Integrating Sentry with a React Native app built using Expo

Mon, 21 Oct 2019 17:33:07 +0500

Install the package

1npm i sentry-expo

Initialize Sentry as soon as possible before loading your React Native app

 1/*
 2App.jsx or App.tsx
 3*/
 4import * as Sentry from 'sentry-expo'
 5import Constants from 'expo-constants'
 6
 7Sentry.init({
 8  dsn: 'DSN link goes here',
 9  enableInExpoDevelopment: true, // disabled by default. if false, all your dev/local errors will be ignored and only app releases will report errors to Sentry, Sentry.captureException() will be no-op
10  debug: true
11})
12
13if (!__DEV__) {
14  // revisionId is not available in the manifest when running in development mode (using Expo CLI), defaulting to undefined.
15  Sentry.setRelease(Constants.manifest.revisionId)
16}

Now you can use Sentry anywhere in your app. Example usage:

.NET Core SignalR with React Native

Wed, 16 Oct 2019 00:00:00 +0500

1# .NET Core 2.2
2#npm i @aspnet/signalr
3#yarn add @aspnet/signalr
4
5# .NET Core 3.0
6npm install @microsoft/signalr

@microsoft/signalr works with .NET Core 3.1 and has a withAutomaticReconnect() function that we can use for reconnecting if connection lost. This makes code simpler. And it works with WebSocket by default so we don’t need the heartbeat either.

1const connection = new SignalR.HubConnectionBuilder()
2  .withUrl('https://api.mysite.com/signalhub', {
3    accessTokenFactory: () => TOKEN
4  })
5  .configureLogging(SignalR.LogLevel.Debug)
6  .withAutomaticReconnect() // this will reconnect if connection lost
7  .build()

Working code example (@aspnet/signalr)

React Native with Prettier, Typescript, ESLint and Expo

Fri, 11 Oct 2019 18:47:34 +0500

UPDATE

React Native projects now come with @react-native-community setup by default. It includes support for Prettier, Typescript and React hooks by default

 1// config from @react-native-community
 2
 3  extends: [
 4    'plugin:prettier/recommended', // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
 5    'prettier/react',
 6  ],
 7
 8  plugins: [
 9    'eslint-comments',
10    'react',
11    'react-hooks',
12    'react-native',
13    '@react-native-community',
14    'jest',
15  ],

NOTE

After deciding on TSLint and implementing it, i find out that Palantir, the maintainers of TSLint actually plan to deprecate TSLint and move to ESLint, so i re-did the setup with ESLint

Responsive SVGs in React

Mon, 15 Jul 2019 00:00:00 +0500

tl;dr: You need to import the responsive svg as a ReactComponent

Firstly, you need a responsive SVG. And then you need to inport it as a ReactComponent in React

 1import React from 'react'
 2
 3
 4import logo from '../assets/img/logo-responsive.svg'
 5import { ReactComponent as Logo } from '../assets/img/logo-responsive.svg'
 6
 7function Demo() {
 8  return (
 9    <div className="App-body">
10      <main>
11        <h1>Responsive SVG Demo</h1>
12
13        {/* the img will show but will not be responsive */}
14        <img src={logo} alt="logo" />
15
16        {/* the ReactComponent will be a respnsive SVG, but it'll add the entire SVG, 
17         i.e. ALL the <symbol>s you defined will be in the code */}
18        <Logo /> 
19      </main>
20    </div>
21  )
22}
23
24export default Demo

WordPress API - send post details with comments data

Fri, 12 Jul 2019 00:00:00 +0500

Why?

I need the post title and slug in the comments endpoint so that i don’t have to make another call to get that data to build the post title link.

Username commented on Post title

There are two ways you can do this:

Add a new field with register_rest_field
Edit the response that is sent using the rest_prepare_comment filter

register_rest_field()

The rest_api_init action fires when preparing to serve an API request
The register_rest_field() registers a new field on an existing WordPress object type (post, comment etc.)

 1//
 2// Add post slug to the /comments/ endpoint
 3// so that we don't have to make another call to get the post title and slug to build the URLs
 4//
 5add_action('rest_api_init', function () {
 6	// register_rest_field( $object_type, $attribute, $args)
 7	register_rest_field('comment', 'post_slsug', array(
 8		'get_callback' => function ($comment) {
 9												$post = get_post($comment['post']);
10												return $post->post_name;
11											}
12	));
13});

The same can be written like so:

Adding a Custom Endpoint to WordPress

Mon, 08 Jul 2019 00:00:00 +0500

 1add_action( 'rest_api_init', function () {
 2	register_rest_route( 'fpp/v1', 'news', array(
 3		'methods' => 'GET',
 4		'callback' => 'get_news_listing'
 5	));
 6});
 7
 8function get_news_listing ( $data ) {
 9	$post_args = array(
10		'numberposts' => 10,
11		'post_type' => 'post'
12	);
13
14	$posts = get_posts($args);
15
16	if ( empty( $posts ) ) {
17		return null;
18	}
19
20	foreach($posts as $key => $value) {
21	  $posts[$key] = $value;
22	}
23
24	// Add thumbnail to each post object
25	// https://www.php.net/manual/en/function.array-walk.php
26
27	// https://www.php.net/manual/en/control-structures.foreach.php
28
29	return $posts;
30
31}

Implementing SVG icons in React

Thu, 27 Jun 2019 00:00:01 +0500

v1

 1import React from 'react'
 2import './Icon.scss'
 3
 4function Icon({ name, size }) {
 5  return (
 6    <i className="Icon">
 7      <img
 8        src={`/icons/${name}.svg`}
 9        className={`Icon-${name}`}
10        alt={name}
11        width={size ? `${size}px` : '32px'}
12      />
13    </i>
14  )
15}
16
17export default Icon

1import Icon from './Icon'
2
3<Icon name="home" />

Pros

Simple, gets the job done

Cons

You can not style these like an SVG (e.g. fill, stroke etc.) because they are imported as a static image.
Every image you include is a seperate image file requested and loaded

v2

 1import React from 'react'
 2import './Icon.scss'
 3
 4// Import all the svg icons as React Components
 5import { ReactComponent as Bell } from '../../icons/bell.svg'
 6import { ReactComponent as Chatroom } from '../../icons/chatroom.svg'
 7import { ReactComponent as Couple } from '../../icons/couple.svg'
 8
 9// map the passed icon names and the component (i.e. the SVG file) to load
10const icons = {
11  bell: Bell,
12  chatroom: Chatroom,
13  couple: Couple,
14}
15
16function Icon({ name }) {
17  let SVGicon = icons[name]
18
19  return <SVGicon className={`Icon Icon-${name}`} />
20}
21
22export default Icon

1<Icon name="bell" />

Pros

SVG Icon System in React

Thu, 27 Jun 2019 00:00:00 +0500

SVG as Image

 1import React from 'react'
 2import logo from './logo.svg' // Tell Webpack this JS file uses this svg
 3
 4console.log(logo) // /logo.84287d09.svg
 5
 6function Header() {
 7  // Import result is the URL of your image
 8  return <img src={logo} alt="Logo" />
 9}
10
11export default Header

SVG as a React component

You can import an SVG as a React Component. This has been supported since Create React App 2.0 (react-scripts@2.0.0 and react@16.3.0)

1import { ReactComponent as MyIcon } from './icon.svg'
2export { MyIcon }

1import { ReactComponent as Logo } from './logo.svg'
2const App = () => (
3  <div>
4    {/* Logo is an actual React component */}
5    <Logo className="App-logo" alt="logo" />
6  </div>
7)

Don’t forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

React Router push link

Mon, 30 Jan 2017 00:00:00 +0500

how to programmatically change the link, when enter is pressed, and pass a quaery param

using this.context.router.push

Getting data IN

Thu, 24 Nov 2016 00:00:02 +0500

React simply renders components, using data from only two places: props and state.

One of the first things you learn in working with React is state. It’s pretty fundamental to React. It’s essentially data, and it could be anything!

Data States

Thu, 24 Nov 2016 00:00:01 +0500

States

To update the state, you can call this.setState passing in a new object which overwrites one or both of the email and password properties.

JS for React

Mon, 21 Nov 2016 00:00:00 +0500

React is just JavaScript. If you’re getting frustrated with React, it’s probably because your JS knowledge is lacking. For example .map() is very good for generating HTML lists in React. But if you don’t know the JS .map() method, you’ll wonder what happened.

.map()
.bind(this)

ReactJS on Aamnah - Frontend Web Developer

Generic Props in React and TypeScript to get rid of Children being Implicitly Any

Convert Create React App project to Vite

URLs need to be updated in index.html

Environment variables (process.env)

Getting started with React Context

Custom Path mapping (i.e. absolute imports) in React and React Native

Notes on SWR

Notes on state management in React Apps

MobX

Notes on responsive screen dimensions in React Native

getting dimensions

static vs. responsive values

Automatically sort import statements in React projects

Why

Solution

Config

Result

Troubleshooting

Links

React Context and useContext in Functional Components

Theming styled-components in React

Props

Integrating Sentry with a React Native app built using Expo

.NET Core SignalR with React Native

React Native with Prettier, Typescript, ESLint and Expo

UPDATE

NOTE

Responsive SVGs in React

Links

WordPress API - send post details with comments data

register_rest_field()

Adding a Custom Endpoint to WordPress

Implementing SVG icons in React

v1

v2

SVG Icon System in React

SVG as Image

SVG as a React component

React Router push link

Getting data IN

Links

Data States

States

JS for React

URLs need to be updated in `index.html`

Environment variables (`process.env`)