DEV Community: Raji Oluwatobiloba

Get Started with React Native, Redux and TypeScript

Raji Oluwatobiloba — Tue, 28 Sep 2021 16:40:40 +0000

One of the popular state management tools out there is Redux.

Setting up a Typescript React Native Project with Redux can be tricky for beginners, in this article, I will teach you how you can easily get started.

I am assuming, you have a React Native Typescript Project setup, if you don't, you can run this command:

npx react-native init ProjectName --template react-native-template-typescript

Your project will automatically be bootstrapped with typescript template.

Installing dependencies

I like using yarn, but you can also use npm

yarn add redux react-redux redux-thunk

Afterwards, let's install redux type definitions

yarn add @types/react-redux -D

Create a new folder call "Store".
You can name the folder as you desire, but I prefer to use store.
Inside this folder, create three folders:

actions
reducers
types

and lastly, create an index.tsx file.

In your index.tsx file, paste the following code

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import appReducer from './reducers';


export default createStore(appReducer, applyMiddleware(thunk));

The next action is to define your Types.
In your types folder, create an index.tsx file and paste the following code

export const USER_TODO = 'USER_TODO';

Save and close.

Next stop is the actions folder, for this folder, I like to create an index.tsx file and other actions. So if you are creating a big application, you might have something like this

index.tsx users.tsx admin.tsx payment.tsx etc.

This makes your file structure cleaner and more understandable.

But for this simple application, we will be needing just two files:

index.tsx and todo.tsx

Inside your index.tsx file, paste the code below:

import todoAction from './todo';


export { todoAction };

Save and Close

In your todo.tsx file, you will define how your actions are to look like,

First import all your types

import { USER_TODO, } from '../types';

Then set up your actions

const setUserTodo = (payload: number) => ({
  type: USER_TODO,
  payload,
});

export default {
  setUserTodo,
};

Save and Close.

Lastly, create two files in your reducers folder

