DEV Community: Andreas Bergqvist

Web site checklist - for developers

Andreas Bergqvist — Thu, 02 Jun 2022 18:08:56 +0000

There is a rich landscape of tools, frameworks and CMSes that greatly increase your productivity when building a web site. So when a path is selected, a design is implemented - there are just a few more things to consider to finalize your great accomplishment.

☑️ images should be minimized and delivered in best possible format (webp)
☑️ images should be resized to match actual size and be lazy loaded
☑️ make sure site is cached in best way
☑️ server should serve http/2 (or http/3)
☑️ add http caching so that files are cached in the browser
☑️ sitemap should exist - and added to Google Search console
☑️ robot should be able to crawl site
☑️ meta description should exist on pages
☑️ links and buttons should be clickable without mouse
☑️ buttons with no text should have aria-label
☑️ header-tags should be in order
☑️ symantic html with main, nav, section and so on
☑️ images have describing alt texts
☑️ user should be able to tab through all interactive elements
☑️ input fields should have labels
☑️ make sure cache (including JavaScript and CSS files) is invalidated on deploy or content update
☑️ if there is an existing site that are being updated, add redirects from old URLs to new
☑️ analytics should be implemented
☑️ no cookies should be saved before user consent
☑️ sharing in social media should include editable title, description and image
☑️ browsers used by the majority or your users should be supported and tested
☑️ created 404 page
☑️ add a descriptive readme file - another developer should easily be able to get the project up and running with the information
☑️ branching workflow in git should be documented in readme file
☑️ any environment specific settings should exist in a .env file (an .env.example file should be added to git)
☑️ use addons/plugins/extensions that debug memory and database usage locally
☑️ add error reporting for frontend and backend in production
☑️ document any password or key in a password manager
☑️ linting of the code should be configured and forced by other developers (though git workflows or deployment)

Cool, now we are done!

Teaching React

Andreas Bergqvist — Mon, 28 Dec 2020 21:30:10 +0000

I'm a developer who was worked professionally since the beginning of 2000 with mostly web development.

Since a few years I've worked quite a lot with React (and React Native) and are REALLY enjoying it!

Recently I got a question from a school to be involved in a React education for people already in the industry (web development) who wants to learn React.

Since I really enjoy React, and also love to spread my knowledge to other developers, I accepted (together with a co-worker) it! How hard could it be?

When it comes to all the details of React, it might not actually be that easy, as it seemed... =) I'll try to explain why.

The history

React has been a open source project by Facebook for quite some years now (since 2013). Me personally is very happy with the current state of things in the React ecosystem. But a lot of things has happened during these years and I can imagine a lot of people being frustrated with ever changing "trends" on how to build stuff.

But except for the much appreciated hooks-update, we at Itiden (were I work) has kind of gathered our favorite libraries around the core React libs, and for the last 1-2 years stuck with that, and been really happy with it.

But this also makes it kind of hard to teach, since I would like to teach the way we work with it. But also understand that not everyone does it that way... I'll try to explain how we do it, and why.

Functional components vs Class components

Short story, we like and only use functional components.

I would like to focus the education on functional components and not go in to Class components to much.

But I guess a basic understanding is "nice to have". Since old documentation and examples might be written with classes. And also, some might get to work in "old" (old is relative in this case =) projects that uses classes.

Global state

In bigger (and it does not even have to be that big) projects you will at sometime need to store state that is globally available (and not sent with props to all components).

Nowadays, this is quite easily done with the Context API and useState hooks.

But when to gets a little bit more complex, you would probably use useReducer or even a third-party library to handle state.

