ReactJS Introduction, File Structure, CSS Implementation


React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React makes it painless to create interactive UIs. React is a Component based App. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

React can also render on the server using Node and power mobile apps using React Native.


You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. You can install the react from this url

Create Project

You can create the project using npx in any platform using following command.

npx create-react-app project-name
cd project-name
npm start

Hello World Example

Try this simple code example. Copy below code in app.js

import React from 'react';
function App() {
   return (
       <div> Hello World </div>

File Structure

In React application, there are several files and folders in the root directory. Some of them are as follows:

node_modules: It contains all React dependencies or call libraries and script required for the project.

public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the < div id="root" >< /div > element.
public/index.html : It is the only html file in your project. The component going to change dynamically but this html file responsible to serve the all view.

src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.

src/index.css: Apply style to body tag and logo
src/index.js: Specify the Root component which situated in index.html
src/app.css: css apply to app component
src/app.js: App component represent the view that display in index.html

package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the projects dependencies. It provides the documentation to read about React topics.

Styling and CSS

1. CSS Stylesheet

CSS classes are generally better for performance than inline styles. To add the css class, pass a string as the className property.

Create myStylesheet.css
.error { color : red }

To use above css, you must import this css file to code file, in our case app.js

import React from 'react';
import ‘./myStylesheet.css’

function App() {
  return (
    <div className=”error”>Error Div</div>
export default App;

2. Inline Styling

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

import React from 'react';
function App() {
  const Error = {
    color : 'red'
  return (
     <div style={Error}>Error Div</div>
export default App;

3. CSS Modules Stylesheet

This project supports CSS Modules alongside regular style-sheets using the [name].module.css file naming convention. CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.

Create one file appStyle.module.css
.success { color : ‘green’ }

Then in app.js file used the below code to access this success class

import React from 'react';
import styles from './appStyle.module.css';

function App() {
  return (
  <div className={styles.success}>Success Div</div>
export default App;

You can also add the bootstrap classes inside the script, but you must install the bootstrap first in react.

List of important custom and in-built AMP tags


amp-img is use as replacment of HTML img tag. amp-img tag effectively manage image resource at runtime. It uses lazy load to reduce page load time.

To use amp-img need to specify width and height, src attriburtes. It also support three optional attributes srcset, alt, attribution.

  • src – url of image need to display.
  • srcset – for retine ready images. We can provide different image for devices varying pixel ratio.
  • attribution – to set attribution text of the image.

To set image to responsive use layout attribute and set it value responsive.

Example of amp-img
<amp-img src="/img/amp.jpg"
srcset="/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w,
/img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w,
/img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w"
alt="an image"></amp-img>

amp-img is builtin tag and imported via the AMP js.


amp-video is replacement of Html Video tag. It also lazy load video at runtime.

To use amp-video you must specify width, height and src attributes. It also support some more optional attributes poster, autoplay, controls, loop, muted. It also accept three unique HTML child nodes tag, placeholder before video start, and fallback.

Example of amp-video
<amp-video width=400 height=300 src=""
  <div fallback>
    <p>Your browser doesn’t support HTML5 video</p>
  <source type="video/mp4" src="foo.mp4">
  <source type="video/webm" src="foo.webm">

amp-video is in-builtn tag and imported via the AMP js.


amp-audio is replacement of HTML audio tag. It is use to embed audio file in amp pages.

To use amp-audio you must specify src, width and height attributes, amp-audio also have three more optional attribute autoplay, loop and muted.

  • src – audio file url.
  • autoplay – It will autoplay animated image.
  • loop – it will auto loop audio.
  • muted – muted audio by default.
Example of amp-audio
 <amp-audio width="400" height="300" src="">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio</p>
  <source type="audio/mpeg" src="foo.mp3">
  <source type="audio/ogg" src="foo.ogg">

To use amp-audio you have to include below script in <head> section

 <script async custom-element="amp-audio" src=""></script>


amp-accordion is use to implement accordion in amp pages. Accordion is mostly use in faq pages.

Amp-accordion can have one or more first child node <section> and each <section>contain 2 child node first one is heading and second node is content and clicking heading it will toggle display of content.

Below example of amp-accordion
  <section expanded>
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
    <h2>Section 3</h2>
    <amp-img src="/awesome.png" width="300" height="300"></amp-img>

amp-accordion also provides below attributes

  • disable-session-states – to disable preserving the collapsed/expanded state of the amp-accordion element
  • expanded – to set on any <section> expanded on page load.

To use amp-accordion you have to include below script in <head> section

<script async custom-element="amp-accordion" src=""></script>


amp-carousel tag to display content boxes horizontally. A carousel is set of number of items with optional navigational arrow. The carousel move items if user swipe, or use arrow key or use navigation arrow.

To use amp-carousel you must specify height attribute, it also provide more optional attributes controls, type, loop, autoplay, delay.

  • controls – to display navigation arrow
  • type – by default its value is carousel all slides are shown and scrollable. If type value is Slides, it will display singe silde at a time. With type slides you can use three more attribute loop, autoplay, delay.
Example of carousel
 <amp-carousel width=300 height=400>
  <amp-img src="my-img1.png" width=300 height=400></amp-img>
  <amp-img src="my-img2.png" width=300 height=400></amp-img>
  <amp-img src="my-img3.png" width=300 height=400></amp-img>

To use amp-audio you have to include below script in <head> section

<script async custom-element="amp-carousel" src=""></script>


amp-lightbox tag to implement light box interface. amp-lightbox will have to define child node
to display child node content in lightbox on tap or click event.

Example of amp-lightbox
 <button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox">
    <amp-img src="my-full-image.jpg" width=300 height=800 on="tap:my-lightbox.close">

To use amp-lightbox you have to include below script in <head> section

<script async custom-element="amp-lightbox" src=""></script>


amp-ad is use to display ads. amp-embed is an alias of the amp-ad and use amp-embed when logically more accurate. Your ad javascript will not run inside your amp page, AMP will loads an iframe on runtime and execute ad javascript inside iframe sandbox.

To use amp-ad you need to specify type, width, height attributes. Type is name of ad network to which your ad belong. All data-* attributes also depend on type of network.

Below example amp-ad of for different type of network

 <amp-ad width=300 height=250

<amp-ad width=320 height=140

<amp-embed width=400 height=300
    data-placement="Below Article Thumbnails">

To use amp-ad you have to include below script in <head> section

<script async custom-element="amp-ad" src=""></script>


amp-analytics is use to collect analytics data from an AMP page. Currently amp-analytics support below events:

  • Pageview
  • Anchor Clicks
  • Timer
  • Scrolling
  • AMP Carousel changes

To send data to analytcis server you need to specify json configuration object inside amp-analytics tag. Some vendor provide pre configure json configuration object. With type attribute you can set vendor and their json object.

Example for amp-analytics
<amp-analytics type=”abc”>
<script type="application/json">

To use amp-analytics you have to include below script in <head> section

<script async custom-element="amp-analytics" src=""></script>


amp-iframe to display an iframe in AMP pages. amp-iframe is more secure than html <iframe> tag.

To use amp-iframe you must follow these rules iframe must be at least 600px or 75% of the first viewport away from the top and can only request resources via HTTPS.

Example for amp-iframe
 <amp-iframe width="500"
      sandbox="allow-scripts allow-same-origin allow-popups"

To include an amp-iframe, first include the following script to the <head>

<script async custom-element="amp-iframe"

Amp also provide some more tags that we can use when require <amp-selector>, <amp-sidebar>,<amp-facebook>,<amp-instagram>,<amp-pinterest>,<amp-playbuzz>,<amp-twitter>,<amp-vine>,<amp-form>,<amp-font>,<amp-dynamic-css-classes>,<amp-anim>,<amp-app-banner> and more you can refer it on amp officia site.

Note: Also check AMP page example code

AMP (Accelerated Mobile Pages) Example Pages

AMP (Accelerated Mobile Pages) is a Google open source project to speed up page load in mobile devices.

AMP consist of three main parts

  • AMP HTML is HTML with custom AMP tags, properties and some restrictions like only subset of css and html are not allowed that slow down page loading. Only valid AMP HTML files will be shown in Google Search.
  • AMP JS library manage resource loading, provide custom tags, load external resources asynchronously so external resources should not block page rendering, pre-calculate layout of every element before any resources are loaded and it also disable slow CSS selectors.
  • Google AMP CACHE is a content delivery network. It fetches valid AMP HTML pages and cache them to improve page performance.

Sample AMP html

<!doctype html>
<html amp lang="en">
<meta charset="utf-8">
<script async src=""></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
"@context": "",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<h1>Welcome to the mobile web</h1>

Required markup for AMP HTML document

  • Start your document with the doctype <!doctype html>.
  • Below doctype <html > tag (<html amp> is accepted as well).
  • Require <head> and <body> tags
  • First tag after <head> is <meta charset=”utf-8″>
  • Include a <script async src=””></script> tag as the second child of their <head> tag (this includes and loads the AMP JS library).
  • <link rel=”canonical” href=”$SOME_URL” /> tag inside their <head> tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Add a <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside their <head> tag. It’s also recommended to include initial-scale=1.
  • Add the following in <head> tag:
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Optional meta-data

A definition in above sample code is optional. However you can use it, if you want to distribute your content in some places like google search news top stories, rich cards, critic review cards according to your content type.


As we learn about required syntax need to follow , when you create AMP web page make sure that is valid AMP. It should display correctly to mobile devices to users. You can validate your AMP pages at

Link AMP and non AMP pages

To make sure that search engines read (index) your we pages correctly. You need to add canonical link.

On normal web page –

<link rel="amphtml" href="amp-page-url" />

On AMP web page –

<link rel="canonical" href="none-amp-page-url" />


Non Amp page:
Amp Page:

Improved loading performance

Page load time, http request, page size all almost improved by more than 50%.

Note: In our next post we will going to write about AMP built-in and custom tags.

Introduction to laravel 5.x application structure

There are more than 40 PHP frameworks available. The popular frameworks are Cakephp, Zend, Symfony, Codeigniter, Yii etc. In recent times Laravel got very popular among web developers. Currently, Laravel is one of the top PHP frameworks for modern web development.

popular php frameworks
popular php frameworks

Laravel did major changes in its Application structure from 4.x to 5.x.

Application Structure

Laravel 4.X
  • app
    • commands
    • config
    • controller
    • database
    • lang
    • start
    • storage
    • database
    • tests
    • views
    • filters.php
    • routes.php
  • bootstrap
    • autoload.php
    • path.php
    • start.php
  • public
    • css
    • fonts
    • img
    • js
    • locales
    • packages
    • .htacess
    • index.php
    • robots.txt
  • vendor
    • composer.json
    • composer.lock
    • server.php
Laravel 5.X
  • app
    • Console
    • Http
      • Controllers
      • Filters
      • Requests
    • Providers
  • bootstrap
  • config
  • database
    • migrations
    • seeds
  • public
  • resources
    • lang
    • views
  • storage
    • cache
    • logs
    • meta
    • sessions
    • views
    • work

Laravel 5.x Application structure

App directory only contain application core code. App directory contains directories such as console , http , providers.

  • The Console directory contains all of the custom Artisan commands for your application.
  • The Http directory conatins code to handle request entering your application.It conatins controllers, middleware, and form requests.
    – Filters for authentication in laravel 4.x have been converted to middleware , if you want to use filter you can still use in laravel 5.x.
    The old app/models directory has been removed but if you want to use it you can implement.

You can also create other directories and classes as per your requirement inside app directory to extend your application.

Config directory contains all configuration file of application.

Database directory contains your database migration and seeds.

Resources directory contains all your appliactions views , assest and language files.

Storage directory contains compiled blade templates, file based cache , logs etc.

Why Laravel 5.x changed Application structure?

New structure help developers to easily understand and work with framework , as you can see its follows “best practice” that development community follow.

It also implemented advanced objected oriented features like name spacing etc.

New route:cache Artisan command to speed up the registration of your application routes.

Most important key point is Laravel 5.1 and above version is compatible with PHP7.

Update: Also read Read how to upgrade Laravel 4.2 to 5.0 and above version