index.tsx and todo.tsx`

inside your todo.tsx file, paste the following code:

import { USER_TODO } from '../types';

const initialstate = {
    userTodo: [],
};

type Action = {
    type: string,
    payload?: any
}

export default (state: any = initialstate, action: Action) => {
    switch (action.type) {
        case USER_TODO:
            return Object.assign({}, state, {
                userTodo: action.payload,
            });
        default:
            return state;
    }
};

inside your index.tsx file, paste the following code:

import { combineReducers } from 'redux';
import todo from './todo';


const appReducer = combineReducers({
    todo,
});

export default appReducer;

export type State = ReturnType

And that's it! You have successfully set up your redux store, now let's head over to the UI part.

I will make use of JSON public placeholder API to generate list of todos

https://jsonplaceholder.typicode.com/todos/

You can use the useDispatch hooks from react-redux to easily dispatch data into your reducers

In your App.tsx, paste the following code:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { useDispatch } from 'react-redux';
import { todoAction } from '../store/actions';

interface AppProps {
  navigation: any;
  setTodo: any;
}

const Welcome: React.FC = ({ navigation: { navigate } }) => {
  const dispatch = useDispatch();

  React.useEffect(() => {
    loadTodos();
  }, []);

  const loadTrivia = () => {
     try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/todos/'
    );
    const json = await response.json();
     dispatch(todoAction.setUserTodo(json));
  } catch (error) {
    console.error(error);
  }
  };

  return (
    < View style={styles.container}>
      
    < /View>
  );
};

export default App;

And to get the list of these todo, use useSelector hooks from react-redux

import React from 'react';
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';

interface TodoProps {
  navigation: any;
}

const Todo = (props: TodoProps) => {
  const { userTodo } = useSelector((state: State) => state.todo);

const TodoList = ({data}) => {
      return (
            < View>
             < Text>{data.title} < /Text>
            < /View>
      )};

  return (
      < FlatList
        data={userTodo}
        renderItem={({ item }) => } />
  )};

export default Todo;

And that is it!

That is the simple way to easily add redux to your React Native Typescript project.

Let me know if you have any questions!

Making sense of React lifecycle methods

Raji Oluwatobiloba — Tue, 03 Mar 2020 15:33:44 +0000

What are React lifecycle methods?

I will try and give you a simple explanation to understand this perfectly. But before that, you need to know that React components do have three phases, they are:

MOUNTING
UPDATING
UNMOUNTING and
ERROR BOUNDARIES.

Lifecycle methods can be describe as the series of events that happen through these react's four phases.

But it is not necessary a React component goes through all these four phases. The component could get mounted and unmounted without going through the updating phase or come down to the Error boundary phase.

Let us now take a look at these phases one after the other and explain the component lifecycle method that are called in each phase.

MOUNTING

In the mounting stage, React has four methods that are called in this order:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Constructor

This is the first lifecycle method that is called before anything else, this is a good place to introduce and set your initial state.

You can see from the code snippet below how I initialized my state - learnLifecycle to true.

Wondering why you are seeing super(props) there? What does that mean again?

I don't even know myself!

Just kidding, super is what initiate the parent's constructor method and allows the component to inherit methods from its parent which is Component.

getDerivedStateFromProps

This is the second lifecycle that is being called after constructor, it takes in two argument which is props and state, this method either returns an object to update the state or it returns null.

This lifecycle method is called before the DOM renders, it allows a component to update its internal state in response to a change in props.

It is rarely used though and unless it is absolutely necessary, you shouldn't use it.

Question: "When should I then use it???"

Answer: When the change in state depends on changes in props in your component.

render
The two lifecycle methods we've seen are optional and can only be called when you define them, Render method on the other hand is required in a React component.
This is the method that show(renders) your JSX to the DOM.

componentDidMount
This is my favorite lifecycle method, because here is where magic happens!

componentDidMount is called after the component is rendered.

This is where you run statements that requires that the component is already placed in the DOM.
This is a good place to initiate API calls, add event listeners, change state, etc.

And that is it for mounting phase!

UPDATING

Updating stage in simple terms - when there is a change in a state or props of a react component, the component is updated. But in react, instead of "updated", it is called re-render!

In the updating stage, React has five methods that are called in this order:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

getDerivedStateFromProps
This has been discussed already, just note that this particular method can be called both in the mounting phase and the updating phase.

shouldComponentUpdate
The next method called after getDerivedStateFromProps is shouldComponentUpdate. It works just like the name reads, the default value for this method is True, you can return a false boolean if you don't want the component to be updated.

This lifecycle method is mainly use to enhance performances in our React Application.

render
Just like I explained before, render method should also be called in the updating phase.

getSnapshotBeforeUpdate and componentDidUpdate
getSnapshotBeforeUpdate lifecycle method is called right after the render method. It is called right before the DOM is updated.

You can either return a value or null with getSnapshotBeforeUpdate(), the value returned is passed on to componentDidUpdate().

This is also rarely use, a situation where you can use getSnapshotBeforeUpdate is when resizing the window during an async rendering (e.g. Your chat application that need to handle scroll position in a special way).

Let me give you an example from the official React documentation:

UNMOUNTING

componentWillUnmount is the only available lifecycle method for this phase, this is the method you call when the component is about to be removed from the DOM. This is where you perform cleanups such as clearing up timers, cancelling network requests, or cleaning up any subscriptions that you created in componentDidMount().

Take for example, you created an event listener in componentDidMount(), to clear it, you go like this:

ERROR BOUNDARIES

We have two lifecycles under this phase, they are:

1. static getDerivedStateFromError()
2. componentDidCatch()

static getDerivedStateFromError

static getDerivedStateFromError lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state. This lifecycle method is called during rendering, so do not perform any side-effect on this method.

componentDidCatch

Just like static getDerivedStateFromError, it is invoked after an error has been thrown by a descendant component, but this takes an extra argument which is info, to give us more information about the error.

error argument on logErrorToExternalAPI above would be the actual error message and info would be the stack trace.

And that is it, we have come to the end of this class! What a boring lecture...lol!

React lifecycle methods may not click at once, but you can keep referring to this lecture when you get confused or ask questions.

What you need to learn before you dive into React/React Native

Raji Oluwatobiloba — Sat, 29 Feb 2020 23:03:37 +0000

Are you just starting to learn Javascript and you are already overwhelmed by those "big words" in the industry? Or you've even learned how to code in Javascript and you want to be sure if you are ready to start learning a library or a framework, then this article is for you!

What is React? What is React Native?

React is a Javacript library for building user interface, it was developed by Facebook. React lets you compose complex User Interface from small and isolated pieces of code called “components”.

React Native is an open-sourced mobile framework, it was also created by Facebook. "RN" as I love to call it, is used to develop applications for Android, iOS and Web. RN enables you to use Javascript(React) with native platform capabilities.

Enough of introduction! Let's get into the real business. As these two technologies sound attractive and it feels like you should jump into it and start learning, there are some foundations you need to make for yourself before you learn React or React Native. I am not saying without these "foundations", you won't grab React when you start learning, but in my experience, people that do this tend to struggle at it and at the end of the day, they might come back to solidify their foundation.

Let me give you a list of these key things you need to learn before explaining how to go about learning it, approximated time to spend on each and resources you can make use of.

1. HTML/CSS
2. Javascript
3. Basics of ES2015(ES6+)
4. React
5. React Native.

Sounds easy right? Yeah it is! At the same time, it is not!

Don't let that scare you, in this article, I will break down why, how, when and where you can learn these aforementioned technologies.

HTML/CSS

If you are going into web development, this two are the first technologies you will be advised to learn, and I can't stress it enough that it is important you learn them.
I will be giving you my personal steps to learn(I used this method and I have seen many people use it too).

Learn the basics of HTML and CSS from W3schools , this website is really great to get you started.
Sign up on Freecodecamp , Freecodecamp is an interactive learning web platform where there is a curriculum to follow, you practice as you learn a feature. Check it out! It is free and a very good resource to solidify your knowledge.
If you prefer to learn with videos, there are tons of youtube channels you can learn from. I recommend Traversy Media
Start building 'stuffs'. The only way to get better at coding is to experiment with the things you learn, don't just learn and feel you know it, BUILD SOMETHING!!, Real world project! I know you are already wondering why I am screaming at you, but you can't just skip that step. Luckily, Freecodecamp has a lot of projects for you to test your skills.

I feel one month or less is okay for you to get a good grasp of HTML and CSS(I am not saying you will become a Pro in one month), but you will have a solid knowledge of how these two technologies work and what you can do with them.

JAVASCRIPT

It is very important you have a good grasp of Javacript before you think of learning React. Why? React is Javascript, when you start learning React, many tutorials you will find online will assume you have the knowledge of Javascript, do not let anybody deceive you that you can know React without learning Javascript, there is no shortcut to it. Even if you manage to do that in some way, you will still always come back to learn how some things work in vanilla Javascript.
Hey Tobi, what is vanilla Javascript again??? Chill, it's just another name for Javascript, it is pure Javascript, the vanilla is just a general term to stress it, as in your normal vanilla ice-cream, without flavors.

Back to business!

Resources to learn Javascript

There are many resources online to learn Javascript that you might get lost on which to use. Yeah! I was once in your shoes!
But just like the steps I wrote for HTML/CSS. You can follow that to also learn Javascript.

Start with W3schools to get both the basics and advance knowledge of Javascript.
Hands down to Freecodecamp when it comes to Javascript, they have over 300 interactive lessons on Javascript and more than 10 Projects to build after learning.
For videos, I will also recommend Traversy Media .

I don't think I need to remind you that the key to understanding Javascript is to build real-world applications. Shoutout to Well Paid Geek for his constant reminder on this!
It is very important aspect of programming, you can't get better till you start doing it yourself, video tutorials might show you how to do it, but doing it yourself will build your brain muscles.

I can't really tell you a timeline to learn Javascript because you can't stop learning it! But I would say 4-6 months is a reasonable time to go through aforementioned resources.

So Tobi, is this the right time to learn React?

No chill bro, aren't you missing something? ES2015+!!!

What is ES2015+ or ES6+?
LevelUp Tuts does justice to this question in this short video.

But in summary, ES6 and above are modern version of Javascript, there are different changes such as arrow functions, the rest/spread operator, import/export statements, variable destructuring, etc. and it is essential you know them as they are used by frameworks and libraries(React in our case).

Resources to learn ES6
These days, modern website, tutorials and books teach ES6 with Javascript, as it is Javascript itself, but if you find yourself in a situation where you feel you didn't learn enough of it in any resources you used, you can check out this Mozilla tutorial or this introductory course by Academind , Traversy Media also has tons of tutorials on ES6.

I said earlier that 4-6 months should be enough to go through these resources, but it doesn't mean you will be a Pro in this period of time, nobody does unless they've been doing it for years!

"So Tobi when is the right time to dive into React?"

"The question should be how many projects have I built with Javascript?"

If your answer is not between the range of 10-infinity, then you should get to work.

Because everybody is learning React doesn't mean you have to jump into it too. Solidify your Javascript foundation, master your craft very well! It is very important! Do not rush yourself.

Spend good amount of time, practice, practice and practice.

Even if you have exhausted all the resources I have given above, try learning more in-depth Javascript.

I will recommend this Book series by Kyle Simpson and also Eloquent Javascript .

These two books are books I still reference till date.

Fast forward to a year later!!!
You can now start learning React. smiles

Some people might argue that a year is too much to learn the prerequisites to React, but it doesn't matter, so far you are confident in yourself that your Javascript knowledge is solid enough, you can start learning React.

So the big question comes in. How do I start learning React
Even though it is out of the scope of this article, but I will give brief intro to it and maybe in my next article, we will discuss this further.

Maybe you have read nice things about React Native(like me when I started) and you would rather become a full React Native developer that being a Web developer/React developer.

You might start asking, Should I learn React before React Native?

Yes! Yes!! and Yes!!!

Some people may still disagree with me on this, but the truth of the matter is React Native is still React, the only difference is that you are building for mobile for one and one is for the web.

"Okay, Tobi, I am confused here, if React Native is React, why shouldn't I just go ahead and learn React Native and start building apps instead of wasting my time on React?"

Well, the reason is that you will hardly find React Native tutorials, courses or videos that will teach you React, most will assume you have the knowledge of React. Even the official documentation of React Native does not teach you React. You should know the underlying principles before jumping into React Native.

So where should you start from?

I would say the Official documentation of React is the best place to start.

Like I said before, learning React is out of the scope of this article.
The goal of this article is to tell you the important things to learn before diving into React.

If you have any questions or contributions, let me know in the comment section.

Happy Hacking!!!