I have never come to like Redux (the most commonly used third-party library). The amount of boilerplate (yeah, I've heard about Redux toolkit and that might fix this) and the difficulty I've had to just read code that used Redux and understand it has just not worked for me. And when it comes to useReducer, it kinda reminds me of Redux and I'm having trouble (might be a native language thing, English is not my native language) understanding the "reducer" part.

And a few years ago, to the rescue came Mobx.
It was kind of a "hallelujah moment" when it was released and me together with my colleagues looked at the documentation and how you would write code with it. Since then, we have used Mobx in almost all projects.

But I understand that we can't just focus on Mobx in the education. I'm aware that more project are using other solutions, then are using Mobx.

Styling

When React was released, there was a debate about how the hell you could suddenly mix logic (the Javascript part) with HTML and styling. We have all learned that these three should all be split up in .html, .js and .css files!

Since then, I would say that most people (that have used React or any other of the major Javascript frameworks) agree on that it actually isn't that bad, and actually quite nice even to keep things together in component file.

Still, there are multiple ways of styling components. While it is fully possible (and I guess quite widely used) to write styling in a separate css (or sass/less) file, with the use of Javascript to write your HTML (JSX in React) along came the idea of writing CSS in Javascript. Quite some libraries have been released to help the developer to accomplish that. But we have agreed (and are enjoying it) to use Styled Components.

But what should you educate? I guess we'll keep the discussion open on what to use, but it will be hard not to prefer Styled Components :-)

The directory structure

When you start your small React project I wouldn't overthink this to much. But when a project grows, I think it is a good idea to think about where you put your files and how to name them.

There are two major "ways" of structuring your files. By type of file (like component, page, util, service etc.) or by features (group components, services etc. that belong together).

While I understand the second way (by feature), we have kind of stuck with the more "basic" (and more widely used I would say) way of just structuring the files by type.

But this is very much a matter of personal opinion.

When it comes to naming you component files, there are also multiple ways. You could keep a directory structure with a folder named after each Component and a index file exporting the components. This I would say work best if you would have multiple files, like tests in the same folder. Otherwise, keep it simple.

Testing

I would like to teach some fundamentals regarding testing your React code. I would use Jest and React Testing Library och teach how to do some basic tests. This was actually harder than I estimated. I guess, coming from a web development background where you haven't written tests (as most student seemed). Also, when trying Typescript or Next.js, it seemed like some have more problems configuring their tests then writing the actual application. And I understand them, setting up your tests is not easy.

But I guess, when figuring out the setup, the next question is what to test and when? It is not an easy question to answer. The answer was, most of the time, test things that would make you feel more secure about your code. Still, not easy...

And I can honestly say, that I build quite some React apps, without or with minimal tests. And that is fine also.

TypeScript

I really enjoy using Typescript (I have probably forgot about the initial learning problems) and nowadays I have problems not using it. But for this course I wanted to focus on the React part, and not let the student get caught on type problems.

But also, since a lot of code written today in React uses TypeScript, I didn't want to completely exclude it.

So, there was an optional part, where the student was able to learn about TypeScript. And I actually think a lot of them actually liked it and understood the pros (and to some degree the cons) of using it.

Summary

The parts that seemed hardest to get (except for getting the tests to run) was the idea of a function that can be run multiple times, but render the "same" components. The idea of a useEffect function and set state function that are not synchronous. Especially the dependency array for useEffect (and useCallback/useMemo) seem to be hard to get a good understanding of. I guess building stuff and making your errors eventually makes you understand =)

Build an React Native app. Part 2: Distribution

Andreas Bergqvist — Thu, 20 Feb 2020 09:14:17 +0000

At Itiden we build web applications and mobile apps.
For both we really enjoy using React & React Native.

This blog post is a informational post to my talk at React meetup in Gothenburg in two parts:

Build an React Native app. Part 1: Development
Build an React Native app. Part 2: Distribution (this)

We have open sourced an React Native app called "Guess the Repo" that uses the libraries we have decided on. It's a quiz app with questions about Github repos. Read more about the app on https://guesstherepo.itiden.se.

It's not in anyway a spectacular app. But it's quite easy to get up and running if you would like to see how an React Native app can be done.

Distribution

For distributing apps we have been using Visual Studio App Center from Microsoft. It was previously known as HockeyApp and has been a distribution service for quite some time.

But since it becoming App Center alot of more functionality has been built in and I'll try to briefly explain how we are using them.

Short desciption from https://appcenter.ms: "Continuously build, test, release, and monitor apps for every platform.".

Building

From within App Center we can create an React Native app for Android and one for iOS. We connect the apps to the repo from GitHub, ButBucket, GitLab or Azure Devops. Your can setup one build config per branch in your repo.

You need to update your app first by adding:

yarn add appcenter appcenter-analytics appcenter-crashes

There are also a few updates to you iOS and Android apps you need to do. But there are guides to follow in the App Center docs.

When done you can setup a bunch of build settings:

Node.js version
Xcode version (for iOS)
If you would like to export as Android App Bundle (.aab)
Build on every push or manually

Build number

You can setup if you would like to automatically increase the Build number.

Testing and linting

Run unit tests (runs yarn test)
Run linting (runs yarn lint).

Environment variables

You can setup Environment variables for this specific build. Really convenient if you are using keys or specific URL's that your app should use. You can also setup different URL's for different branches if you would like to build an app towards an development server as an example.
If you need to consume these variables, I would recommend to create an Build Script that reads them and creates an .env file. You would read these variables from the .env file with react-native-dotenv.

Example build script that outputs API_URL from Environment variables into an .env-file that you can put in your project root as appcenter-post-clone.sh:

#!/usr/bin/env bash -e

cd $APPCENTER_SOURCE_DIRECTORY

