React Native – Hello World

I hope you have read the post about React Native – Introduction

Now, we will learn how to create a sample React Native application.

Prerequisites

In order to start with React Native, you should have the following experience.

  • Javascript
  • HTML/CSS

Tools

  • Node.js 6.x or later
  • Code Editor

After installing Node.js you need to install create-react-native-app. To install this execute a command in terminal.

npm install -g create-react-native-app

Now you can use create-react-native-app to create a new applications.

 


$ npm i -g create-react-native-app
$ create-react-native-app hello-world
$ cd hello-world
$ npm start

Now change your App.js with the following:


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You can run a react-native project by the following command.

– yarn android
– yarn ios # you need to use macOS to build the iOS project – use the Expo app if you need to do iOS development without a Mac
– yarn web

We will run the yarn web command and check this example. So that we don’t need any device to run,

yarn web will install expo-cli.

You will see the following output in the browser.

React Native – Introduction

React Native is an open-source mobile application framework created by Facebook, Inc. 3] It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React along with native platform capabilities.

Create native apps for Android and iOS using React

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

Written in JavaScript—rendered with native code

React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do.

Many platforms, one React. Create platform-specific versions of components so a single codebase can share code across platforms. With React Native, one team can maintain two platforms and share a common technology—React.

Native Development For Everyone

React Native lets you create truly native apps and doesn’t compromise your users’ experiences. It provides a core set of platform agnostic native components like ViewText, and Image that map directly to the platform’s native UI building blocks.

Seamless Cross-Platform

React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.

Fast Refresh

See your changes as soon as you save. With the power of JavaScript, React Native lets you iterate at lightning speed. No more waiting for native builds to finish. Save, see, repeat.

Source:

https://en.wikipedia.org/wiki/React_Native

https://reactnative.dev/

Angular Sample Application – Part 3 – The End

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a sample application in Angular. That will be a good starter in your Angular learning. 🙂

I hope you have read the Part – 1 of this tutorial, if not then do not worry, read it here Angular Sample Application – Part 1

I hope you have read the Part – 2 of this tutorial, if not then do not worry, read it here Angular Sample Application – Part 2

So, let’s start.

Routing is a very important part of Angular. Routing will create a fancy url and you can attach the component to that URL.

To add routing execute following command in terminal.

ng generate module approuting flat module=app

--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

Now we will make a change in this file.

We will create route for HomeComponent.

Create one route variable of type Routes.

const routes: Routes = [
  { path: ”, component: HomeComponent, pathMatch: ‘full’ },
];

Also Please change the following code of NgModule.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

You need to include HomeComponent, So please add the following line at the top.

import { HomeComponent } from ‘./components/home/home.component’;

Now your file will look like this:


We have completed the routing declaration part.

We need to add router-outlet to load dynamically components in an Application.

app-component.html is the main component of the application. We will add router-outlet in app-component.html.

So please add following line in app-component.html

<router-outlet></router-outlet>

We will add header and footer components in app-component.html to load the header and footer in all components.

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Now open http://localhost:4000 in the browser.
You will see the following output.

Cheers! You have successfully learn How to create an Angular Sample Application. 🙂


You can also download this demo from Github: https://github.com/jaydippanchal776/angular-sample-project

Angular Sample Application – Part 2

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a component in Angular. That will be a good starter in your Angular learning. 🙂

I hope you have read the Part – 1 of this tutorial, if not then do not worry, read it here Angular Sample Application – Part 1

So, let’s start.

To create a component in Angular you need to use the following command.

ng generate component component-name-with-path

You can also use the following short command.

ng g c  component-name-with-path

We will create the following three components and learn

  1. header
  2. home
  3. footer

So execute the following three commands.

  1. For header: ng g c components/header
  2. For home: ng g c components/home
  3. For footer: ng g c components/footer

This command will create a component in the components folder.

Now, we will learn how to do routing in Angular.

Click here to read – Angular Sample Application – Part 3

Angular Sample Application – Part 1

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a sample application in Angular. That will be a starter in your Angular learning. 🙂

So, let’s start.

To run Angular application, you need the latest or any stable version of Node.js in your development machine. Also, you need a npm package manager.

What is Node.js?

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

What is npm?

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js

So if you don’t have installed Node.js you can get it from here: https://nodejs.org/

Now, you have Node.js. Next thing you need to install Angular CLI, that will help you to create an Angular project, libraries and also will help you to build and deploy your projects.

