Downloaded 14 times
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=640&height=640&fit=bounds)
React-JS.pptx
- 1. React js PPT by- Rohit Kumar Anmol Pandita Akshit Sodhi
- 2. | What isReacts js | React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is created by Facebook. A React application is made of multiple components, each responsible for rendering a small, reusable piece of HTML. Components can be nested within other components to allow complex applications to be built out of simple building blocks. A component may also maintain an internal state – for example, a TabList component may store a variable corresponding to the currently open tab. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes your code more predictable and easier to debug.
- 3. | How toUse & Environment Setup | React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. Prerequisites: Download Node packages with their latest version. Example: Create a new React project by using the command below: Syntax: npx create-react-app app_name And to run the React app we can use the command “npm start” and it’ll load the react app in local host i.e. localhost:3000
- 4. | Components | Reactcomponents let you break up the user interface into separate pieces that can then be reused and handled independently. A React component takes an optional input and returns a React element which is rendered on the screen. A React component can be either “stateful” or “stateless.” “Stateful” components are of the class type, while “stateless” components are of the function type.
- 5. | Creating aSimple Component | In React, you don’t need to create a class or functional-based component with lines of code just to print "Hello World." The component can be created with ES6 syntax in a single line, In this example, the ES6 arrow function has been used. This is the smallest component we can create for a React app. In the example on the left hand side, the component is created in the same file and consumed within the render() function as <HelloWorld /> So when you run this example, the output will be the static string.
- 6. | Creating aClass-Based Component | In React, a component can also be written using ES6 classes syntax, using the arrow function i.e. “=>” Class-based components are a widely used approach to creating components in React if an app requires the state to be used. Create a class-based component like this: As you can see in the above example, Component is being imported from the package react, which allows us to convert the class into the component using ES6 syntax. Apart from the component keyword, the file also has an additional section called render () that is the function used to render the various HTML elements into the DOM once the business logic has been implemented. You can embed another class-based child component into any class- based component as, explained in
- 7. | Creating aFunction-Based Component | You can also create a component in React using the function-based approach, which uses the normal JavaScript function. To use a function-based component, export the function using the export keyword. The functional component can look like this: As you can see in the example, a function-based component is created called FunctionComponent, and from return (), the element is returned just as it would be from a class-based component. One thing to notice in the example is that the arrow function has been used to create the component; hence, we can also use the keyword function, as explained below. You can choose any one of the options shown to create a function-based component that can be exported and consumed into other components.
- 8. | Choosing Component| Well, it completely depends on your structural requirements, but there are advantages to each. Use a class component if you want to use local state, different lifecycle hooks, multiple event handlers, or dynamic state values based on user activity. Use a function component when you don’t need to write business logic and just need to render specific UI elements based on the props value,. Using hooks, you can use state into the function component as well. | Conclusion | In this part, you have learned that what a component is and how to create a component using the class-based approach and the function-based approach. You can choose either of those two options to create a component based on the business requirements of your ReactJs app.
- 9. | Introducing Hooks| Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This new function useState is the first “Hook” we’ll learn about. No Breaking Changes Before we continue, note that Hooks are: • Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to. • 100% backwards-compatible. Hooks don’t contain any breaking changes. • Available now. Hooks are now available with the release of v16.8.0. There are no plans to remove classes from React. Hooks let you use more of React’s features without classes.
- 10. Hooks don’t replaceyour knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community. In many cases it’s not possible to break components into smaller ones because the stateful logic is all over the place. It’s also difficult to test them. This is one of the reasons many people prefer to combine React with a separate state management library. However, that often introduces too much abstraction, requires you to jump between different files, and makes reusing components more difficult. To solve this, Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods. You may also opt into managing the component’s local state with a reducer to make it more predictable. | Hooks |
- 11. | Advantages OfHooks | For React developers, Hooks convey ample benefits as follows: • It revolutionizes the way you write components • You can write concise and clearer code. • Hooks are simpler to work with and test. Code would appear cleaner and easier to read. • A related logic could be tightly coupled inside a custom hook. • It simplifies how to make code more composable and reusable. • Unlike HOCs, they don’t create another element in DOM. • Hooks would work more efficiently with the future React optimizations. For example, it would work ahead of time compilation as well as components folding. • Components folding may be implemented in the future. It suggests that for code elimination at compile-time, hooks are simple to reuse the stateful logic.
- 12. | State andProps | State The state is an updatable structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event. It is the heart of the react component which determines the behaviour of the component and how it will render. A state must be kept as simple as possible. It represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly. Props Props are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It allows passing data from one component to other components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component.
- 13.
- 14.
- 15. | Redux | ReactRedux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the Redux store, checks to see if the data which your component wants have changed, and re-renders your component. Now Redux is basically a global store. It doesn’t matter where you push things in to the Redux store as you can see in the above picture you have access to it everywhere you can access this from every single component so its actually two way communication you can push anything into the global store at any point and you can also pull things from that global store at any point. Why is Redux good with React? This is because React was designed with the concept of states and lifecycles. And in React, state can also not be modified directly, it can only be done via the function setState. This makes it easier for Redux concepts to be applied because they share they same understanding and behavior of a state object.
- 16.
- 17. How Redux works? Theway Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. There are three core components in Redux — actions, store, and reducers. What are Redux actions? Simply put, Redux actions are events. They are the only way you can send data from your application to your Redux store. The data can be from user interactions, API calls, or even form submissions. Actions are plain JavaScript objects that must have a type property to indicate the type of action to be carried out, and a payload object that contains the information that should be used to change the state. Actions are created via an action creator, which in simple terms is a function that returns an action. And actions are executed using the store.dispatch() method which sends the action to the store. What are Redux reducers? Reducers are pure functions that take the current state of an application, perform an action, and return a new state. The reducer handles how the state (application data) will change in response to an action. “A pure function is a function that will always return the same value if given the same parameters. i.e. the function depends on only the parameters and no external data.” It is based on the reduce function in JavaScript, where a single value is calculated from multiple values after a callback function has been carried out.
- 18. What is ReduxStore? The store is a “container” (really a JavaScript object) that holds the application state, and the only way the state can change is through actions dispatched to the store. Redux allows individual components connect to the store and apply changes to it by dispatching actions. It is highly recommended to keep only one store in any Redux application. You can access the state stored, update the state, and register or unregister listeners via helper methods. Redux middleware Redux allows developers to intercept all actions dispatched from components before they are passed to the reducer function. This interception is done via middleware. Building on the example login component discussed in the last section, we might want to sanitize the user’s input before it reaches our store for further processing. This can be achieved via Redux middleware. Technically, middleware are functions that call the next method received in an argument after processing the current action. These are called after every dispatch. Why use Redux? When using Redux with React, states will no longer need to be lifted up. This makes it easier for you to trace which action causes any change. As you can see in the example above, the component does not need to provide any state or method for its children components to share data among themselves. Everything is handled by Redux. This greatly simplifies the app and makes it easier to maintain. This is the primary reason why you should use Redux, but it’s not the only benefit. Take a look at the list below for a summary of what you stand to gain by using Redux for state management.
- 19. | Firebase | Itis a mobile application development platform from Google with powerful features for developing, handling, and enhancing applications. Firebase is a backend platform for building web and mobile applications. Firebase is fundamentally a collection of tools developers can rely on, creating applications and expanding them based on demand. Firebase aims to solve three main problems for developers: • Build an app, fast • Release and monitor an app with confidence • Engage users, Developers relying on this platform get access to services that they would have to develop themselves, and it enables them to lay focus on delivering robust application experiences. Some of the Google Firebase platform’s standout features include databases, authentication, push messages, analytics, file storage, and much more. Since the services are cloud-hosted, developers can smoothly perform on-demand scaling without any hassle. Firebase is currently among the top app development platforms relied upon by developers across the globe.
- 20. | Advantages | 1.Free to start 2. Development speed 3. End-to-end app development platform 4. Powered by Google 5. Developers can focus on frontend development 6. It’s serverless 7. It offers machine learning capabilities 8. Generates traffic to your apps 9. Error monitoring 10.Security 1. It’s not Open-Source 2. Vendor Lock-In 3. Firebase does not work in many countries 4. Only NoSQL databases are available 5. Slow Queries 6. Not all services are free to start 7. It’s not cheap and pricing is difficult to forecast 8. Runs only on Google Cloud 9. Dedicated Servers & Enterprise Support are not an option 10.Does not provide GraphSQL APIs | Limitations |
- 21. Firebase Privacy Firebase PrivacyPolicy supports GDRP – General Data Protection Regulation from European Union and CCPA- California Consumer Privacy act. Also, Firebase complies with multiple ISO and SOC certifications, including 27001, 27017, 27018, SOC1, SOC2, and SOC3. Firebase feeds service data to Google for non-Firebase services. This option is selected by default; to avoid it; users must uncheck the box. Firebase Build Features Build is an expansive feature set of Firebase with various components that enable developers to stay on top of their application development requirements. Authentication is a Firebase feature offering ready-to-use UI libraries, backends, and convenient SDKs for user application authentication. Authentication is supported through phone numbers, passwords, and providers such as Google, Twitter, Facebook, and others. Authentication enjoys integration with different Firebase services, and it makes use of OpenID Connect and OAuth 2.0 and allows custom backend integration. Hosting Firebase has various scalable and agile hosting features for Microservices, web apps, and several other content types. Content can be hosted across different categories, and users have the ability to avail SSL protection and single-click rollbacks. (34)
- 22. | Advantages ofReact JS| •Intuitive ReactJS is extremely intuitive to work with and provides interactivity to the layout of any UI. Plus, it enables fast and quality assured application development that in turn saves tome for both - clients and developers. •Declarative ReactJS enables significant data changes that result in automatic alteration in the selected parts of user interfaces. Owing to this progressive functionality, there is no additional function that you need to perform to update your user interface. •Provides Reusable Components ReactJS provides reusable components that developers have the authority to reuse and create a new application . Reusability is exactly like a remedy for developers. This platform gives the developers the authority to reuse the components build for some other application having the same functionality. Thereby, reducing the development effort and ensuring a flawless performance. •JavaScript library A strong blend of JavaScript and HTML syntax is always used, which automatically simplifies the entire process of writing code for the planned project. The JS library consists several functions including one that converts the HTML components into required functions and transforms the entire project so that it is easy to understand. •Components Support ReactJS is a perfect combination of JavaScript and HTML tags. The usage of the HTML tags and JS codes, make it easy to deal with a vast set of data containing the document object model. During this time, ReactJS works as a mediator which represents the DOM and assists to decide which component needs changes to get the exact results.
- 23.