echo "API_URL=$API_URL" > .env
echo ".env file created!"
echo "API_URL=$API_URL"

Sign your build

If you want to run your app on a device you need to sign it.
For iOS you need to upload a provisioning profile and a certificate.
Both are created via Apple Developer portal an to create an certificate you need MacOS with Keychain.
For Android you will generate a keystore file that you need to upload.

Test on real device

You can, for free, test starting up your app on real device. App Center has a large amount of devices that can be used for device testing but this on is kinda only a small taste of that.

Distribute builds

Last you can select if you want to automatically distribute your build. More on distribution under.

Testing

App Center can also be used to test your apps on a large number of real devices.
From your build config you can add a "does app start" test on device.

To run additional tests on the devices you need to run a test framework. Available frameworks for running tests are currently Appium, Calabash, XCUITest (only iOS), Espresso (only Android) and Xamarin.UITest.

There have been discussions from App Center to add more available test frameworks. For React Native, Detox would be a really nice addition.

Distribute to App Center Groups

When your app builds it's time to start distribute it to testers. A great way to do this without needing to setup the app in the stores for iOS and Android is to use App Center Groups distribution.

For Android the .apk-file is distributed and a link will be sent to the users in your testing group.

For iOS, when users recieve the invite email, they will first share their device ID with App Center. Then the app will be re-provisioned to work with that device and the .ipa-file will be shared. This requires a development or ad hod distribution profile for the app.

From within App Center you can manage multiple groups and distribute different releases to different groups.

Distribute to stores

Distribute Android apps to Play Store

Distribute iOS apps to App Store and Test Flight

You can setup to automatically distribute your apps to both App Store (and Test Flight for iOS beta testing) and Play Store.

Notice that for both iOS and Android you need to first create your apps in App Store Connect and Play Console and upload your first app before you can do it from App Center.

Code Push

A really neat feature in App Center is Code Push. When you have built and released your app, you can "push" your JavaScript bundle to the app.

As long as your updates are "just" JavaScript updates (no updates with native modules) you can send those updates to all users. Each time a user opens your app it will check if the app has an Code Push update. If it has an update it will download. You can then decide if you would like you app to instantly update (by restarting) or if the app should update the next time the user starts your app.

This way you can "bypass" the app stores process of approving you app which can take some hours up to a day or two.

Notice, each Code Push will be "connected" to a specific version of your app. And all new app downloads will NOT contain your update. So you would problably also want to release a new app version with your fixes together with your code push.

Crash reports

When adding appcenter-crashes you will also make sure that all app crashes will be sent to App Center. You can see an overview of crashes and have App Center send you emails with information

Analytics

You will also get a basic analytics of your app. You'll see information about uses, devices, location and devices used. You can also add custom events from your app and follow how your users uses your app.

Analytics are saved for 90 days. If you would like to save if it longer you can export it to Azure Application Insight. This is a much more powerful tool but also costs by usage.

Build an React Native app. Part 1: Development

Andreas Bergqvist — Wed, 19 Feb 2020 19:00:43 +0000

At Itiden we build web applications and mobile apps.
For both we really enjoy using React & React Native.

This blog post is a informational post to my talk at React meetup in Gothenburg in two parts:

Build an React Native app. Part 1: Development (this)
Build an React Native app. Part 2: Distribution

It's not in anyway a spectacular app. But it's quite easy to get up and running if you would like to see how an React Native app can be done.

Development

This is a general overview of how we have decided to use React Native and what libraries we use. Generally we have settled with what we think is enjoyable, effective and what seems to be well maintained, documented and updated by the community.

React Native cli

While there are other alternatives then using the React Native cli to initialize you new project. We have currently decided to use it for our projects.

We are also using TypeScript and unlike a few years ago, it's really enjoyable to use with React Native apps.

Code to initialize your new app:

npx react-native init GuessTheRepo --template react-native-template-typescript

State management

For global state management we have decided on MobX. It's really efficient and makes your code really easy to read and to follow.

Add to your project with:

yarn add mobx
         mobx-react
         mobx-persist

Notice that we add both mobx and mobx-react but also mobx-persist. It's an really convenient library to use if you like to keep some of your state persisted between app restarts.

Example store:

import {observable, action} from 'mobx';
import {persist} from 'mobx-persist';

export default class QuizStore {
  @persist
  @observable
  score: number = 0;

  @action
  addScore() {
    this.score += 1;
  }
}

This creates a store with a score value that will be persisted. We also add an addScore action to add 1 to the score.

When you create the store, add the following code to make it use AsyncStorage as peristing storage:

import {create} from 'mobx-persist';

