Scribd
Upload
174 views

Front-End Web Development With Reactjs: Presented By: Ajay Kumar Gupta B.Tech C.E. 5 Sem

This document provides an overview of front-end web development with Reactjs. It discusses the history of web browsers from 1997 to the present. It then covers the steps to build a website, including requirements gathering, design, development, testing, deployment, and monitoring. Next, it outlines the stack of technologies used in frontend development, including JavaScript frameworks like Reactjs, module bundlers, and CSS frameworks. It compares the popularity of Reactjs, Angular, and Vuejs using Git stars. Finally, it introduces Reactjs and discusses its core features like the virtual DOM, Flux architecture, pros and cons.

Uploaded by

Ajay Kumar Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
174 views

Front-End Web Development With Reactjs: Presented By: Ajay Kumar Gupta B.Tech C.E. 5 Sem

This document provides an overview of front-end web development with Reactjs. It discusses the history of web browsers from 1997 to the present. It then covers the steps to build a website, including requirements gathering, design, development, testing, deployment, and monitoring. Next, it outlines the stack of technologies used in frontend development, including JavaScript frameworks like Reactjs, module bundlers, and CSS frameworks. It compares the popularity of Reactjs, Angular, and Vuejs using Git stars. Finally, it introduces Reactjs and discusses its core features like the virtual DOM, Flux architecture, pros and cons.

Uploaded by

Ajay Kumar Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Front-end Web

Development with
Presented By:
Reactjs
Ajay Kumar Gupta
B.Tech C.E. 5th sem.
Web Browsers

Safari Chrome
Netscape
Firefox HTML5
Opera
IE
1997 2005-2006 201X

< =1995 2003-2004 2008

Adobe XHR
Flash 2
Desktop vs Mobile
Steps to build a
website
Getting Requirements 02 Development
Collect all client requirements Coding
Design UX/UI Writing Unit Test

01 03

Production Quality Control


Testing
Deployment Fix bugs

Monitoring
04
Steps to develop a
website
Frontend Web - Stack Of
Technologies Module Bundler

4 ● Webpack , Parcel, Rollup


● Browserify
Javascript Framework ● Gulp, Grunt

● Reactjs , Angularjs, Vuejs 3


● Redux
● Jest, Enzyme CSS
Framework
2 ● Bootstrap , Foundation, Ant
● SASS, Less, PostCSS
HTML + CSS +
Javascript
● jQuery , jQuery UI 1
● Underscore
Git Star Comparison

Reactjs

Angular

Vuejs
Reactjs Introduction

A Javascript Library for building User Interface


Introduction
export class Instructor extends React.Component {
render() {
return (
<Profile>
<Fullname>Ajay Kumar Gupta</Fullname>
<Work>TA at Sendo.vn</Work>
<Work>Poonrima</Work>
<Email>[email protected]</Email>
<Phone>0937.942.974</Phone>
</Profile>
);
}
}
Introduction
export class App extends React.Component
{ render() {
return (
<Instructor />
);
}
}
Reactjs In Developer Mind

Nodejs

Redux

Reactjs

Webpack
NPM Download
Comparison
Reactjs

Angular

Vuejs
Reactjs Core Features - Virtual
DOM REAL DOM

VIRTUAL DOM
Reactjs Core Features - Flux
Achitecture
Reactjs Core Features - Flux
Achitecture
Reactjs Pros vs
Cons
Easy to Learn Hard to Master

Virtual DOM JSX

Component Design First Complex Comp. Design

One-way Data Binding Flux Pattern

Debugging View Layer


Q&A

You might also like