React JS - A quick introduction tutorial

React JS - A quick introduction tutorial

• 1.
  React JS A QuickIntroduction Tutorial Mohammed Fazuluddin
• 2.
  Topics  Overview  ReactJS Features  React JS Architecture  React + Redux Architecture  React JS components  React JS Best Practices  Pro’s and Con’s  Useful Links
• 3.
  Overview  React JSis 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 JSis 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 + ReduxArchitecture
• 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 BestPractices  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 BestPractices  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  ReactJS Environment setups  https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm  Sample Examples  https://reactjs.org/community/examples.html
• 15.
  Thanks If you feelthat it is helpful and worthy to share with others then please like and share the same.