const quizStore = new QuizStore();
const hydrate = create({
  storage: AsyncStorage, 
  jsonify: true
});
hydrate('quizStore', quizStore);

Now, the score value will be kept even if the app is closed.
To use the score value or use the action method from an component, see the following code (notice that we created the store in an Context that we can get from a useQuizStore() function):

import {observer} from 'mobx-react';
import {useQuizStore} from '../context/AppContext';

const QuizScreen = () => {
  const quizStore = useQuizStore();
  return (
    <View>
      <Text>Score {quizStore.score}</Text>
      <Button onPress={() => quizStore.addScore()}>Button</Button>
    </View>
  );
};

export default observer(QuizScreen);

Don't forget to "wrap" your component in the observer function (HoC) to make sure the component re-renders when an value from the MobX store updates.

Styling

When it comes to styling we have decided on styled-components. It's enjoyable, efficient and creates really readable code. And it works really well for both React and React Native.

Add it to your project:

yarn add styled-components
         @types/styled-components

Notice that the TypeScript typings needs to be fetched from the @types repo.

When using styled-components with React Native you need to use the /native library.

Example on using it:

import styled from 'styled-components/native';

const Background = styled.TouchableOpacity`
  border-radius: 20px;
  background-color: #000000;
  padding: 10px 20px;
`;

const Label = styled.Text`
  font-size: 24px;
  color: #fff;
`;

interface ButtonProps {
  label: string;
  onPress: () => void;
}

export const Button = (props: ButtonProps) => (
  <Background
    onPress={props.onPress}       
  >
    <Label>{props.label}</Label>
  </Background>
);

Navigation

For navigation react-navigation has come a real long way since v1. Now at version 5 we have a completely new declarative way of declaring our navigation routes.

First, a bunch of libraries are needed:

yarn add @react-navigation/native
         @react-navigation/stack
         react-native-gesture-handler
         react-native-reanimated
         react-native-screens

All of these are not needed, but the @react-navigation/stack is commonly used navigation type. And react-native-gesture-handler and react-native-reanimated dependencies needed for performant animations and gestures. The react-native-screens make even more use of native views when the different routes are created making it even more performant.

Read more on getting started with React Navigation on their docs.

Example of setting up your routes:

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import HomeScreen from './screens/Home';
import QuizScreen from './screens/Quiz';

const Stack = createStackNavigator();

const Routes = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Quiz" component={QuizScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default Routes;

When creating components you can now do the following to link to other routes:

import {useNavigation} from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button label="Navigate!" onPress={() => navigation.navigate('Quiz')} />
    </View>
  );
};

export default observer(HomeScreen);

These are some of the "building blocks" used to create an React Native app.

Next up I'll show how you can distribute your app with App Center from Microsoft.
Build an React Native app. Part 2: Distribution

For some more inspration, check out William Candillon's "Can it be done in React Native?" youtube channel! https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA

Web development on Windows using WSL 2

Andreas Bergqvist — Mon, 02 Sep 2019 20:28:17 +0000

So, I've been testing the new WSL 2 (Windows Subsystem for Linux 2).
It's currently available when using Windows 10 Insider Preview Build.
This means that you needs to setup your Windows 10 system to install preview builds.
Install at own risk :-)

Information on how to install WSL 2 is found here:
https://pureinfotech.com/install-windows-subsystem-linux-2-windows-10/

This version of WSL could be considered more of an complete Linux environment. Like an Virtual Machine running on your Windows computer. But of course speedy, lightweight and more integrated with Windows. I'm not an expert on architecture but there are other articles you can find regarding this =)

I'm just looking for a smooth developer experience on Windows (yeah, I'm a web developer you prefers Windows... Strange...).

Linux

So, you basically have a bare Linux installation now (I installed Ubuntu 18.04).
So if you want to run Node, PHP or other application you need to install the appropriate packages. There are a number of guides how to do that.

You know:

sudo apt install this
sudo apt install that

The new Windows terminal

I'm also using the new Windows terminal. This one is found (also as a Preview) in the Windows Store.

During the time I've used it there have been some updates and I would generally say I like it. Great addition to the developer experience in Windows.

Here, I create a Next.js project:

Integration with VS Code

Install the "Remote - WSL" VS Code extension:
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

Now, from VS Code command palette (CTRL+Shift+P) run "Remote-WSL: New Window"

Now, when you select "Open folder" you can select from your WSL dist:

You can now access and edit the files directly and use the terminal:

And even if the Linux distibution has it's own IP address, you can reach it through localhost:

Lets test an Laravel project (PHP)

First, make sure you have PHP-FMP and Composer installed.

Run:

composer global require laravel/installer
laravel new blog
cd blog
php artisan serve --host=0.0.0.0

