To get the latest Udemy coupon and news, subscribe our telegram channel

https://t.me/ckmobi

https://twitter.com/ckmobilejavasc1

React native Expo for multiplatform mobile app development

Free

Best Price

Complete NodeJS course with express, socket…


Responsive website with rem,em, vh and vw

In this article, we are going to talk about the difference between the “em” and “rem” in CSS, the “vw” and “vh” which is useful in responsive design. We will also demonstrate how to fix the white space around top and left of the page.

To get the latest Udemy coupon and news, subscribe our telegram channel

https://t.me/ckmobi

Free YouTube tutorials:

We just have a simple web site with a index.html and mystyle.css

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./mystyle.css"></head><body><div class="container"><p>CKmobile</p></div</body></html>

mystyle.css

.container{text-align: center;}

rem is relative to the html fontsize

em…


Create the input field with the suggestions list

In this article, we are going to create an web that include an input field with autocomplete function.

The web will fetch the data from the server, there will be suggestions appear underneath the input field when the user is typing.

Source code:

So, let’s get started. First we need to create a brand new project by using the command.

npx create-react-app react-autocomplete

We will use the adminlte to help our styling , so go to the index.html and add the cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/css/adminlte.min.css" integrity="sha512-mxrUXSjrxl8vm5GwafxcqTrEwO1/oBNU25l20GODsysHReZo4uhVISzAKzaABH6/tTfAxZrY2FprmeAP5UZY8A==" crossorigin="anonymous" />

We need to load the data from remote api. We get…


Build the iOS and Android chat app with Firebase and React Native Gifted Chat

In this article, we are going to create a chat app in a simple way. We do not need to use many crazy stuff to create this chat page. It can display the time, the avatar, the messages.

This app also include the signin , signout and register function. We just need to use firebase and react native gifted chat.

Source code:

Now, we are going to create project by going to the terminal and type

expo init giftedchat

First we need to install a few packages, the react native navigation, the stack navigator and the gifted chat.

npm…


Create a todo app to learn how to integrate redux

In another article, we already made a simple explanation of Redux. In this article, we are going to create a todo app with the redux base on this project.

We will also copy some code from another project, to add the input box and style.

Source Code:

First, we create a store folder. And inside the store folder, create store.js, taskAction.js, taskReducer.js and taskTypes.js


A simple explanation on view, action, store, state and reducer

In this article, we are going to make a simple explanation on redux, which cover the view, action, state and reducer. After that, we will create an app to demonstrate this.

Data flow

A simplified explanation is the view contain button to dispatch the action.

The reducer inside the store decide how to update the state (the source of truth) base on the action and current state.

UI re-render base on the latest state.

View → Action


One app that combine stack, drawer and tab navigation

In this article, we will demonstrate how to setup the navigation inside react native. We will walk through all the process from creating different screens, install the necessary package for creating stack navigator, drawer navigator and tab navigator.

Related Courses:

Creating the screens for the project

First, create a folder called “screens”. Under the “screens” folder, we crate About.js, Home.js and Task.js.


Photo by Christiann Koepke on Unsplash

Adding subscription plan to your Firebase project

In this article, we are going to demonstrate how to use Stripe extension inside a Firebase project. We will create a simplified Netflix clone which list out the plans, the user can subscribe the plans and at the same time, these data are in sync. What it means is the customer data of Stripe is the same as the authentication data in Firebase. The products added in Stripe will also be recorded inside Firebase firestore.

Let’s begin!

Source code:

https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536

1. Open stripe account


Create a web app to let user sign in, sign out and sign up with email and password.

Photo by Katka Pavlickova on Unsplash

In this article, we are going to demonstrate how to implement the firebase email authentication in a React app.

Related Course:

First, inside the App.js, we add the state “user” and the update function “setUser” by using the useState hook.

import { useState } from 'react';import Home from './components/Home';import './App.css';function App() {const [user, setUser] = useState(null)return (<div className="App"><Home/></div>);}export default App;

Create Home and SignIn component under the components folder.


Using useState and useEffect to make the Navbar fade out

Photo by KOBU Agency on Unsplash

In this article, we are going to create a navbar with the effect of fading out when the user scroll down more than 100px.

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store