React JS - A quick introduction tutorial

Mohammed Fazuluddin
Mohammed FazuluddinSenior Architect/Manager - Java ,J2ee | IOT | AI(Amazon Alexa, Google Dialogflow, Chatbots) | Cloud (AWS, GCP and Azure)
React JS
A Quick Introduction Tutorial
Mohammed Fazuluddin
Topics
 Overview
 React JS Features
 React JS Architecture
 React + Redux Architecture
 React JS components
 React JS Best Practices
 Pro’s and Con’s
 Useful Links
Overview
 React JS is a front-end library developed by Facebook. It is used for handling
the view layer for web and mobile apps.
 React JS allows us to create reusable UI components.
 It is currently one of the most popular JavaScript libraries and has a strong
foundation and large community behind it.
 React JS is a declarative, efficient, and flexible JavaScript library for building
user interfaces.
 It lets you compose complex UIs from small and isolated pieces of code called
“components”.
 React JS is JavaScript library used for building reusable UI components.
Overview
 React JS is a library for building composable user interfaces.
 React JS encourages the creation of reusable UI components, which present
data that changes over time.
 Lots of people use React as the V in MVC. React abstracts away the DOM from
you, offering a simpler programming model and better performance.
 React JS can also render on the server using Node, and it can power native
apps using React Native.
 React JS implements one-way reactive data flow, which reduces the
boilerplate and is easier to reason about than traditional data binding.
React JS Features
 JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React
development, but it is recommended.
 Components − React is all about components. You need to think of everything
as a component. This will help you maintain the code when working on larger
scale projects.
 Unidirectional data flow and Flux − React implements one-way data flow
which makes it easy to reason about your app. Flux is a pattern that helps
keeping your data unidirectional.
 License − React is licensed under the Facebook Inc. Documentation is
licensed under CC BY 4.0.
React JS Architecture
React + Redux Architecture
React JS components
 State-full or class-based components
 A state-full component has its state and data associated with the state.
 You can pass data inside this type of component via state or props objects.
 State-full components are also harder to support as they persist some data and
may change the global state of the app.
 State-less or function-based components
 State-less components or function-based components and what React Hooks is for
Function-based components are just simple JavaScript functions.
 State-less function-based components have some limitations and essentially must
have one global place to manage state.
React JS components
 Presentational (or high-order) components
 High-Order Component (or HOC) is essentially a design pattern, also known as a
Decorator Pattern.
 In ReactJS, a HOC is a component that wraps another component by adding extra
functionality or extra properties.
 This allows abstraction from some commonly used logic and keeps your code DRY.
 Container components
 Container components, on the other hand, have logic to set state or have functions
to emit events up to a parent component.
 The general rule of the thumb is to keep your component as simple as possible with
a Single Responsibility Principle design principle in mind, which essentially means
your component must do one thing, but do it well.
React JS Best Practices
 When using ReduxJS, split your Reducer code into smaller methods to avoid
huge JSON within your Reducer.
 Use the create-react-app generator to bootstrap your ReactJS app.
 Keep your code DRY. Don’t Repeat Yourself, but keep in mind code duplicate is
NOT always a bad thing.
 Avoid having large classes, methods or components, including Reducers.
 Use more robust managers to manage application state, such as Redux.
 Use event synchronizer, such as Redux-Thunk, for interactions with your back
end API.
 Avoid passing too many attributes or arguments. Limit yourself to five props
that you pass into your component.
React JS Best Practices
 Use React JS defaultProps and React JS propTypes.
 Use linter, break up lines that are too long.
 Keep your own jslint configuration file.
 Always use a dependency manager with a lock file, such as NPM or yarn.
 Test your commonly accessed code, code that is complex and prone to bugs.
 Use ES6 de-structuring for your props.
 Use conditional rendering.
 User `map()` to collect and render collections of components.
 Use JEST to test your React JS code.
Pro’s and Con’s
 Pro’s:
 Updates process is optimized and accelerated.
 JSX makes components/blocks code readable. It displays how components are
