These certificates integrate with numerous GCP services, undergo automatic renewal to prevent outages, and prove highly beneficial. Configuring SSL/TLS encryption is straightforward and offers easy accessibility, even for users without a background in security.

Basically, Googlemanaged SSL certificates on GCP to simplify and improve website security while simplifying the certificate management process to ensure a good and reliable experience.

1. You should be owning own your domain in order to point the load balancer to your hosting name.
2. Reserve an External IP address in VPC 
3. Go to VPC Services and click on “IP Address”.

2. Now click on Reserve External IP address 

3. Type a name for this IP and provide a little description.
4. Select Global in TYPE secation and click on reserve. 

Now, assign this IP to your subdomain by creating an A record in your DNS zone. Use your desired domain name and point the Reserved External IP to this domain.

4. Go to the GKE cluster and connect through the cloud shell by typing the gcloud cli command for authenticating into your GKE cluster.

gcloud container clusters get-credentials <your-cluster-name> –region <your-cluster-region> –project <your-project-name>

5. Now create a managed certificate yaml manifest file in order to create  a SSL certificate using any text editor.

apiVersion: networking.gke.io/v1

kind: ManagedCertificate

metadata:

  name: managed-cert

spec:

  domains:

    – <your-hosting-domain>

Save this file as managed-cert.yaml

6. Now execute this yaml file by using “kubectl” command:

Kubectl apply -f managed-cert.yaml

Now wait for some time to get this certificate provisioned and the status to turn to Active.

7. To check whether the certificate is active or not, type the following command:

kubectl get managedcertificate <your-cert-name> -n <your-namespace>

8. Now create an ingress file and name it “managed-cert-ingress.yaml” and its content and structure should be like this:

apiVersion: networking.k8s.io/v1

kind: Ingress

metadata:

  name: joyscore-ingress

  namespace: joyscore

  annotations:

    networking.gke.io/managed-certificates: “<your-cert-name>”

    kubernetes.io/ingress.global-static-ip-name: “<your-reserved-static-external-ip-name>”

spec:

  rules:

    – host: stgapi.joyscore.dev

      http:

        paths:

          – path: /

            pathType: Prefix

            backend:

              service:

                name: exp-gateway

                port:

                  number: 8080

9. Now execute it using “kubectl” command:

Kubectl apply -f managed-cert-ingress.yaml

10. Now check the description of the services through the following command:

1. For check the managed certificate 

kubectl describe managedcertificate -n <your-namespace>

2. For checking the ingress controller service

kubectl describe ingress <ingress-name> -n joyscore

3. For checking the ingress 

kubectl get ingress -n <your-namespace> 

Now if you go to the browser and hit the URL that you have hosted to point this ingress, it will display the page with valid https ssl certificate.

So, in this blog, we have learned how to use Google-Managed SSL Certificate for the GKE Ingress Controller.

Hello there! In this blog, we’ll be demonstrating how to make your local MQTT Broker communicate with a pod in your Google Kubernetes Engine (GKE) cluster. We’ll achieve this by sending messages with a simple Python script and safely storing the payloads in a Redis cloud database. This blog will be your constant companion, providing step-by-step instructions, useful commands, and links to make the entire setup process a joy.

MQTT Protocol

MQTT, which stands for Message Queuing Telemetry Transport, is a lightweight messaging protocol designed for efficient communication between devices in the IoT (Internet of Things) and other resource-constrained environments. It follows a publish-subscribe messaging pattern, allowing devices to send and receive messages in a distributed system.

The MQTT protocol is based on the client-server architecture, where clients connect to a central broker. The broker acts as an intermediary, responsible for receiving and distributing messages between clients. Clients can be both publishers and subscribers, meaning they can send messages (publish) and receive messages (subscribe) on specific topics.

MQTT Broker

An MQTT broker is a software application that facilitates communication between devices or applications using the MQTT protocol. It acts as a central hub, receiving messages published by devices and distributing them to the intended recipients based on their subscriptions. MQTT brokers enable efficient and reliable messaging in constrained environments, such as IoT systems, by managing message flow, authentication, access control, and quality of service levels. They play a crucial role in building responsive and real-time systems by enabling scalable and asynchronous communication.

Setting Up a HiveMQ MQTT Broker

To set up the HiveMQ MQTT broker, you can follow these general steps:

