React JS - A quick introduction tutorial
8 likes8,656 views
This document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.
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.