plugged or combined with.
 React’s data binding establishes conditions for creation dynamic applications.
 Prompt rendering. Using comprises methods to minimize number of DOM operations
helps to optimize updating process and accelerate it.
 Testable. React’s native tools are offered for testing, debugging code.
 Up to date. Facebook team supports the library. Advice or code samples can be
given by Facebook community.
 Using React+ES6/7, application gets high-tech and is suitable for high load systems.
Pro’s and Con’s
 Con’s:
 Learning curve. Being not full-featured framework it is required in-depth
knowledge for integration user interface free library into MVC framework.
 View-orientedness is one of the cons of React JS. It should be found 'Model' and
'Controller' to resolve 'View' problem.
 Not using isomorphic approach to exploit application leads to search engines
indexing problems.
 Lots of developers dislike JSX Reacts documentation, manuals are difficult for
newcomers’ understanding.
 Reacts large size library.
Useful Links
 React JS Environment setups
 https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
 Sample Examples
 https://reactjs.org/community/examples.html
Thanks
If you feel that it is helpful and worthy to share with others then please like and share the same.
1 de 15

Recomendados

React js por
React jsReact js
React jsRajesh Kolla
1.2K vistas25 diapositivas
[Final] ReactJS presentation por
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation洪 鹏发
30.2K vistas35 diapositivas
Introduction to React JS for beginners por
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners Varun Raj
4.3K vistas21 diapositivas
Introduction to ReactJS por
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJSKnoldus Inc.
2.3K vistas14 diapositivas
Reactjs por
Reactjs Reactjs
Reactjs Neha Sharma
10.5K vistas27 diapositivas
Introduction to React JS por
Introduction to React JSIntroduction to React JS
Introduction to React JSArno Lordkronos
32.6K vistas21 diapositivas

Más contenido relacionado

La actualidad más candente

Its time to React.js por
Its time to React.jsIts time to React.js
Its time to React.jsRitesh Mehrotra
3.8K vistas19 diapositivas
React workshop presentation por
React workshop presentationReact workshop presentation
React workshop presentationBojan Golubović
6.9K vistas29 diapositivas
Introduction to React JS for beginners | Namespace IT por
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITnamespaceit
1.5K vistas17 diapositivas
Intro to React por
Intro to ReactIntro to React
Intro to ReactJustin Reock
2.4K vistas45 diapositivas
Intro to React por
Intro to ReactIntro to React
Intro to ReactEric Westfall
2.1K vistas28 diapositivas
Introduction to React por
Introduction to ReactIntroduction to React
Introduction to ReactRob Quick
949 vistas29 diapositivas

La actualidad más candente(20)

Introduction to React JS for beginners | Namespace IT por namespaceit
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit1.5K vistas
Introduction to React por Rob Quick
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick949 vistas
React js programming concept por Tariqul islam
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam1.4K vistas
React workshop por Imran Sayed
React workshopReact workshop
React workshop
Imran Sayed1.8K vistas
Introduction to react_js por MicroPyramid .
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .1.7K vistas
React JS: A Secret Preview por valuebound
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound3.3K vistas
A Brief Introduction to React.js por Doug Neiner
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
Doug Neiner5.8K vistas

Similar a React JS - A quick introduction tutorial

The following features are associated with reacting to lifecycle methods. por
The following features are associated with reacting to lifecycle methods.The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.Wikiance
11 vistas7 diapositivas
React Js Simplified por
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
344 vistas30 diapositivas
React-JS.pptx por
React-JS.pptxReact-JS.pptx
React-JS.pptxAnmolPandita7
439 vistas23 diapositivas
React Js training Institute in Bangalor por
React Js training  Institute  in BangalorReact Js training  Institute  in Bangalor
React Js training Institute in BangalorMUDDUKRISHNA14
7 vistas1 diapositiva
React Js Institute in Bangalore content por
React Js Institute in Bangalore contentReact Js Institute in Bangalore content
React Js Institute in Bangalore contentMUDDUKRISHNA14
3 vistas1 diapositiva
React Js Institute in Bangalore por
React Js Institute in BangaloreReact Js Institute in Bangalore
React Js Institute in BangaloreMUDDUKRISHNA14
4 vistas1 diapositiva

