Dyanaimcs of business and economics unit 2

Dyanaimcs of business and economics

1. Venu.K AP/CSE Unit-IV Reactjs

2. Introduction React JS is a JavaScript library for creating user interfaces React makes development of UI components easy and modular React JS was created by Jordan Walke, a software engineer at Facebook  ReactJs is open source

3. Key features of Reactjs Component-based:  Components are the smallest unit in a React application. Anything that we want to render is rendered through components. Components help in maintainability Virtual DOM:  React uses virtual DOM concept for DOM manipulation which improves the performance of the application Unidirectional data flow:   React’s one-way data flow (also called one-way binding) keeps everything modular and fast and easy for debugging. JSX syntax:  React used JSX syntax which is similar to XML and HTML syntax which makes it easy for writing markup and binding events in components 

4. Applications using Reactjs

5. Installation of Reactjs 1. Install the node version 14.0 or Higher 2. Give the following command in command prompt npx create-react-app projectname Example: npx create-react-app sample 3. Navigate to the project folder in command prompt cd sample 4. To run the react application give the command in command prompt as npm start 5. Open browser and specify the url as localhost:3000 Note: React will run in the default port number 3000) And if proxy denies installation try command 1.npm config set registry http://registry.npmjs.org/ 2. npm config rm proxy 3. npm config rm https-proxy

6. Installation of Reactjs

7. Installation of Reactjs

8. index.js

9. Important points Index.html is the first file gets run App is the default parent component in react Index.js says what are the components to be rendered App.js says what content to be rendered in app component index .js React.StrictMode is a  helper functionality  provided by React which allows us to write better React codes The createRoot () method takes the root element as a parameter and creates a React root. The root has a render () method that can be used to render a React element into the DOM.

10. Installation of Reactjs

11. Installation of Reactjs Files Purpose node_modules All the node module dependencies are created in this folder public This folder contains the public static assets of the application public/index.html This is the first page that gets loaded when we run the application src All application related files/folders are created in this folder src/index.js This is the entry point of the application package.json Contains the dependencies of the React application

12. JSX JSX stands for JavaScript XML. JSX is syntax extension to javascript and is used to define the react components It allows us to define react elements using syntax that looks similar to HTML

13. JSX- Example:1

14. JSX- Example:2 Note: Inside the return statement if we want to return more than one element means put that in <div></div> tag because return will always return a single element

15. JSX- Example:3

16. Applying style in JSX- Example:4

17. Conditional statement in JSX- Example:5

18. Image in JSX- Example:6

19. Components in React

20. Components in Reactjs React components are the fundamental unit of any React application. In this approach, the entire application is divided into a small logical group of code, which is known as components A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier Each component exists in the same space, but they work independently from one another and merge all in a parent component Types of Components Functional Components Class Components

21. Components in Reactjs Virtual DOM is an abstraction of actual DOM where components are the nodes. We can programmatically modify virtual DOM by updating components. These updates are internally handled by React and in turn, updated in actual DOM.

22. Components in Reactjs

23. 1. Function Components Function components are created with simple javascript function. Note: When creating a React component, the component's name  MUST  start with an UPPER CASE LETTER. Step 1: Create a new js file with new component name (Example: Car.js) Step 2: Create a function inside Car.js file with return statement. Step 3: Export the newly created component

24. 1. Function Components Step 4: Goto Index.js file and include the import statement for newly created component (Example: import Car from ‘./Car’;) Step 5: Inside render function include the newly created component

25. 2. Class Components A class component must include extends React.Component The component requires render() method to return HTML> Step 1: Create a new js file with new component name (Example: First.js) Step 2: Create a class inside First.js file with render() Step 3: Export the newly created component

26. 2. Class Components Step 4: Goto Index.js file and include the import statement for newly created component (Example: import First from ‘./First’;) Step 5: Inside render function include the newly created component

27. Nested Components A component that is created and render inside another component is called as nested component.

28. Constructor in React

29. Constructor in Reactjs The constructor is a method used to initialize an object's state in a class The constructor in a React component is called before the component is mounted. super(props)   method should be used before any other statement inside constructor If super(props)  is not used then this.props   will be undefined in the constructor In React, constructors are mainly used for two purposes: It used for initializing the local state of the component by assigning an object to this.state. It used for binding event handler methods that occur in your component. Syntax: Constructor(props){        super(props);   }  

30. Props and States in React

31. Props in Reactjs Props stand for " Properties. " They are  read-only components Props are arguments passed into React components It is an object which stores the value of attributes of a tag and work similar to the HTML attributes Props are  immutable  so we cannot modify the props from inside the component

32. Props in Reactjs Example in Function Component

33. Props in Reactjs

34. Props in Reactjs Example in Class Component

35. Props in Reactjs In Class component use the word this.props.name

