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.
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.