1. Obtain HiveMQ: Visit the HiveMQ website (https://www.hivemq.com/developers/community/)and download the HiveMQ MQTT broker. Ensure that you choose the appropriate version for your operating system.

2. Installation: Click on the GitHub repository link once the site is loaded on your browser. It will redirect to the Hivemq-community-edition repository.

3. Download the Community Binary Package: Scroll down to in the Readme.doc to the HiveMQ Community Forum section and click on the HiveMQ binary package link and your download will start.

4. Start the script: Navigate to the bin folder in the binary package folder of the hivemq-ce-(version) and run the script based on you’re the operating system on which you are running the HiveMQ. Run.sh for Linux machines and Run.bat for windows machines.

5. Enable Security (Optional): If you require secure communication, HiveMQ supports various security options such as TLS/SSL. Enable and configure security settings in the configuration file, including certificates, encryption, and authentication.

6. Adjust Broker Settings: Review and modify other HiveMQ broker-specific settings in the configuration file, such as message persistence, maximum connections, maximum message size, and QoS levels.

7. Start the HiveMQ Broker: Save the configuration file and start the HiveMQ broker. The specific method to start the broker depends on your operating system and the method of installation you used.

1. Test Connectivity: Use an MQTT client or tool to connect to the HiveMQ broker and publish/subscribe to test the connectivity. You can use GUI-based MQTT clients like MQTT Explorer. You can download and install it from https://mqttx.app/

2. Monitor and Troubleshoot: HiveMQ provides various monitoring and diagnostic features to monitor the broker’s health and troubleshoot issues. Familiarize yourself with the available tools and resources provided by HiveMQ for monitoring and troubleshooting.

NGROK (for making the MQTT Broker publicly accessible)

NGROK is a cross-platform tunneling software that allows you to expose your local server to the internet by creating secure tunnels. It is commonly used during web development and testing to share your locally hosted applications with others or to integrate webhooks with services that require a publicly accessible URL.

To install NGROK, follow these steps:

1. Visit the NGROK website: Go to the official NGROK website at https://ngrok.com/You will find the latest version of NGROK available for download.

2. Sign up for an account (optional): Creating an account is optional but recommended, as it   allows you to access additional features like custom subdomains, more concurrent connections, and usage statistics. You can sign up for a free account on the NGROK website.

3. Download NGROK: After signing up or logging in, download the appropriate version of NGROK for your operating system (Windows, macOS, or Linux) from the downloads page.

4. Extract the downloaded file: Once the download is complete, extract the contents of the NGROK zip file to a directory of your choice.

5. Configure authtoken (optional): If you signed up for an account, you can configure your authtoken by running the following command in your terminal or command prompt:

ngrok authtoken YOUR_AUTH_TOKEN

Replace YOUR_AUTH_TOKEN with the token provided to you after signing up. This step enables additional NGROK features for your account.

6. Run NGROK: Open your terminal or command prompt, navigate to the directory where you extracted the NGROK files, and execute the appropriate command for your operating system:

Windows: ngrok.exe

macOS/Linux

./ngrok

This will start NGROK and display the available options.

7. Create a tunnel: To create a tunnel, use the following command:

ngrok tcp<PORT_NUMBER>

Replace PORT_NUMBER with the port number on which your local server is running. Here in our case hivemq is running on port 1883. NGROK will generate a public URL that you can use to access your local server from the internet.

Ngrok tcp 1883

8. This will provide us with a ngrok url which makes this mqtt broker accessible over the internet.

9. Now this url can be used as a Broker address for the communication setup.

Redis

Redis is an open-source, in-memory data storage system that can be used as a database, cache, or message broker. It keeps data in memory for fast access and low latency. It supports different data structures and offers commands for data manipulation. Redis can persist data to disk for durability and has replication and clustering capabilities for scalability. It is commonly used as a cache and has features like publish/subscribe messaging. Redis is versatile, fast, and widely used in web applications, caching, analytics, and more.

Redis Cloud database setup

To create a Redis cloud database directly from the Redis website, you can follow these steps:

1. Visit the Redis website: Go to the official Redis cloud signin/signup website at https://app.redislabs.com/#/

2.Sign up or log in: If you don’t have an account on Redis Cloud, you will need to sign up by providing the necessary details. If you already have an account, log in using your credentials.

3.Select a plan: Redis Cloud offers different plans based on your requirements, including free and paid options. Choose a plan that suits your needs in terms of memory capacity, data persistence, replication, and other features. Review the pricing details associated with each plan.

4.Configure the database: Provide the required information to configure your Redis Cloud database. This may include choosing the cloud provider (e.g., AWS, GCP, Azure), selecting the region or data center location, specifying the desired memory size, and setting up any additional options or advanced configurations.

5.Set up security: Configure the security settings for your Redis Cloud database. This typically involves setting a strong password or access key and enabling encryption if desired. You may also have options to define network access restrictions or firewall rules.

6.Review and confirm: Double-check all the configuration details and settings you have chosen. Ensure that everything is accurate and meets your requirements. Once you are satisfied, confirm the creation of the Redis Cloud database.

7.Wait for provisioning: The Redis Cloud platform will now provision and set up your database. The time required for this process may vary depending on the chosen plan and cloud provider.

8.Access and connect to the database: Once the provisioning is complete, you will receive connection details such as hostname, port number, and authentication credentials. These details are needed to establish a connection from your applications or client libraries to the Redis Cloud database.

9.Start using Redis: With the connection details, you can now connect to your Redis Cloud database and begin utilizing its features. Refer to the Redis Cloud documentation or guides for instructions on how to interact with the database, manage data, and optimize performance.

Remember to monitor your Redis Cloud database regularly, adjust configurations as needed, and take advantage of any additional features or services provided by Redis Cloud to enhance the performance, scalability, and security of your Redis deployment.

Python Script 

Now in this section, we will create a python script to establish the connection with the MQTT broker which is installed on our local system and now is accessible through the url URL obtained from the previous steps mentioned before.

importpaho.mqtt.clientasmqtt

importredis

# MQTT broker connection details

broker_address = “0.tcp.in.ngrok.io”

broker_port = 16992

# Redis connection details

redis_host = “redis_host_url”

redis_port = 15412

redis_password = “redis_password_value”

# Connect to Redis

redis_client = redis.Redis(host=redis_host, port=redis_port, password=redis_password)

# MQTT on_connect callback

defon_connect(client, userdata, flags, rc):

    ifrc == 0:

        print(“Connected to MQTT broker”)

        client.subscribe(“test”)  # Subscribe to MQTT topic(s) here

        client.publish(“test”, “Device connected”)  # Publish a message to MQTT topic

    else:

        print(“Failed to connect to MQTT broker, return code:”, rc)

# MQTT on_message callback

defon_message(client, userdata, msg):

    topic = msg.topic

    payload = msg.payload.decode(“utf-8”)

    qos = msg.qos

    print(f”Received MQTT message – Topic: {topic}, Payload: {payload}, QoS: {qos}”)

    # Store MQTT message in Redis

    redis_client.set(“logs”, payload)

    print(“Message stored in Redis”)

# Create MQTT client and set callbacks

mqtt_client = mqtt.Client()

mqtt_client.on_connect = on_connect

mqtt_client.on_message = on_message

# Connect to MQTT broker

mqtt_client.connect(broker_address, broker_port)

# Start MQTT client loop

mqtt_client.loop_start()

# Prompt for topic and message

topic = input(“Enter the topic: “)

message = input(“Enter the message: “)

# Publish the message to MQTT topic

mqtt_client.publish(topic, message)

# Keep the script running

whileTrue:

    pass

Creating a Dockerfile

Now to use this script inside a pod we need to create a Dockerfile, which is a collection of steps to build a docker image. Here we are creating a Dockerfile which that will use this python script to establish the MQTT broker connection when the container or pod is created using this image

1. Dockerfile 
2. # Use a base image with Python installed
3. FROMpython:3.9
5. # Set the working directory in the container
6. WORKDIR/app
8. # Install required dependencies
9. RUNpipinstallpaho-mqttredis
11. # Copy the script to the container
12. COPYtest.py/app/test.py
14. # Set the MQTT and Redis connection details as environment variables
15. ENVBROKER_ADDRESS=”NGROK URL”
16. ENVBROKER_PORT=16921
17. ENVREDIS_HOST=”REDIS_URL”
18. ENVREDIS_PORT=15412
19. ENVREDIS_PASSWORD=”REDIS_PASSWORD”
21. # Run the Python script
22. CMDpythontest.py

2. Now to build an image from this Dockerfilewe need to execute the following command:

docker build -t <image_name> .

3. Now you can see the image will be created and to check whether the docker images is created successfully:

# docker images 

It will display your image with a the latest tag and image id ID.

GKE Google Kubernetes Engine

Google Kubernetes Engine (GKE) is a managed service provided by Google Cloud Platform (GCP) that allows users to deploy, manage, and scale containerized applications using Kubernetes. It simplifies the process of running Kubernetes clusters by handling many of the underlying infrastructure tasks, such as cluster setup, scaling, and monitoring.

With GKE, users can create and manage multiple Kubernetes clusters easily, providing a robust and reliable environment for deploying containerized applications. GKE integrates with other Google Cloud services, enabling seamless integration with storage, networking, and monitoring tools.

Overall, GKE simplifies the management of Kubernetes clusters and provides a scalable and reliable platform for deploying containerized applications, allowing developers to focus on building and running their applications rather than managing the underlying infrastructure.

GCR (Google Container Registry)

Before creating a cluster, we need to push our customized docker image to a container repository in the Google Container Registry so that the image can be pulled by the cluster while creating the pod. To do these following commands needs to be executed:

1. Authenticate Docker with the GCR service:

gcloud auth configure-docker

2. Tag the Docker image with the GCR registry URL:

docker tag mqtt-image asia.gcr.io/[PROJECT-ID]/mqtt-image

3. Push the Docker image to GCR:

docker push asia.gcr.io/[PROJECT-ID]/mqtt-image

GKE autopilot setup

In this section we will be creating an autopilot cluster in the Google Kubernetes Engine. Following these steps will setup the autopilot cluster:

1. Go for the urlhttps://cloud.google.com and search for Kubernetes Engine and hit enter it will redirect you to the Google Kubernetes Engine page.
2. Click on Create, by default GKE provides you an option to create an autopilot cluster so that most of the things inside a cluster are managed by the Kubernetes engine itself. But if you want to manage all by yourself you can go for the standard method. Here we choose the autopilot method.

3. Name your cluster and select your region.

4. After naming your cluster and selecting the region click on Next for networking configuration and choose the network and mode of cluster whether it is going to be public or private cluster, which in our case will be a public cluster and then click on nxt for Advanced settings.

5. Now select the cluster release channel, and we choose Regular channel which is the default option. And Then we review and create the cluster. 

6. Now review the configuration for once and then click on Create cluster. It will take some time to create the cluster so we’ll have to wait till the time it gets provisioned.

Connecting with the cluster 

Now to connect with the cluster we have two options either copy the gcloud command to use the local system after getting it authenticated or else use the Cloud shell.

1. Run the following command on your system and authenticate and enter the cluster 

gcloud container clusters get-credentials mqttcluster –region asia-south1 –project <Project-Name>

2. This command will authenticate you and you may interact with you cluster. Now create a manifest file named as pod.yaml with the following configurationwhich is as follows:

1. apiVersion: v1
2. kind: Pod
3. metadata:
4.   name: first-pod
5. spec:
6.   containers:
7.     – name: mqtt
8.       image: asia.gcr.io/idan-dev/mqtt-img
9.       ports:
10.         – containerPort: 1883
11.       resources:
12.         requests:
13.           cpu: “2”
14.           memory: “4Gi”
15.       command: [“python”]
16.       args:
17.         – “-u”
18.         – “-c”
19.         – |
20.           import paho.mqtt.client as mqtt
21.           import redis
22.           broker_address = ‘NGROK_URL’
23.           broker_port = 16921
24.           redis_host = ‘REDIS_HOST_URL’
25.           redis_port = 15412
26.           redis_password = ‘REDIS_PASSWORD’
27.           redis_client = redis.Redis(host=redis_host, port=redis_port, password=redis_password)
29.           def on_connect(client, userdata, flags, rc):
30.               if rc == 0:
31.                   print(‘Connected to MQTT broker’)
32.                   client.subscribe(‘test’)
33.                   client.publish(‘test’, ‘Device connected’)
34.               else:
35.                   print(‘Failed to connect to MQTT broker, return code:’, rc)
37.           def on_message(client, userdata, msg):
38.               topic = msg.topic
39.               payload = msg.payload.decode(‘utf-8’)
40.               qos = msg.qos
41.               print(f’Received MQTT message – Topic: {topic}, Payload: {payload}, QoS: {qos}’)
42.               redis_client.set(‘logs’, payload)
43.               print(‘Message stored in Redis’)
45.           mqtt_client = mqtt.Client()
46.           mqtt_client.on_connect = on_connect
47.           mqtt_client.on_message = on_message
48.           mqtt_client.connect(broker_address, broker_port)
49.           mqtt_client.loop_start()
50.           while True:
51.               pass

3. Now create a pod using the following commands:

kubectl apply -f pod.yaml

Now it will take some time to create a pod and once it is created, we’ll be able to see that the pod is connected with the MQTT Broker which is running on my local system. Your connection is now established between your cluster and your MQTT broker.

When you look up react examples or ventures, you’ll find that they almost always use Node.js to make the program easier to use. In addition, most developers use Node.js in conjunction with React to create high-performance applications using UI (user interface) components. The important thing is that with Node.js as the proxy server, one can use React.js server side rendering.

Why Do You Use Node.js?

Node.js is an open-source, event-driven, asynchronous JavaScript runtime environment that is primarily used to create scalable applications. Node.js is also suitable for developing microservices, event queues, and Web Sockets. It’s also a common back-end option because of its event-driven architecture and lack of deadlock, allowing for scalable applications.

Node.js has a lot of cool features, and its environment is great for server-side applications. Even, with the Node.js runtime environment, JS runs flawlessly on Linux, Mac OS, and Windows. Furthermore, since Node.js is based on the Google V8 JavaScript engine, it allows for faster code execution. Node.js is also used by industry leaders such as Netflix, LinkedIn, PayPal, Walmart, Microsoft, IBM, and others.

Why do you use React.js?

Facebook manages the React front-end JavaScript library. ReactJS takes less effort to build an interactive UI (User Interface) than other frameworks. If you built a simple view for each state in your React application, React will proficiently update and make the perfect components as your information changes.

React can be used with a web server such as Apache, NGINX, or a backend such as PHP, Rails, and others. React has the ReactDOM library, which fits well with a browser’s DOM, and React was originally designed for web browsers.

React builds an in-memory data structure cache that compares the variations between previous versions and then updates the DOM in the browser. These allow the real DOM to be modified nominally.

Yet, over time, it has developed into the React Native cross-platform system, which is commonly used by iOS and Android developers.

Read Also:- 5 Tips To Choose Best Mobile App Development Companies

Why Node JS and React JS are necessary?

Node.js is a cross-platform, open-source runtime environment based on Google Chrome’s JavaScript Engine. Node.js is a server-side and network programming language that allows you to create fast, scalable applications. The applications are written in JavaScript and run smoothly on Mac OS, Windows, and Linux using the Node.js runtime environment.

Even if they don’t use it on their current projects, most developers are familiar with JavaScript and its many variants. While competitors such as Ruby, Python, and Perl have entered the market as potential JavaScript replacements. Because of its simplicity, JavaScript remains the preferred programming language for many developers.

ReactJS and Node.js are often used by developers to build reusable user interface (UI) components. React is a free JavaScript library that is commonly used as the V in MVC due to its use of a JavaScript virtual DOM, which is faster than a standard DOM. This allows for a more straightforward programming model with improved results. React is also capable of being rendered in a server using Node.js, while being optimized for use in a browser. Data and component patterns in ReactJS also aid in the maintenance of large applications and increase readability across devices.

In comparison to conventional servers like the Apache HTTP Server, which generate small threads to handle a large number of requests, Node.js uses a single threaded model combined with event looping to create a highly scalable server. Since there are almost no functions in Node.js that explicitly execute I/O, this single threaded model prevents the server from reacting in a non-blocking manner. Furthermore, Node.js applications do not suffer from buffering since the data is output in bulks.

A tag-team mix of Node.js and ReactJS would help businesses looking to build their own fast-running applications. Not only can they benefit from the thousands of open-source libraries that have already been developed for Node.js, but they will also benefit from the efficiency of its streamlined model as well as the support of the Node.js and ReactJS developer communities.

Read Also- Mobile Application Development Service

Why do developers use a Node.js and React.js mix that works so well?

One can say a resounding yes because Node.js can be used with ReactJS, and the top ten factors are as follows:

1. NPM (Node Package Management)

When it comes to Node.js, it comes with built-in support for the NPM tool. You can easily install any package from the registry using the NPM CLI tool.

2. The Webpack framework

Webpack in Node.js makes bundling the React program into a single file much simpler. Another advantage of using Webpack is that it does not require the use of a Node web server. Isn’t it simple?

3. There is no need to invest in additional languages

In a Node environment, React code can be executed. Because of this easy coding, you won’t need to learn a new language.

4. Rendering on the Server

Many businesses are turning to React for server-side rendering, combining it with Node.js to run large-scale applications.

5. Creates a web server that is SEO friendly

If you use Node.js or other languages for server side rendering, your website will be SEO friendly. Both your website and the search engine benefit from this situation because the search engine can easily crawl your content.

6. Code execution speed

Since Node.js is lightweight and efficient, it is frequently used to create real-time applications. Node.js is also based on Google Chrome’s V8 JavaScript engine, which allows for fast code execution.

7. Virtual Document Object Model

Since it uses JavaScript virtual DOM, which is faster than other DOMs, React is often used as V in MVC architecture.

8. It takes less time and effort from the developer

If you use Node.js for the backend, JavaScript becomes the primary language for the entire project. As a consequence, by using a single programming language, the time-consuming process of code replication between the server and browser is avoided. This minimize the developer’s coding effort.

9. JavaScript is still the most common scripting language

There are already languages on the market that have the ability to replace JavaScript, such as Ruby, Python, and Pearl. However, because of JavaScript’s simplicity, the majority of developers use it for their projects.

10. Help from the community

There are thousands of applications developed with Node.js and React available. All have good community support, and committed citizens are working to change the situation.

Final Thoughts

Without a question, React and Node serve different roles, with React serving as a front-end system and Node serving as a backend framework. Nodejs can do a lot more than just make servers; it can also run scripts and provide CLI software.

You’ll need to know how to use NPM if you want to use React with Nodejs. If you want to add a backend, there’s nothing like actually coding in a Node environment to use React. Using Respond with Node will certainly assist you in scaling your project to new heights. As a result, Nodejs is used by a variety of tech giants, including Netflix and PayPal, and has delivered excellent results and a substantial increase in efficiency.

So, are you prepared to use React and Node together in your web development? Start your two-week free consultation call by recruiting pre-vetted and committed developers like Unanimous Technologies.

Visit – Mobile App Development Service

Components is base and essential part of React application development.
To create your React.js web application you need to install react app generator which is written in node.js and available though node package manager.

npm install -g create-react-app

or

npm i -g create-react-app

Now lets create an quick react app using create-react-app generator via terminal on mac or linux or command Prompt on windows

/>create-react-app hello-world-react

It shall look like this

Now run following commands

cd hello-world-react

  npm start

It will launch the react app on http://localhost:3000/ , as you make changes in source file those are reloaded in web-browser instantly.

Now lets create a HelloWorld.jsx file in source folder and add the following code

import React, { Component } from “react”;

class HelloWord extends Component{

render() {

return <h1>Hello Word Componenet</h1>;

}} export default HelloWord;

In your app.js or index.js you can import your component like

import HelloWorld from “./HelloWorld”;

//and  in render method add it

<HelloWorld />

Please check below codesandbox preview of the HelloWorldCode

Few this worth noticing are

• It is important to import React in order to write JSX code
• JSX syntax look similar to HTML
• The above type of components are called class component and is defined in React.Component.
• Any html component used in JSX will have same tag e.g <div/> <p/> etc
• class in html is written as className in JSX rest all html attribute will be written in same format
• for attributes with – like tab-index font-size etc will be converted to camelCase like tabIndex fontSize etc.

In next tutorial I will write about using style sheets in react.

React is an interactive UI library written in Javascript and open source under MIT License created by engineering team at Facebook. React can be used for website, server, native mobile apps and even 360 VR applications.

The core of react lies in Virtual DOM (Document Object Model) manipulation on client side. React has easy and smooth learning curve and mostly follows modern Javascript with minimal design pattern.

React follows following ECMAScript Standards :-

• ES6
• ES7
• ES8

To get started with React you should be well aware of modern JS feature which I will be discussing below : –

How to declare variable in React ?

1.  let : use to declare variables that can change values in block/method scope
2. const: constant values
3. var: global variables

const SOMEVALUE = 100; // this value can’t be changed once defined // but arrays and ojects  can be modified

var title = “Some Title”; // this variable can be changed from anywhere in code

let count=0; // this variable can be accessed    and changed in given block scope and nowhere else in code

Spread syntax/operator ( … ) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(…numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

In react we can use Spread operator for following

• Pushing values in array
• spread attributes/ props on component

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

function sum(…theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

var a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, …rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

React Destructuring usage example

// Imagine we are on our component and we are

// receiving the props (in this.props): City, State and Country.
render() {
// Our props are:
// {city: ‘Jaipur’, state: ‘Rajasthan’, country:
‘India’ }
console.log(this.props);
const { city, state, country } = this.props;

// Now we can use the nodes as constants…
console.log(city, state, country);

return (

• City: {city}
• State: {state}
• Country: {country}

);
}

// Also the destructuring can be used on function parameters
const Place = ({ city, state, country }) => (

• City: {city}
• State: {state}
• Country: {country}

);

The Arrow functions / ( => ) operator are anonymous function used as a way to bind the this / context object in methods instead of binding it in the constructor.

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

Creating string using Template literals  allow you to write multi line strings enclosed in back ticks, eliminating the need to escape each line with a backslash or having to concatenate each line with +.

`All
 day
 breakfast`

Instead of

'All\
 day\
 breakfast'

// or

'All' +
'day' +
'breakfast'

and also allow embedding of placeholders in string using ${} expression

const uri = 'portfolio.php'

console.log(`http://unanimoustech.com/${uri}.`)

// http://unanimoustech.com/portfolio.php

Map / map() method is used to iterate over an array and is most commonly used to render multiple elements like list table or group of html element inside react component like

const friends = [
    {id:1, name: 'Dave',age:50},
    {id:2,name: 'Kellie',age:42},
    {id:3,name: 'Max',age:12},
    {id:2,name: 'Jack',age:12}
];

render(){
  return <ul>
    {friends.map(p => <li key={p.id}>{p.name}</li>)}
  </ul>;
}

Object.assign() method copies values of all enumerable own properties from one or more source objects to a target object. This method comes quite handy when using Redux framework to create immutable objects and return a new state to reducers.

const object1 = {
a: 1,
b: 2,
c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

JacaScript classes are in fact “special functions”, and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

React uses classes to create class Components:

import React, { Component } from ‘react’;

class HelloWorld extends Component {
render() {
return <h1>HelloWorld Component</h1>;
}
}

export default HelloWorld;

These were some basic  modern javascript concept that you must be aware and get used to in order to begun React Js development.

In next tutorial I will explain how to create different type component in React.

The reasons for a mobile game to fail can be innumerous, such as:

• The inability of the game to make money or fetch lucrative return on investment
• The budget is exhausted just on the development and there is nothing left for innovation or even marketing the game once it has been developed
• The game is extremely complicated or too heavy

But, you can improve your chances of success by taking into account the following game development tips.

#1 Identify the best platform

Assuming that you already have a brilliant idea for the game, the next important thing is to determine the perfect platform – Android, iOS and Blackberry or hybrid. Every platform has its own share of advantages and disadvantages, and the platform you choose is going to determine the overall experience of the game. You may also choose to launch your game on multiple platforms in order to increase visibility and engagement. In case you are looking forward to connecting with a lot of audiences, Android will probably be the best choice followed by iOS.

The basic factors to consider when selecting a gaming platform are:

• Your targeted audience for the game
• The graphics and processing requirements of your game

#2 Create Excellent UX/UI

What makes a game truly interesting and engaging is UX/UI. You need to absolutely make sure that the design of your game is attractive and compelling. If your game involves complicated controls, you must remember to include tutorials so that it is easy for the players to understand the game. You need to include practice stages so that the users get a hang of the game and as their interest builds up, so should the levels. Also, you need to design the graphics keeping in mind the best possible resolution and maximum screen size. If the graphics of your game pixelates, you can be sure of users rejecting it and downloading your competitors’ games.

#3 Say a Story through Your Game

If your game says a story, it will appeal to the audience even more. They will simply play the game to know the entire story. In case you do not have a story for your game, you might consider creating one. Stories are a fantastic way to attract the attention of the users and also lend meaning to your game. Since stories give boring characters and objects meaning, every game user likes story-based games. Games that have a brilliant storyline, compels users to keep returning back to the game. Your ultimate aim must be to make the users curious about what’s going to happen next as he or she progresses through the levels. Only a powerful story backed by excellent graphic design can make your game development and mobile game development a huge success.

#4 Integrate social media

The number one way to drive engagement today is with the use of social media. People love gaming levels, the rewards, sharing gifts and so on. If you want to generate traction for your game, social media is the best way. It will also act like word-of-mouth publicity when everybody across social media channels will be talking about your game. If you want to create a buzz around your game and drive social engagement, target influencers and social communities. Try and include social media elements wherever you can in your game development plan.

#5 Make Use of Interesting Sounds

If you want to hook the attention of the players, music plays a major part. You can choose different source sounds for explaining various game scenarios and you can also use varied audio effects. There are certain free versions, but it is best if you create your own. With your own custom music, you can create a brand and keep the gamers engaged. Impactful audio attracts the attention of the game players and helps to create an interesting and thrilling gaming environment.

#6 Test, Test and again Test

Irrespective of whether you choose Android or iOS for your game, nobody likes crashes and bugs. The last thing that any game developer would want is the users uninstalling the game because the game is not able to perform a specific task. So, make sure that you rigorously test your game on varied platforms. You may also try to play the game in several different ways to ensure that it works smoothly and without any glitch.

#7 Invest in Marketing

So, it is great that your game has social media integration and the design is outstanding, but without marketing you cannot expect your game to be a huge success. First, you need to craft a stunning and worthy launch and pool in all your efforts to target game communities and influencers. You may also include in-app ads to increase the download of your game and revenue.

To sum it up, you need to start with a great idea and follow it up with attention-grabbing design, arresting music, social media integration and a whole lot of marketing and advertising. You must also try to say a story through your game, which might be super simple like, a prince rescuing a princess from the tower or as difficult as an individual is given the responsibility to save the world.

Game development and mobile game development is not the difficult part, it is bringing together the ideas so that you can go above and beyond your competitors. With a strong storyline and all the aforementioned elements in place, you will surely be able to create a game that will become as addictive as Candy Crush.

Do you want to share any tips for first-time game developers? Are there any specific things that they should keep in mind? Kindly give your suggestions or tips in the comments below.

Or

npm install react-native-easy-grid --save

import { Col, Row, Grid } from "react-native-easy-grid";

Straight to the example:

If we need two columns with 50% width each, we can perform as follows

<Grid>
<Col></Col>
<Col></Col>
</Grid>

Two columns of the same width

More examples

If we require three columns of the same size. We can perform as follows

<Grid>
<Col></Col>
<Col></Col>
<Col></Col>
</Grid>

You want horizontal bifurcation? Use <Row />

Just like <Col />, you can use <Row />

<Grid>
<Row></Row>
<Row></Row>
</Grid>

Can we assign percentage to rows and columns? — Yes!

To build, two rows having 75% and 25% height each, you can:

<Grid>
<Row size={75}></Row>
<Row size={25}></Row>
</Grid>

This is exactly same as

<Grid>
<Row size={3}></Row>
<Row size={1}></Row>
</Grid>

The catch with the size prop is that, it’s not percentage, but it’s a factor. We are saying, we want the first row with 3x height and the second row with 1x height.

Show me some complex layouts!

You can always nest <Row /> and <Col /> to build complex layouts. Say, if you want to split a column into two horizontal rows, you do something like this

<Grid>
<Col>1<Col>
<Col>
<Row>2</Row>
<Row>3</Row>
</Col>
</Grid>

Fixed left panel with fluid right column

If we desire a column with “fluid width” on the right and “fixed width column” on the left . This can be achieved with a bit of styling like this

<Grid>
<Col style={ { width: 140 } }> Fixed width <Col>
<Col> Fluid width </Col>
</Grid>

Usage with <ScrollView /> — There’s a catch!

If you see the column examples above, they span to 100% height of the device. They aren’t inside any <ScrollView />.

There might be cases when you want to divide the layout into columns inside a <ScrollView />. These component, <Row /> and <Col /> when placed inside <ScrollView /> doesn’t span to the entire height of the screen but start growing as we add content inside them. We can always cast some “height” to them and add more nested layouts within.

Let’s start with few definitions as follows: –

API

An API is mostly a set of data often in JSON format with specified endpoints. When we approach data from an API, we want to access definite endpoints within that API framework. For instance, if in the scenario we are using today, we are going to be using the random user API. Within this API, it has randomly developed user data, basically like Lorem Ipsum, but for imaginary users. It has data within the API like email addresses, phone numbers, names and pictures for each user. We don’t need all the data, but we’ll use certain endpoints to grab only the data we want.

Fetch

Since all the data we want is stored in an API, the fetch is how we request that data. We’re basically, requesting API to send us data. The server will then react and will send the data. We can also specify how we want the data to be returned. JSON data is often the easiest to use, so if the server returns anything other than JSON format, if that’s what we’ve requested, we may get an error.

Lifecycle Method

In React, there are a few lifecycle methods. Constructor, ComponentWillMount and Render are three of the lifecycle methods we will be using in this exercise.

State

If you’re new to React, State can be confusing. Think of state as water, ice and vapor. It’s the same object, but has different states depending on conditions. Objects in React are the same way. We can change their state basis on how we want to interact with them.

Okay, with that out of the way, let’s get started.

I’ve selected a user-friendly API to work with, which is a great one to use, especially if it’s your first time or two doing this. Before we start, let’s look at what we want to accomplish. I’ve already finished, but it’s nice to see the finished product, so you know what you’re working toward. Below is basically the end result of what we want to accomplish. Specifically, you will notice that there are hundreds of Thumbnail pictures in the background. That’s not one static image. Rather it’s hundreds of dynamically created photos that we are fetching from an API. Okay, so let’s dive in.

React uses components so it’s easy to make a fetch appeal, or pull data from an API, store it in one component, and then import the entire component to the app, or parent component. Dividing it up into components will help keep our code less cluttered when we fetch from multiple sources or have multiple fetches from the same source.

Here’s how I set up the architecture of this app:-

The background component holds all of the user photos that we’ll pull from the fetch. I have created Background of its own component, and then import it into Splash, so that the code remains cleaner and less cluttered. One can go ahead and set up the architecture of their own app before making the API, if it’s easier to work that way.

Let’s take a look at the Random User API to grab data we want.

Before we go too deep into the project, it’s usually a good idea to go to the API and read any documentation available. This will usually give a good idea of how the API is structured and how to access the data. Often, bigger APIs will register one for a key or have specific ways you need to access the data. We can avoid a lot of that hassle with random User API as is open source and easy to use.

I usually like to pull the data up in a program called Postman, once you’ve have looked over the API documentation. Postman is an enormous way to see the data and target the specific data you want.

Here, in postman at the top, I’ve put the API address into the search bar. I’ve set the request to a GET request, since we’re retrieving data. We could also do a POST, PUT or DELETE request, if we needed to. After the API address I’ve added this line, “results=500”. The Thumbnail pictures we pull will fill the entire background, so I’m asking the API to return 500 results.

Imagine we were pulling data from the API, and rather of a background, we were composing a user profile site. We might only want 1 result, or 3, or whatever. You can filter the results many different ways, but for now, this is as complicated as we are getting. If you scroll through the data, you can see there’s quite a lot there. I’ve highlighted the data that we want. We don’t want any text data, only the pictures. And not just a picture. We only need the thumbnails (which are part of the picture objects). Once we realize what we want, and we can see in postman where that data is nested, it’s easier for us to target later.

Okay, now comes the fun part.

Here we are in the background component. As mentioned earlier, to do a fetch in React, we’ll need to use 3 lifecycle methods.

Let’s look at this as a 3-step process :-

Step 1: Constructor Method

Here in this method we only have to worry about two things. We use super to pass any props from the parent to the child component, once we call the constructor method. Then we set the state. I mentioned state earlier. When you set the initial state, you want to set it as empty, or blank. If it’s going to be a string, it would be an empty string. If an array, an empty array, etc. In this scenario, we only have one thing that we need to set the state of, and that’s the pictures. As we want our pictures in an array, we’re setting it now to an empty array. Then, when we use the fetch to retrieve the data, we’ll go in afterwards, and set the new state to the data that we’ve pulled.

Step 2: ComponentWillMount

In React, lifecycle methods including “Did” are called after something happens and methods including “Will” are called before something happens. But here we require to call the method before, and then pull the data, which is why we are using componentWillMount instead of componentDidMount.

Step 2, part A: Fetch:

Doing one fetch means basically done a thousand. For each one the format will be more or less the same, with just minor differences on how you want to map over the data, etc. We are calling the fetch, and if you’ll notice in the web address, I’ve included the “results=500” filter that I pointed out earlier. You can just copy and paste that URL into your fetch once you have targeted the data the way you want in postman. 

Step 2, Part B: Results:

Here we explain how we want the data returned. Since JSON is easy to work with, and that’s how this data is formatted, that’s what we’re expecting here.

Step 2, part C: Map:

In this we’re mapping over the data that we’ve pulled. This is basically the same thing as doing a for loop. However, sometimes the map function just seems to work better. Considering like this mapping, we’ve told the API we want to get 500 user data objects. As we see in postman, that each user data object contains a lot of information we don’t want, like numbers, address, etc. So, we need to map over it first. Then, we can inform the API that we really need these pictures here and discard everything else.”

Step 2, part D: Key and Return data:

There’s two parts to this step. First, We have set the key to “pic.results” and then specify the data object. The Key feature is used by react to assure that dom elements resemble with data objects. We have created an image tag, with a source that’s set to the data we want to pull. Essentially, what’s happening here is we’ve set a key inside the parent container. We’re informing Inside the parent container, here’s an element and whenever all the data is mapped over, we want it to populate this element with that data. Because we want pictures, that’s why we’re using a <img> element. If we were grabbing the user addresses, names, or phone numbers from this api, we could also include an <li> or <P> tag and use dot notation to specify the data we want inside that element.

Step2, Part E: Set State

Now the last part of this lifecycle method, and arguably the most important. We need to set the new state of our pictures empty array. Using ‘this.setState’, we’re basically saying, “Hey React, remember that empty array we defined as ‘pictures’ earlier? Well, now we want to change its state. So, we’re changing it to this array of pictures we pulled from the API. Is that okay with you?” React is usually pretty nice, so I don’t think it will mind.

Step 3: render:

Render is the last lifecycle method. Now we want to use the new state we defined in the componentWillMount lifecycle method. So, we’re setting up a structure here, and then using curly braces to bring in that state “{this.state.pictures}” .

The last task is to import this background component into the main component, Splash JS, which you can see I’ve already done earlier. Now, keep in mind, once you import the background into Splash.JS, yours will look nothing like mine, because I spent hours screwing with CSS, and CSS is a freaking nightmare, and I’m so done with it. Holy crap! And you thought React was difficult! Good luck with that!

But seriously, if you have any questions or feedback, feel free to reach out. Thanks!

State is the heart of every React component. It’s an object that determines component behavior and distribution. In other words, “state” allows to create components that are dynamic and interactive.
State behave differently depending on conditions within components. We can change the way objects appear or interact by changing the state of those objects within a component.

To change state in a component, its need to declare the state after you set the constructor. That might look something like this:

class component_A extends Component {
constructor() {
super();
this.state = {
data: [],
};

}

In this case, we are defining the state of data. I’ve defined it here as an empty array. We could have used an empty object, or empty quotes, depending on the data type we wanted to change the state of. Then when we are ready to change the state, we would simply use “this.setState.” With our example above, it might look like this:

this.setState({data: data});

Okay, so let’s say you have two components, and you need to pass data from one component to another. Well, you wouldn’t be able to use state. State can only be transported within the component where it was created. Instead, you can use props, or properties. Let’s imagine you have a React project, with a file structure that looks like the following:

Here, we have component_A, with files nested inside of it, and then it’s child components, component_B and component_C. It’s very acceptable that component_A would have data that we would need to access in component_C. How would we access that, or pass the data from component_A to component_C? Basically, what we want to do, is this:

I want to pass the property of color from the parent component to one of the child components. We can pass prop using “this” the same way we resolved the state in a component prior. In that example, the state could be used and passed throughout the component. Passing data from parent to child components is only slightly complex, in that, we can’t pass data in an unbroken chain to other components. In the above sample, we would really need to pass the data, in this case, {this.props.color} from component_A to component_B and then to component_C. It would look like this:

And if I want to pass data back up the chain, from child to parent?

This is a slightly more difficult process.

1. Define a callback in the parent which takes the data as a parameter.
2. Move that callback as a prop to the child.
3. Call the callback using this.props.[callback] in the child, and pass in the data as an argument.

Basis on above example, our code might look something like this:

class component_A extends Component {
constructor() {
super();
this.state = {
listDataFromComponent_C: “ “,
};

}

myCallback = (dataFromComponent_C) => {

this.setState({ dataFromComponent_C: dataFromComponent_C});

Now from within the child component (component_C) we can pass something to callbackFromParent:

this.props.callbackFromParent(listInfo);

As props are constant, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component. In order to do this, set this parameter as a state within the new component. It might look like the following:

class component_A extends Component {

constructor (props) {

super(props);

this.state = {

dataFromComponent_C: “ “

};

},

myCallback = (dataFromComponent_C) => {

this.setState({ dataFromComponent_C: dataFromComponentC });

 

This is just a short description of how to change data within a component, and transfer data to other child and parent components.