36. State in Reactjs React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. Creating the state Object The state object is initialized in the constructor The state object can contain as many properties Refer to the state object anywhere in the component by using the this.state.propertyname Refer to the state object in the render() method To change a value in the state object, use the this.setState() method.

37. State in Reactjs- Example:1

38. State in Reactjs- Example:2

39. setState in Reactjs- Example:3

40. State in Reactjs- Example:3 Before clicking button : After clicking button: (The component re-renders and output changes as follows)

41. Props Validation

42. Props Validation Props are an important mechanism for passing the read-only attributes to React components Props validation is a tool that will help the developers to avoid future bugs and problems.  React components used special property  PropTypes which helps to validate the datatypes componentname.propTypes  is used for props validation in react component The defaultProps is a React component property that allows you to set default values for the props argument Syntax:

43. Props Validator

44. Props Validation-Example

45. Props Validation-Example

46. Props Validation-Example

47. Props Validation-output Array value is changed to string In output page click on “Inspect Element” and see the warning

48. Props Vs State

49. Components API

50. Component API ReactJS component is a top-level API. It makes the code completely individual and reusable in the application. It includes various methods for: Creating elements Transforming elements Fragments Three most common methods available in React API setState() forceUpdate() findDOMNode() setState() This method is used to update the state of the component (Refer Previous examples for setState())

51. Component API 2. forceUpdate() This method allows us to update the component manually.

52. Component API 3. findDOMNode() ReactDOM.findDOMNode()  method use to find or access the underlying DOM node. Syntax ReactDOM.findDOMNode(component);   For DOM manipulation, need to import import ReactDOM  from ' react-dom '

53. Component API

54. Components Life Cycle

55. Components Life Cycle In ReactJS, every component creation process involves various lifecycle method The lifecycle of the component is divided into  four phases . They are: Initial Phase Mounting Phase Updating Phase Unmounting Phase 1. Initial Phase It is the birth phase of the lifecycle of a ReactJS component This phase happens before the component reaches DOM getDefaultProps() It is used to specify the default value of this.props . It is invoked before the creation of the component

56. Components Life Cycle getInitialState() It is used to specify the default value of this.state . It is invoked before the creation of the component. 2. Mounting Phase In this phase, the instance of a component is created and inserted into the DOM. ComponentWillMount() This is invoked immediately before a component gets rendered into the DOM. componentDidMount() This is invoked immediately after a component gets rendered and placed on the DOM. render() This method is defined in each and every component. It is responsible for returning a single root HTML node element.

57. Components Life Cycle 3. Updating Phase In this phase, new Props and change State are obtained. componentWillRecieveProps() It is invoked when a component receives new props. This is invoked after this.setState() method. componentWillUpdate() It is invoked just before the component updating occurs. componentDidUpdate() It is invoked immediately after the component updating occurs 4. Unmounting Phase It is the final phase of the react component lifecycle It is called when a component instance is destroyed and unmounted from the DOM componentWillUnmount() This method is invoked immediately before a component is destroyed and unmounted permanently.

58. Components Life Cycle

59. Components Life Cycle

60. Components Life Cycle

61. Components Life Cycle After Clicking the button

62. Events

63. Events An event is an action that could be triggered as a result of the user action  React has its own event handling system which is very similar to handling events on DOM elements.  The react event handling system is known as Synthetic Events. In react, we cannot return  false  to prevent the default behavior. We must call  preventDefault() event explicitly to prevent the default behavior

64. Events

65. Events

66. React Forms

67. React Forms React offers a stateful, reactive approach to build a form.  There are mainly two types of form input in React. Uncontrolled component Controlled component Uncontrolled Component The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data.  Here, the HTML elements maintain their own state that will be updated when the input value changes. This uses “ref” to get form values from the DOM There is no need to write an event handler for every state update.

68. Uncontrolled Component

69. Uncontrolled Component

70. Controlled Component Controlled Component In the controlled component, the input form element is handled by the component rather than the DOM. Here, the mutable state is kept in the state property and will be updated only with  setState()  method. Controlled components have functions that govern the data passing into them on every  onChange event When the  submit button is clicked the data is saved to state and updated with setState() method.    preventDefault () is an event in react which is used to handle the default behavior in event handling mechanism.

71. Controlled Component

72. Controlled Component

73. Controlled Vs Uncontrolled Controlled Component Uncontrolled Component The component is under control of the component’s state. Components are under the control of DOM. Internal state is not maintained Internal state is maintained It accepts the current value as props We access the values using refs Have better control on the form data and values Has very limited control over form values and data

74. Conditional Rendering

75. Conditional rendering Ways for conditional rendering in react   if Ternary operator Logical && operator Switch Case Operator 1. If-Else Syntax: if(Condition) statement; else statement;

76. 1. If-Else Example

77. 2. Ternary Operator Syntax: condition ?   true  :  false   

78. 3.Logical operator Syntax: ( expression 1 && expression 2)

79. 4.Switch case Syntax: switch(choice) { case 1: statement… }

80. Thank You