Notice the --host=0.0.0.0. This was the only way I got the localhost:8000 to work in the browser:

Whats missing?

Auto-starting services

The services you install (like PHP-FPM or MySQL) need to be started manually after every system restart. I read about third-party solutions that might fix it but I would rather have it integrated in WSL.

Custom hostnames

I like to name my different sites stuff like thesitename.local and access them that way. It's possible, but since the WSL system changes IP address after every restart, the hosts-file need to be manually updated.

Future and Docker

Docker for Windows has announced that it will support running via WSL. There is currently a Tech Previews that I haven't yet tested. But that seems really cool!

Summary

During the time I tested it most things seems to work just fine and with some more fixes I would say that web developing on Windows has a bright future used with WSL 2.

Static site with Next.js, Contentful & Netlify

Andreas Bergqvist — Wed, 03 Jul 2019 20:41:26 +0000

TL;DR

Code: https://github.com/itiden/itiden.se/tree/blog (blog branch)
Result: https://itiden.se (yeah, it's in Swedish, sorry...)

Edit 2020-02-17:
The webpage has been updated. It no longer use as much of Contentful as before. Check out the blog bransch for the code referenced in this blog posts.

Disclaimer

This is a guide to copy our open sourced website. You will be able to setup Contentful with some dummy content. But make sure you see it as a template for your site. To be able to edit the site knowledge about Next.js / React is required.

Feel free to ask any questions but the idea is to make it easy for you to test Contentful hosted on Netlify with a site developed in React.

The stack

So, at itiden we wanted a site where we would use Contentful as a "cloud CMS" and to host it on Netlify.

Since we have previous experience with Next.js (React) we decided to use it when building the page.

It's written in Typescript and we are using Tailwind as a "CSS framework" with Styled Components as the "CSS in JS" library.

The code is open sourced on Github (https://github.com/itiden/itiden.se) and you can feel free to clone it and use it as a template for your own website

Setup the project

Start by creating you own copy of the repo by clicking "Use this template" button on https://github.com/itiden/itiden.se

When you have your repo, clone it and copy the .env.example to .env and run yarn.

cp .env.example .env
yarn

Now you need to setup Contentful to be able to fetch some content.
Create a new account if you don't have one already. After that you will need to create a empty space.

Your should now be on a screen where you are asked to add your first content type.

When your at that screen, install Contentful CLI by running npm install -g contentful-cli.
Start by logging it to your account by running contentful login.
If successful you will receive a token that will be saved on your computer.

Now you need to import some content types and content. There is a contentful-export.json file in the repo.

Run:
contentful space import --space-id <your space id> --content-file contentful-export.json

You can find your space id in the URL on contentful:
https://app.contentful.com/spaces/space_id/home

Now reload the contentful page and click the "Use the Api" button.
On this page, copy the space id and Content Delivery API - access token to your .env file:

CONTENTFUL_SPACE=<space id>
CONTENTFUL_TOKEN=<access token>

You can now run yarn getcontent to fetch the content from Contenful and then yarn dev to start your development server.

Goto http://localhost:3000/!

Content models

Read about Content Models here:
https://www.contentful.com/r/knowledgebase/content-modelling-basics/

The following Contentful Content models have now been created in your space. The explanations are for how we are using them, but its up to you to use them like you want.

Menu
Currently there is only one Menu entry and that is the main top Menu.
The main menu contains Menu Item. Notice, the first menu item, named "Case" does not have an Menu Item. It is hard-coded in the front-end.

Menu Item
A menu item have a Label and a reference to a Page

Page
A page has a Title, Slug (used for generating the URL), Description, Header and Body. Header and Body are "Rich text" field where you can add Entries. Currently the only Entry that will be rendered in the front-end is the Employee content model. Notice: the first page / is hard coded to display Case content.

Employee
These contents can be added to the Body field of an Page.

Case
Case content is listed on the first page. They also receive the url /case/.

Category / Technology / Partner
These are all content that is added to a Case.

Building static files

The config for what pages that should be exported to static pages exists in the next.config.js file.

See:
https://github.com/itiden/itiden.se/blob/353817c013092470b4548603fa3114aa55e69093/next.config.js#L14

To create the static files, run yarn build.
All created files will be exported to an out folder.

Netlify hosting

Create a account on Netlify if needed. Then start a new site based on your github repo.

When asked, set "Build command" to yarn build and "Output directory" to out.

Go to Settings / Build & deploy / Environment.

Edit Environment and add the rows from your .env file.
CONTENTFUL_SPACE=
CONTENTFUL_TOKEN=

Go to Deploys and Trigger deploy.

You have now received an Netlify URL for your site. Something like https://strange_text.netlify.com/

Next step will probably be to setup Custom Domains and HTTPS

You now have a statically created serverless hosted React site!

Trigger Rebuilds from Contenful

In the top menu on Contenful, click Apps.
Install Netlify app and connect your account.
Then select the site you created.

When editing your content, your now have a "Build" button and an "Open preview" button to build your site on Netlify.

Google Analytics

To add Google Analytics, just add your tracking ID to your .env and/or your Environment variables on Netlify.

CONTENTFUL_SPACE=<space id>
CONTENTFUL_TOKEN=<access token>
GA=<tracking ID>

Building an React Native movies quiz app

Andreas Bergqvist — Tue, 25 Jun 2019 08:24:35 +0000

UPDATE 2019-06-27
The app is released! Check it out on https://ilovemoviez.com
Still, feel free to ask us anything regarding the development!

Today, at itiden (www.itiden.se) we are taking all (about 10) developers to together build app React Native app.

Hopefully we will be able to post it to the stores last thing today, but of course, the Apple process might take a while.

It's an online movies quiz app called I Love Moviez.

The back-end is being built with Node.js using Adonis.js.
For the React Native app we are using Typescript, React Navigation, Mobx and Styled Components. Deployed with Microsoft App Center.

Feel free to ask anything during the day!

We will also post updates to:
https://twitter.com/ilovemoviez

React Navigation with Typescript

Andreas Bergqvist — Tue, 14 May 2019 11:57:05 +0000

So.. You want to build an React Native app with Typescript and you have decided to use React Navigation as navigation library.

You have set all the Typescript stuff up and gets your app running!

You add React Navigation and all is fine!

But.. You add some screens that expects parameters and some that you want to edit the header and so on. There is not much information to find...

Here are some snippets how I have used React Navigation with Typescript.

Disclaimer

There are multiple ways of implementing typed React Navigation. These are only some examples and the naming of things should be considered to fit your application.

Any comments of other ways to solve it is appreciated!

First, classes vs functions...

I really enjoy using function components with hooks.
But currently there is an issue with hot reloading if using function components.
See: https://github.com/facebook/react-native/issues/10991

It just don't work. There might be solutions where you wrap you functional components around with classes, but hopefully this issue will soon be fixed!
https://mobile.twitter.com/dan_abramov/status/1125846420949434368

I will be using a useNavigation hook based of https://github.com/react-navigation/hooks.
But since the repo isn't very active, I just "stole" this function and modified abit:

import { useContext } from 'react';
import {
  NavigationScreenProp,
  NavigationRoute,
  NavigationContext,
} from 'react-navigation';

export function useNavigation<Params>() {
  return useContext(NavigationContext) as NavigationScreenProp<
    NavigationRoute,
    Params
  >;
}

So, my examples will be with both classes and functional components.

Update header title and navigate

Class component

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}