You need to install Angular CLI globally. To do this open your console or terminal and write the following command.

npm install -g @angular/cli

Where,

npm: stands for the npm package manager

install: which is action to do by npm

-g: action will take globally

@angular/cli: is a package name

Now we will create a new application using Angular CLI.

Open the console or terminal and write one command.

ng new sampleapp

It will create a new folder sampleapp and it will contain your sample application.

Now, type cd sampleapp. It will open sampleapp folder.

To run the Angular application you need to run the following command.

ng serve

The angular application will run on the browser with http://localhost:4000

Now, let’s learn how to create a component in the Angular.

Click here to read – Angular Sample Application – Part 2.

 

Angular: Introduction

Hello Geek, Today i am writing a post about one of the best JS framework. “Angular”

So, let’s start with some basic information about Angular.

What is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

Angular is a complete rewrite from the same team that built AngularJS.

Developed by: Google
Platform: Web platform
Written in: TypeScript
Initial release: 2.0 / 14 September 2016

What is TypeScript?

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

TypeScript is designed for development of large applications and transcompiles to JavaScript.

Typing discipline: Duck, gradual, structural
Filename extensions: ts,.tsx
First appeared: 1 October 2012;
Designed by: Microsoft Corporation

There are other JS framework also available like React, Vue.js. I will also post articles on those languages too.

So, let’s start with creating Sample Application in Angular.

 

Source: Wikipedia

PHP for beginners – Chapter 5

Welcome Back, Now we are going to learn Chapter 5 from PHP for beginners.

In this chapter, we will start coding in PHP. 🙂

We will start from “Hello world” example.

Open any editor. To choose editor – check our post for it. PHP for beginners – Chapter 2

Create a new file test.php

Write following code :

<?php

echo “Hello world!”;

?>

Save this file.

To run this file. first you have to start apache server. I hope you have read our article on this. PHP for beginners – Chapter 3

Start apache server. Place this file into htdocs folder. after starting your apache server.

Open your browser and type http://localhost/test.php

you will see output “Hello world”.

Now, we will see some more example for loops. Suppose we want to print 1 to 10 numbers.

<?php

for($i = 1; $i<=10;$i++) {

echo $i.”<br />”;

}

?>

This output will be :

1

2

3

4

5

6

7

8

9

10

You can learn more about php operators, loops, functions, strings and all from w3schools.com 

I hope this article will help you to start coding in php.

PHP for beginners – Chapter 4

Today we will learn how to write a code in php.

To write a code in php there is predefined syntax.

Whenever you want to start to write code you have to type <?php

then you can write your business logic.

After this to end your php code you have to type ?>

So simple, write your code within

<?php

/*  Your code here */

?>

In next chapter we will learn how to use looping conditions, how to do comments and other things.

 

Bootstrap CSS – Grid System

Bootstrap is divided into 12 columns. It includes predefined classes for simple layout. Also you can design complex layout with easy predefined classes.

Class hierarchy is given as per follow :

  • .container or .container-fluid : This is a main class. .container-fluid is used for full width
    • .row – This class is used to make horizontal group of columns. After this class children must be .col-*
      • .col-* – This is used to display content.

 

Bootstrap has inbuilt classed to display page responsive.

Classes bifurcation is as per below.

  • For Large device : col-lg-*
  • For Medium device : col-md-*
  • For Small device : col-sm-*
  • For Extra small device : col-xs-*

Now, we learn how to display columns.

    1. To display content in full page.
    2. To display content in equal two column.
    3.  To display content in equal three column.

You can replace -md with -lg,-sm-xs according to device support.

Group Contact

Today, i am going to write first post for mySql. mySql has many functions to make programmer’s life easy.

When i was doing my project, i have to display some data by grouping with one field.

Example :

Suppose you have Student table with skill.

srno student skill
1 Jaydip PHP
2 Sanjay PHP
3 Jaydip Android
4 Pratik PHP
5 Sanjay CI
6 Pratik Magento

 

Now you want to display like student with all skills in one row.

srno student allskill
1 Jaydip PHP,Android
2 Sanjay PHP,CI
3 Pratik PHP,Magento

 

To get result like this, GROUP_CONTACT is there in mySql.

GROUP_CONTACT Query :

SELECT srno,student,GROUP_CONTACT(skill) AS allskill FROM student_skill GROUP BY user;