Similar a React JS - A quick introduction tutorial(20)

The following features are associated with reacting to lifecycle methods. por Wikiance
The following features are associated with reacting to lifecycle methods.The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.
Wikiance 11 vistas
React Js Simplified por Sunil Yadav
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav344 vistas
React Js training Institute in Bangalor por MUDDUKRISHNA14
React Js training  Institute  in BangalorReact Js training  Institute  in Bangalor
React Js training Institute in Bangalor
MUDDUKRISHNA147 vistas
React Js Institute in Bangalore content por MUDDUKRISHNA14
React Js Institute in Bangalore contentReact Js Institute in Bangalore content
React Js Institute in Bangalore content
MUDDUKRISHNA143 vistas
Achieversit Training Institute in Bangalore 4 por MUDDUKRISHNA14
Achieversit Training Institute in Bangalore 4Achieversit Training Institute in Bangalore 4
Achieversit Training Institute in Bangalore 4
MUDDUKRISHNA146 vistas
React js vs react native a comparative analysis por Shelly Megan
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
Shelly Megan49 vistas
Why Use React Js A Complete Guide (1).pdf por Katy Slemon
Why Use React Js A Complete Guide (1).pdfWhy Use React Js A Complete Guide (1).pdf
Why Use React Js A Complete Guide (1).pdf
Katy Slemon161 vistas
React gsg presentation with ryan jung & elias malik por Lama K Banna
React   gsg presentation with ryan jung & elias malikReact   gsg presentation with ryan jung & elias malik
React gsg presentation with ryan jung & elias malik
Lama K Banna91 vistas
React vs. angular a comprehensive guideline for choosing right front-end fr... por Katy Slemon
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon109 vistas

Más de Mohammed Fazuluddin

DOMAIN DRIVER DESIGN por
DOMAIN DRIVER DESIGNDOMAIN DRIVER DESIGN
DOMAIN DRIVER DESIGNMohammed Fazuluddin
24 vistas10 diapositivas
Terraform Basics por
Terraform BasicsTerraform Basics
Terraform BasicsMohammed Fazuluddin
1.9K vistas12 diapositivas
Rest API Security - A quick understanding of Rest API Security por
Rest API Security - A quick understanding of Rest API SecurityRest API Security - A quick understanding of Rest API Security
Rest API Security - A quick understanding of Rest API SecurityMohammed Fazuluddin
1.2K vistas21 diapositivas
Software architectural patterns - A Quick Understanding Guide por
Software architectural patterns - A Quick Understanding GuideSoftware architectural patterns - A Quick Understanding Guide
Software architectural patterns - A Quick Understanding GuideMohammed Fazuluddin
733 vistas26 diapositivas
Mule ESB - An Enterprise Service Bus por
Mule ESB - An Enterprise Service BusMule ESB - An Enterprise Service Bus
Mule ESB - An Enterprise Service BusMohammed Fazuluddin
302 vistas18 diapositivas
Docker - A Quick Introduction Guide por
Docker - A Quick Introduction GuideDocker - A Quick Introduction Guide
Docker - A Quick Introduction GuideMohammed Fazuluddin
163 vistas17 diapositivas

Más de Mohammed Fazuluddin(20)

Rest API Security - A quick understanding of Rest API Security por Mohammed Fazuluddin
Rest API Security - A quick understanding of Rest API SecurityRest API Security - A quick understanding of Rest API Security
Rest API Security - A quick understanding of Rest API Security
Mohammed Fazuluddin1.2K vistas
Software architectural patterns - A Quick Understanding Guide por Mohammed Fazuluddin
Software architectural patterns - A Quick Understanding GuideSoftware architectural patterns - A Quick Understanding Guide
Software architectural patterns - A Quick Understanding Guide
Mohammed Fazuluddin733 vistas

Último