class TestScreen extends Component<Props> {
  public static navigationOptions = {
    title: 'Test Screen',
  };

  render() {
    const { navigation } = this.props;
    return (
      <View>
        <Text>Test Screen</Text>
        <Button
          title="Button"
          onPress={() => {
            navigation.navigate('anotherTestScreen');
          }}
        />
      </View>
    );
  }
}

export default TestScreen;

Notice, that only screens that is set up directly on a navigation has the navigation property. If you would like a sub-component to have access to navigation you can do like this:

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationInjectedProps, withNavigation } from 'react-navigation';

class TestComponent extends Component<NavigationInjectedProps> {
  render() {
    const { navigation } = this.props;
    return (
      <Button
        title="Button"
        onPress={() => {
          navigation.navigate('anotherTestScreen');
        }}
      />
    );
  }
}

export default withNavigation(TestComponent);

Function component

import React from 'react';
import { Button, Text, View } from 'react-native';
import { useNavigation } from '../hooks/useNavigation';

const AnotherTestScreen = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Text>Test Screen</Text>
      <Button
        title="Button"
        onPress={() => {
          navigation.navigate('paramScreen', { text: 'Hi!' });
        }}
      />
    </View>
  );
};

AnotherTestScreen.navigationOptions = {
  title: 'Another Test Screen',
};

export default AnotherTestScreen;

Typed params for the screens

Class component

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationScreenProp, NavigationState } from 'react-navigation';

interface NavigationParams {
  text: string;
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

interface Props {
  navigation: Navigation;
}

class ParamScreen extends Component<Props> {
  public static navigationOptions = ({
    navigation,
  }: {
    navigation: Navigation;
  }) => ({
    title: navigation.state.params ? navigation.state.params.text : '',
  });

