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…


Call a jQuery autocomplete from ReactJS component

In this article, we are going to demonstrate how to execute a external JavaScript function from react component.

You may ask when we need to call? Why don’t we just put the function inside the React component?

Well, normally we should put the function inside the component and execute it. However, sometime we may use the traditional framework to help styling the website, such as Bootstrap or other Bootstrap like framework.

At these cases, we usually need to execute the function that placed at the index.html file. Later we will demonstrate how to execute a jquery function to do autocomplete.


Add logic to the components to create pagination

In this project, we base on the previous example to create pagination wrapper, which the buttons inside the page will be justified correctly base on the page and the number of buttons.

For example, if this is the first page, it have only one button, the button should be pushed to the right side of the page.

If this is the page in between, there will be two buttons, they should be pushed to the side of the page.


Using compound components to create a list of cards

In this article, we are planning to create a compound component that contains a container, image, title, body, text, and button.

Source code and teaching videos:

In the programming view, we just need to import the Card, we already can call the image component by Card.Image etc. It is much easier to manage.

import React from 'react'import Card from './components/card'function App() {return (<div className="App"><Card><Card.Imagesrc={'https://images.all-free-download.com/images/graphiclarge/girl_205263.jpg'}/><Card.Body><Card.Title>Ckmobile</Card.Title><Card.Text>admin@ckmobile.com</Card.Text><Card.Button>Details</Card.Button></Card.Body></Card></div>);}export default App;

Create a components folder, under this folder, create a card folder, then inside the card folder…


Creating simple elements to learn how to use styled-components

In this article, we are going to use styled-components to style the components. We will learn it by creating simple elements, adding primary state to change color like Bootstrap, extending the style from Material UI and also change the theme by using ThemeProvider.

styled components

Source code and teaching videos:

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

After we created the project, we need to install the styled components.

npm install --save styled-components

Inside App.js we create header, button and section by typing as follow:

import styled from 'styled-components';const MyHeader =styled.h1`font-family:cursive;color:red;`const MySection = styled.section`padding:0.5rem;border:1rem solid purple;`const MyButton = styled.button`font-family:cursive;


Responsive website with font size rem and em, width and height with vw and vh

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.

https://t.me/ckmobi

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


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.

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.

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