React- How to update parent component state

React (also known as React.js or ReactJS) supports one-way data binding, whereas Angularjs supports two-way data binding.

Sometimes we come across a situation to update parent component state from child component. React does not recommended to update parent state from child component. If any component changes the state value, then those components are regarded as impure component.

In the following demo, we have a parent component (App.js)  with 3 different buttons which will display content in reusable modal. Here, States are maintained in parent component (App.js) and child component (ModalDialog.js) update the parent state (i.e Closing Dialog Method) by calling parent method through props.

Demo:

http://react-modal.amasik.com/

Source:

https://github.com/mail2asik/react-modal

React- When can we use Function and Class components

Sometimes we are confused as to when to use function and class components.

Function Component: 

  • Use if the component does not depend on any state, as it does not support states
  • Component have less HTML elements

Example: https://github.com/mail2asik/react-modal/blob/master/src/ModalDialog.js

Class Component: (Recommended)

  • Use if the component required states
  • Component may have more HTML elements and we can split it into multiple inner functions to reuse it in the same Class
  • Component may have event handler methods eg: onClick()

Example:

 

 

React- Reusable modal component

We can create reusable modal component without importing additional library.

In this demo, We create a single component and passing the Modal Title and Contents through props from parent component. I use Bootstrap 4 for better UI.

Demo:

http://react-modal.amasik.com/

Source:

https://github.com/mail2asik/react-modal

 

React- Some important core concepts with example

Codebase to cover the following core concepts with simple program i.e To display quote message upon button click.

It helps to recall the react core concepts quickly.

Demo

http://react-random-quotes.amasik.com/

Build react app in Nginx (Without Nodejs)

Beginners are confused if React can work without NodeJS. The answer is Yes.

React (also known as React.js or ReactJS) is a JavaScript library; and thus considered a client-side library, will work without application servers like FCM, Tomcat, and/or NodeJS.  However, NodeJS still plays an important role to bundle the JS files as well as convert JSX and ES6 to ES5.

In my case, I have NodeJS on my local but not on live server. Here we can bundle the files in local and deploy to live server.

In create-react-app starter kit, when you run the following command, it creates the bundled/production version inside “build” directory

I deployed the code in live server with the following NGINX configuration. it serves the file from “bundle” directory.

Demo:

http://react-random-quotes.amasik.com/

Source Code:

https://github.com/mail2asik/react-random-quotes

Alias configuration settings in apache

In some cases, we want to place our project folder outside of htdocs. This time Apache not understand that project and we can not run it in browser.

Apache provides alias configuration settings which will be placed in httpd.conf and we can run any app even deployed in out side of htdocs.

In my machine, I have installed xampp in Windows 7. I have created a folder “E:/test” and it contains “index.html”. Assume “test” is a one of the project directory which is placed in outside of htdocs. So In order to access E:/test/index.html,  we need to create alias configuration as follows in httpd.conf file and restart the server.


Now you can access the index.html by entering the URl

http://localhost/test/index.html  (you can add port in url if you have changed default port 80)

Some useful SSH commands

The following commands are often used by developers in Linux environment. This is very helpful for peoples who ever entering Linux world .

For windows user, you can try this commands using CYGWIN sofware. But I am not sure that all the below commands are working there or not.

Commannds Comments
cd Change directory
cd .. Change directory one level back
cd ~ Change directory to root
pwd Print working directory (Display current directory)
mkdir test Create directory
touch test.php Create file
rmdir test Remove directory
rm test.php Remove file
cp test.php test/ Copy file to another directory
cp test.php test_old.php Copy file and create as new file “test_old.php”
cp -r test/ test2 Copy folder and create as new folder “test2”
ls Directory list
ls -alh  Directory list with detailed information . This is often used by developers. for eg: we want to see the size of file or file modification date
ls -lrt
ls *.php List only specified extension
clear clear window
tab Tab-completion makes typing out long file paths much faster!
mysql -u mysqluser -p mysqldatabase | gzip > db.sql.gz Dumb the sql file with gZip
find ./ -iname “test.php” Find file
grep -iR test./ Find file which is having the string “test”
chmod 755 test.php
chmod 644 test.php
Change the mod of file
view test.php Read only
vi test.php Read/Write
:q! Quit without save
:x! Quit with save
/asik Search

Angularjs sample application

This application combined with angular-seed & ui-router module which will help people to understand SPA (Single-page-application) navigation’s using AngularJS

This project followed the following concepts
> Directory structure followed from angular-seed (90%) (https://github.com/angular/angular-seed)
> Bootstrap template used (Third party template, http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/)
> Routers (ui-router) (https://github.com/angular-ui/ui-router)…Also please check http://www.amasik.com/angularjs-ngroute-vs-ui-router/
> Controllers
> Factories
> Directive
> Module Specific (As per angular-seed project)
> Third party modules (Datatable, Form validation, d3 chart..etc..,)

Navigation’s:

> Register
> Login
> Logout
> Dashboard
> Reports
> Customers – List, View & Edit
> Add Customer

Note: All data coming from mock JSON file.

Demo: http://amasik.com/demo/angularjs/angular-app/
Download:  https://github.com/mail2asik/angular-app

Wrap (Break) the word in sentence

The following class is doing word wrapping perfectly.

Encode or Decode html entity from string

Decoding the HTML entity

 

Encoding the HTML entity

 

© 2018 Asik Blog

Theme by Anders NorenUp ↑