SAP FOR TYRE INDUSTRY.pdf por
SAP FOR TYRE INDUSTRY.pdfSAP FOR TYRE INDUSTRY.pdf
SAP FOR TYRE INDUSTRY.pdfVirendra Rai, PMP
24 vistas3 diapositivas
Quality Engineer: A Day in the Life por
Quality Engineer: A Day in the LifeQuality Engineer: A Day in the Life
Quality Engineer: A Day in the LifeJohn Valentino
6 vistas18 diapositivas
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI... por
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Marc Müller
37 vistas83 diapositivas
SUGCON ANZ Presentation V2.1 Final.pptx por
SUGCON ANZ Presentation V2.1 Final.pptxSUGCON ANZ Presentation V2.1 Final.pptx
SUGCON ANZ Presentation V2.1 Final.pptxJack Spektor
22 vistas34 diapositivas
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -... por
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...Deltares
6 vistas15 diapositivas
Fleet Management Software in India por
Fleet Management Software in India Fleet Management Software in India
Fleet Management Software in India Fleetable
11 vistas1 diapositiva

Último(20)

Quality Engineer: A Day in the Life por John Valentino
Quality Engineer: A Day in the LifeQuality Engineer: A Day in the Life
Quality Engineer: A Day in the Life
John Valentino6 vistas
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI... por Marc Müller
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Dev-Cloud Conference 2023 - Continuous Deployment Showdown: Traditionelles CI...
Marc Müller37 vistas
SUGCON ANZ Presentation V2.1 Final.pptx por Jack Spektor
SUGCON ANZ Presentation V2.1 Final.pptxSUGCON ANZ Presentation V2.1 Final.pptx
SUGCON ANZ Presentation V2.1 Final.pptx
Jack Spektor22 vistas
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -... por Deltares
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...
Deltares6 vistas
Fleet Management Software in India por Fleetable
Fleet Management Software in India Fleet Management Software in India
Fleet Management Software in India
Fleetable11 vistas
FIMA 2023 Neo4j & FS - Entity Resolution.pptx por Neo4j
FIMA 2023 Neo4j & FS - Entity Resolution.pptxFIMA 2023 Neo4j & FS - Entity Resolution.pptx
FIMA 2023 Neo4j & FS - Entity Resolution.pptx
Neo4j7 vistas
DSD-INT 2023 Salt intrusion Modelling of the Lauwersmeer, towards a measureme... por Deltares
DSD-INT 2023 Salt intrusion Modelling of the Lauwersmeer, towards a measureme...DSD-INT 2023 Salt intrusion Modelling of the Lauwersmeer, towards a measureme...
DSD-INT 2023 Salt intrusion Modelling of the Lauwersmeer, towards a measureme...
Deltares5 vistas
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra... por Marc Müller
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra....NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
Marc Müller38 vistas
Software evolution understanding: Automatic extraction of software identifier... por Ra'Fat Al-Msie'deen
Software evolution understanding: Automatic extraction of software identifier...Software evolution understanding: Automatic extraction of software identifier...
Software evolution understanding: Automatic extraction of software identifier...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge... por Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
Deltares17 vistas
The Era of Large Language Models.pptx por AbdulVahedShaik
The Era of Large Language Models.pptxThe Era of Large Language Models.pptx
The Era of Large Language Models.pptx
AbdulVahedShaik5 vistas
Dapr Unleashed: Accelerating Microservice Development por Miroslav Janeski
Dapr Unleashed: Accelerating Microservice DevelopmentDapr Unleashed: Accelerating Microservice Development
Dapr Unleashed: Accelerating Microservice Development
Miroslav Janeski10 vistas
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium... por Lisi Hocke
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Lisi Hocke30 vistas
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports por Ra'Fat Al-Msie'deen
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug ReportsBushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports
BushraDBR: An Automatic Approach to Retrieving Duplicate Bug Reports
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ... por Donato Onofri
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Unmasking the Dark Art of Vectored Exception Handling: Bypassing XDR and EDR ...
Donato Onofri825 vistas

