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.

6. React JS Architecture

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.