  render() {
    const { navigation } = this.props;
    const {
      state: { params },
    } = navigation;
    return (
      <View>
        <Text>Param: {params ? params.text : ''}</Text>
        <Button
          title="Button"
          onPress={() => {
            navigation.navigate('anotherParamScreen', { text: 'Hello!' });
          }}
        />
      </View>
    );
  }
}

export default ParamScreen;

Why would you bother with that much extra typings code you might ask yourself? Why not just use any?
Well, this example might not be the best, but the params are now typed and you can get intellisense help in your editor:

Function component

import React from 'react';
import { Button, Text, View } from 'react-native';
import {
  NavigationScreenProp,
  NavigationState,
  StackActions,
  NavigationActions,
} from 'react-navigation';
import { useNavigation } from '../hooks/useNavigation';

interface NavigationParams {
  text: string;
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

const AnotherParamScreen = () => {
  const navigation = useNavigation<NavigationParams>();
  const {
    state: { params },
  } = navigation;
  return (
    <View>
      <Text>Param: {params ? params.text : ''}</Text>
      <Button
        title="Button"
        onPress={() => {
          const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'testScreen' })],
          });
          navigation.dispatch(resetAction);
        }}
      />
    </View>
  );
};

AnotherParamScreen.navigationOptions = ({
  navigation,
}: {
  navigation: Navigation;
}) => ({
  title: navigation.state.params ? navigation.state.params.text : '',
});

export default AnotherParamScreen;

npx, at you command

Andreas Bergqvist — Tue, 16 Apr 2019 05:42:15 +0000

Since version 5.2 of npm (released almost 2 years ago) you also received the command npx.

With npx you can run the binaries for your project dependencies (like npx webpack or npx jest).

But you can also run any command from any package available on npm!
Here are some of my favorites!

npx http-server

Starts a webserver in the current folder. Great if you want to test something really quick.

npx create-react-app my-app

Use create-react-app without the need to first install it globally. Just run npx.

npx shx touch file # Create a file
npx shx mkdir folder # Create a folder

The shx command lets you run shell commands, cross-platform! Great if you want to share command snippets that both Mac and Windows users might use.

npx sort-package-json

Sorts the keys in your package.json (if there is a package.json in the current directory).

npx speed-test

Test your internet connection

npx typescript index.ts --out index.js

If you want to check the result when TypeScript transforms a .ts file to a .js.
Notice, this is probably for more simple files and mostly if you want to investigate how it works, since you don't use an config file.

npx terser index.js > index.min.js

Minify a Javascript file.

npx ntl

Gives you an interactive list of available NPM scripts (if you are in a folder with an package.json).

npx puppeteer-cli print https://itiden.se page.pdf
npx puppeteer-cli screenshot https://itiden.se page.png

Create an PDF or screenshot from an URL. Notice that Chromium is downloaded when this command i run which makes it quite slow. But might come in handy if you quickly want an PDF or screenshot of an webpage!

And, if you'd like, you can set up your own "card" to display in the terminal. See:
https://dev.to/wuz/setting-up-a-npx-username-card-1pip

So...

npx andreasbergqvist

Feel free to comment on more commands that might come in handy!

TypeScript - get types from data using typeof

Andreas Bergqvist — Wed, 10 Apr 2019 07:49:54 +0000

A great way to make sure the values you set to your variables matches what you would expect is to set specific types to them.

If you already have the data in a object or array. The following ways are great to create your types!

Lets say you have the following data:

const data = {
  value: 123,
  text: 'text'
};

Then you can create a type bases on that using:

type Data = typeof data;
// type Data = {
//   value: number;
//   text: string;
// }

You can do the same with nested objects:

const data = {
  value: 123,
  text: 'text',
  subData: {
    value: false
  }
};
type Data = typeof data;
// type Data = {
//   value: number;
//   text: string;
//   subData: {
//     value: boolean;
//   };
// }

Since TypeScript 3.4 you can do the following if you have an array of strings (notice the as const):

const data = ['text 1', 'text 2'] as const;
type Data = typeof data[number];
// type Data = "text 1" | "text 2"

It's also possible to get types from arrays with objects:

const locales = [
  {
    locale: 'se',
    language: 'Swedish',
  },
  {
    locale: 'en',
    language: 'English',
  }
] as const;
type Locale = typeof locales[number]['locale'];
// type Locale = "se" | "en"

And it's also possible to get types from keys:

const currencySymbols = {
  GBP: '£',
  USD: '$',
  EUR: '€',
}
type CurrencySymbol = keyof typeof currencySymbols;
// type CurrencySymbol = "GBP" | "USD" | "EUR"

A notice about as const vs using <const>. They both work the same but the <const> will fail in a .tsx-file (React).

const data = ['text 1', 'text 2'] as const;
// is the same as
const data = <const>['text 1', 'text 2'];

