To get the latest Udemy coupon and news, subscribe our telegram channel
https://t.me/ckmobi
Subscribe Youtube:
Follow us:
https://twitter.com/ckmobilejavasc1
React native Expo for multiplatform mobile app development
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
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;}
The difference between rem and em
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-autocompleteAdd the adminlte
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" />Load the data from remote api
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 giftedchatFirst 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.
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:
1. Open stripe account
Create a web app to let user sign in, sign out and sign up with email and password.
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
In this article, we are going to create a navbar with the effect of fading out when the user scroll down more than 100px.