React JS - A quick introduction tutorial

  • 1. React JS A Quick Introduction Tutorial Mohammed Fazuluddin
  • 2. Topics  Overview  React JS Features  React JS Architecture  React + Redux Architecture  React JS components  React JS Best Practices  Pro’s and Con’s  Useful Links
  • 3. Overview  React JS is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps.  React JS allows us to create reusable UI components.  It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.  React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces.  It lets you compose complex UIs from small and isolated pieces of code called “components”.  React JS is JavaScript library used for building reusable UI components.
  • 4. Overview  React JS is a library for building composable user interfaces.  React JS encourages the creation of reusable UI components, which present data that changes over time.  Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance.  React JS can also render on the server using Node, and it can power native apps using React Native.  React JS implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.
  • 5. React JS Features  JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.  Components − React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.  Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.  License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.
  • 7. React + Redux Architecture
  • 8. React JS components  State-full or class-based components  A state-full component has its state and data associated with the state.  You can pass data inside this type of component via state or props objects.  State-full components are also harder to support as they persist some data and may change the global state of the app.  State-less or function-based components  State-less components or function-based components and what React Hooks is for Function-based components are just simple JavaScript functions.  State-less function-based components have some limitations and essentially must have one global place to manage state.
  • 9. React JS components  Presentational (or high-order) components  High-Order Component (or HOC) is essentially a design pattern, also known as a Decorator Pattern.  In ReactJS, a HOC is a component that wraps another component by adding extra functionality or extra properties.  This allows abstraction from some commonly used logic and keeps your code DRY.  Container components  Container components, on the other hand, have logic to set state or have functions to emit events up to a parent component.  The general rule of the thumb is to keep your component as simple as possible with a Single Responsibility Principle design principle in mind, which essentially means your component must do one thing, but do it well.
  • 10. React JS Best Practices  When using ReduxJS, split your Reducer code into smaller methods to avoid huge JSON within your Reducer.  Use the create-react-app generator to bootstrap your ReactJS app.  Keep your code DRY. Don’t Repeat Yourself, but keep in mind code duplicate is NOT always a bad thing.  Avoid having large classes, methods or components, including Reducers.  Use more robust managers to manage application state, such as Redux.  Use event synchronizer, such as Redux-Thunk, for interactions with your back end API.  Avoid passing too many attributes or arguments. Limit yourself to five props that you pass into your component.
  • 11. React JS Best Practices  Use React JS defaultProps and React JS propTypes.  Use linter, break up lines that are too long.  Keep your own jslint configuration file.  Always use a dependency manager with a lock file, such as NPM or yarn.  Test your commonly accessed code, code that is complex and prone to bugs.  Use ES6 de-structuring for your props.  Use conditional rendering.  User `map()` to collect and render collections of components.  Use JEST to test your React JS code.
  • 12. Pro’s and Con’s  Pro’s:  Updates process is optimized and accelerated.  JSX makes components/blocks code readable. It displays how components are plugged or combined with.  React’s data binding establishes conditions for creation dynamic applications.  Prompt rendering. Using comprises methods to minimize number of DOM operations helps to optimize updating process and accelerate it.  Testable. React’s native tools are offered for testing, debugging code.  Up to date. Facebook team supports the library. Advice or code samples can be given by Facebook community.  Using React+ES6/7, application gets high-tech and is suitable for high load systems.
  • 13. Pro’s and Con’s  Con’s:  Learning curve. Being not full-featured framework it is required in-depth knowledge for integration user interface free library into MVC framework.  View-orientedness is one of the cons of React JS. It should be found 'Model' and 'Controller' to resolve 'View' problem.  Not using isomorphic approach to exploit application leads to search engines indexing problems.  Lots of developers dislike JSX Reacts documentation, manuals are difficult for newcomers’ understanding.  Reacts large size library.
  • 14. Useful Links  React JS Environment setups  https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm  Sample Examples  https://reactjs.org/community/examples.html
  • 15. Thanks If you feel that it is helpful and worthy to share with others then please like and share the same.