React is awesome!

Andreas Bergqvist — Mon, 08 Apr 2019 21:56:37 +0000

Just wanna say that creating stuff with React is so much fun!
Hooks being an awesome addition!

Currently the following libraries/packages/language-supersets is making it even more fun!

TypeScript

Like 1-2 years ago, using TypeScript - especially with React (where more developers where using Flow), was like more trouble then what it was worth... Nowadays though, it makes a awesome developer experience and mst popular packages has typings available! Good job Microsoft!

https://github.com/Microsoft/TypeScript

Mobx

Since the day Mobx was released it's been my goto state handler. The main benefit for me is that it makes the code very readable and easy to understand.

Nowadays, since hooks was released, the mobx-react-lite library is a great addition!

https://github.com/mobxjs/mobx

Styled Components

I just love creating my styled components instead of using style-objects. Makes the render functions really nice and readable!

https://github.com/styled-components/styled-components

Formik

Forms in React has been troublesome... But no more!

https://github.com/jaredpalmer/formik

Prettier / eslint

I'm using prettier to format the code on save! Never do I need to think about how to format nor indent my code. Eslint is a great addition to warn me about other "bad code". Make sure they don't conflict with eachother with eslint-config-prettier

https://github.com/prettier/prettier
https://github.com/eslint/eslint

react-test-library

If I where about to test my React code, I would be doing it with react-test-library 😂

https://github.com/kentcdodds/react-testing-library

<end-of-react-love>

TypeScript - undefined vs null

Andreas Bergqvist — Mon, 08 Apr 2019 06:16:55 +0000

So the undefined vs null discussion might seem ancient in the JavaScript world. But for me, the question arises again the more I move over to TypeScript.

There seems to be 3 different "camps" when I try to read posts regarding this...

TL;DR

I will try to NOT use null and trying to only use undefined.

I read enough comments from people that has done this and seems happy with it to give it a try.

Pros:

"Easier" syntax let variable?:Type; vs let variable:Type = null or let variable?:Type = null;
Most other languages seems to have just one type for this!
Code does not need to handle both.

Cons

Longer to write
The difference between an actually undefined variable vs a variable set to null is lost.
JSON can only handle null and not undefined.

Camp 1 - use both

So, an alternative could absolutely be to use both. And this is how I have donw previously.
But, as mentioned in the TL;DR, most other languages seems to manage without both, and as a programmer, you might need to handle both undefined and null variables, which can make the code more complex.

The pros are, as mentioned, that there now is a difference between an actually undefined variable and one set to null.

const [value, setValue] = useState<number| null>(); 
let value?:number | null;
// value = number | null | undefined

Camp 2 - use `null`

null is a word more used in other languages AND is shorter to write!
Is also works nicely with JSON APIs.

The extra code needed is well worth to be able to differentiate.

const [value, setValue] = useState<number| null>(null); 
let value:number | null = null;
// value = number | null

Camp 3 - use `undefined`

There should be no need of two typed and undefined is the default one when not setting a value.

Array functions is JavaScript return undefined.

const [value, setValue] = useState<number>(); 
function (value?:number) {}
// value = number | undefined

DEV Community: Andreas Bergqvist

Web site checklist - for developers

Teaching React

The history

Functional components vs Class components

Global state

Styling

The directory structure

Testing

TypeScript

Summary

Build an React Native app. Part 2: Distribution

Distribution

Building

Build number

Testing and linting

Environment variables

Sign your build

Test on real device

Distribute builds

Testing

Distribute to App Center Groups

Distribute to stores

Code Push

Crash reports

Analytics

Build an React Native app. Part 1: Development

Development

React Native cli

State management

Styling

Navigation

Web development on Windows using WSL 2

Linux

The new Windows terminal

Integration with VS Code

Lets test an Laravel project (PHP)

Whats missing?

Auto-starting services

Custom hostnames

Future and Docker

Summary

Static site with Next.js, Contentful & Netlify

TL;DR

Disclaimer

The stack

Setup the project

Content models

Building static files

Netlify hosting

Trigger Rebuilds from Contenful

Google Analytics

Building an React Native movies quiz app

React Navigation with Typescript

Disclaimer

First, classes vs functions...

Update header title and navigate

Class component

Function component

Typed params for the screens

Class component

Function component

npx, at you command

TypeScript - get types from data using typeof

React is awesome!

TypeScript

Mobx

Styled Components

Formik

Prettier / eslint

react-test-library

TypeScript - undefined vs null

TL;DR

Camp 1 - use both

Camp 2 - use null

Camp 3 - use undefined

Camp 2 - use `null`

Camp 3 - use `undefined`