9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Showing posts with label reactjs. Show all posts
Showing posts with label reactjs. Show all posts
Sunday, October 09, 2022

React Removing Unused CSS and Obfuscate JavaScript in Post Build Process

This is continues of my previous post about how to remove unused CSS and convert unclear JavaScript to protect your source code in the post-build process. If you are using CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain how to configure the React post-build process to remove unused CSS and hidden JavaScript files that enhance the application security and definitely improve the app loading time and save the overall bandwidth cost.

React Removing Unused CSS and Obfuscate JavaScript

Wednesday, August 19, 2020

Github Free Angular React Application Hosting

Developing and hosting your own Angular, React applications has never been easier, but now there are many options like Google Firebase, Heroku and etc. Github Pages is offering some great features with free of cost no credit card required and no bandwidth limitations. Just create a public repository and commit all of your product ready files. It has a custom domain support with HTTPs enforcement.

Github Free Website Hosting

Tuesday, August 27, 2019

Mock REST Backend Server for Angular and React Applications.

As I promised to continue the Angular/Ionic project series, as a developer perspective mock server is the most important to progress the development. We should not depend on the production or development API for front-end development. This post is about creating a simple Node Express server with mock JSON object files. You can import the project to any of the front-end applications like Angular, React, Ionic and VueJS projects.

Mock REST Backend Server for Angular and React Applications.

Sunday, May 19, 2019

Getting Started with Ionic React and Capacitor

Ionic is the most popular framework for Angular mobile application development. Now Ionic announced with React beta and Vue Js. This post is about getting started with Ionic React with Capacitor(Ionic Product). The Capacitor is a native bride for Cross-Platform for building universal applications. This blog post will explain how to set up a react project using Ionic mobile components and generating iOS, Android and Desktop(Electron framework build) applications.

Getting Started with Ionic React

Monday, April 16, 2018

PayPal Express Checkout with React JS and PHP RESTful

There are several payment options available in the market today. PayPal checkout option is one among them. In my previous articles, I have already discussed few payment options - Braintree PayPal using PHP, Payment system and PayPal Express Checkout with PHP and MySQL. These are the most viewed and trending articles till this day. Today, let’s see how the PayPal Express Checkout works with React JS.

PayPal Express Checkout with React JS and PHP RESTful

Monday, November 06, 2017

Login with Facebook and Google using ReactJS and RESTful APIs

There are a number of advantages to implementing social login in your web applications. First of all, it best secures the user credentials, the user can use a single login for accessing multiple sites, this can automatically access the user details for further use, and many such. This article is about how to implement the social login with Facebook and Google using ReactJS and RESTful API. This social login helps to store social data of the logged in user into the database. So that it provides you valid user data like email, name, and others. This is a continuation of ReactJS Welcome Page with Routing Tutorial. Let’s see how this works, follow the live demo and code below.

Login with Facebook and Google using ReactJS and RESTful APIs

Monday, October 23, 2017

React JS and PHP Restful API User Authentication for Login and Signup.

Here is the continued article on my previous post for creating a welcome with login and logout using ReactJS. Today’s post explains how to implement login authentication system for your React JS applications. It will show you how to log in with a user and store the user session, so it deals with token-based authentication. Since we are using token-based authentication, it protects if any unauthorized request is made and notices for a new login if required. This makes your application’s authentication to be more secure compared with any other authentication system. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication. Hope you’ll find it more easily using this as your authentication system in your ReactJS projects. Let’s look into the live demo and follow the below code.

React JS and PHP Restful API User Authentication for Login and Signup.

Sunday, October 15, 2017

ReactJS Welcome Page with Routing Tutorial

Days back, I have posted an article on how to create a welcome page with proper login and logout using Ionic 3 and Angular 4. Today’s article is to create the same welcome page with ReactJS and ES 6. The article is about how to login/signup to get inside the application home page, you can navigate to different pages and finally you end up with a logout action. Lets see how to set a starting page with navigations using ReactJS and ES 6.

Video Tutorial: ReactJS Welcome Page with Routing Tutorial

Monday, April 24, 2017

React Native Router Navigations - Tutorial Part 3

This is again the continued post on React Native series. This post explains routing and navigation to different tabs in an application using React Native. Navigation is all about how the user can access possible sequences of pages in a web application. Routing is the encoding and decoding of URLs used in the application. Routing is supported by some set of rules. Each application must provide defined set of rules. Once the routing rules are defined, we can use the URLs containing view names and their parameters to navigate to different pages/tabs in the application.

React Native Router Navigations

Sunday, April 02, 2017

React Native JSON Parsing and Helper Functions - Tutorial Part 2

This is the continuation of previous article Getting started with React Native Template Design – Tutorial Part I. Today’s article and video tutorial explains how to parse and render the json data using some of the best React Native packages. It explains how to make ajax calls using fetch. Fetch is the networking API, which is chosen by React Native to get the JSON data and render it in the page. I hope embedded videos with blog posts are more advantageous for you to learn. I appreciate to take any feedback if you have, so that I can make it better.

React Native Template Design

Sunday, March 26, 2017

Getting Started with React Native Template Design - Tutorial Part 1

We always look for apps that are faster to develop and run, React Native is one such emerging framework. Being focused on mobile development; React Native is an open source framework from Facebook which can be run on multiple platforms and devices such as iOS and Android. React Native is a javascript library. You do not have to learn iOS’ Swift or Java for Android, all you need to know is Javascript. I am going to present series of articles on React Native. This article explains making of native mobile template using React Native. Today, I am introducing video tutorials on Youtube for an easy learning.

React Native Template Design

Monday, October 03, 2016

React Webpack Heroku Youtube Instant Search Working with APIs Tutorial

I already have discussed about React JS in my previous posts. Today, lets see advanced way of using React JS, webpack and ES6 with Node.js to build and run your application. Let’s see what webpack and ES6 does. ES6 (ECMAScript6) is the latest version of javascript that has number of new features to write your javascript code easily. Webpack is mainly designed for larger applications to build the application. The main idea behind webpack/ES6 is code splitting. It allows you to write Javascript as a modularized code, so that you can re-use and share the code to maintain your project over-time.

React Webpack Heroku Youtube Instant Search Tutorial

Wednesday, August 17, 2016

Wall Comment System with React JS Part Two

This post is continuation of React JS previous post. React JS is lighter and faster. It needs less coding and as mentioned in the earlier post, React suites best for one page application, front-end and single page websites. The article explains how to post a comment, delete a comment and also toggle(hide/show) a comment using React JS. React JS and Angular JS are two prominent frameworks in JavaScript now-a-days. As its a new series in my blog, I would appreciate for any doubts or your feedback in the comments so that I could explain it to you in a better way.

Social Network System with React JS

Sunday, August 14, 2016

Social Network System with React JS Part One

How to solve infinity loading either in your desktop or mobile? By now, everyone is familiar with JQuery, but we all know is JQuery cannot handle such large amount of data to load. React JS is the best solution for this problem. JQuery and other libraries interacts directly with DOM to load any data; but React JS is specifically designed in such a way that it has a mid interactive layer called Virtual DOM which in turn interacts with DOM(as shown in the diagram below). This Virtual DOM helps in data loading very faster.

Social Network System with React JS

mailxengine Youtueb channel
Make in India
X