Developing Solutions for Microsoft Azure: App Service Web Apps

 Question(1): Which code editors have extensions available to manage App Services?

Ans:

Question(2):

What are the options for deploying your application?

Ans:

Question(3)

:

Which versions of App Service support additional slots?

Ans:

Question(4)

:

How long is the logging period when using the application’s filesystem?

Ans:

Question(5)

:

What methods can be used to deploy apps to Azure App Service?

Ans:

Question(6)

:

How are configurations in Azure App Service configured?

Ans:

Question(7)

:

What is ‘scaling up’?

Ans:

Question(8)

:

What is the maximum size of the backed up application and database files?

Ans:

Question(9)

:

What is the quota applied to all App Service Plans?

Ans:

Question(10)

:

What are the ports used for ASE management?

Ans:

What are React Props Validation?

 Props are an important mechanism for passing the read-only attributes to React components. The props are usually required to use correctly in the component. If it is not used correctly, the components may not behave as expected. Hence, it is required to use props validation in improving react components.

Props validation is a tool that will help the developers to avoid future bugs and problems. It is a useful way to force the correct usage of your components. It makes your code more readable. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes. However, if you use propTypes with your components, it helps you to avoid unexpected bugs.

Validating Props

App.propTypes is used for props validation in react component. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console. After specifying the validation patterns, you will set the App.defaultProps.

Syntax:

1. class App extends React.Component {  
2.           render() {}  
3. }  
4. Component.propTypes = { /*Definition */};  

ReactJS Props Validator

ReactJS props validator contains the following list of validators.

SN	PropsType	Description
1.	PropTypes.any	The props can be of any data type.
2.	PropTypes.array	The props should be an array.
3.	PropTypes.bool	The props should be a boolean.
4.	PropTypes.func	The props should be a function.
5.	PropTypes.number	The props should be a number.
6.	PropTypes.object	The props should be an object.
7.	PropTypes.string	The props should be a string.
8.	PropTypes.symbol	The props should be a symbol.
9.	PropTypes.instanceOf	The props should be an instance of a particular JavaScript class.
10.	PropTypes.isRequired	The props must be provided.
11.	PropTypes.element	The props must be an element.
12.	PropTypes.node	The props can render anything: numbers, strings, elements or an array (or fragment) containing these types.
13.	PropTypes.oneOf()	The props should be one of several types of specific values.
14.	PropTypes.oneOfType([PropTypes.string,PropTypes.number])	The props should be an object that could be one of many types.

Example

Here, we are creating an App component which contains all the props that we need. In this example, App.propTypes is used for props validation. For props validation, you must have to add this line: import PropTypes from 'prop-types' in App.js file.

App.js

1. import React, { Component } from 'react';  
2. import PropTypes from 'prop-types';  
3. class App extends React.Component {  
4.    render() {  
5.       return (  
6.           <div>  
7.               <h1>ReactJS Props validation example</h1>  
8.               <table>  
9.                   <tr>  
10.                       <th>Type</th>  
11.                       <th>Value</th>  
12.                       <th>Valid</th>  
13.                   </tr>  
14.                 <tr>  
15.                       <td>Array</td>  
16.                       <td>{this.props.propArray}</td>  
17.                       <td>{this.props.propArray ? "true" : "False"}</td>  
18.                   </tr>  
19.                   <tr>  
20.                       <td>Boolean</td>  
21.                       <td>{this.props.propBool ? "true" : "False"}</td>  
22.                       <td>{this.props.propBool ? "true" : "False"}</td>  
23.                   </tr>  
24.                   <tr>  
25.                       <td>Function</td>  
26.                       <td>{this.props.propFunc(5)}</td>  
27.                       <td>{this.props.propFunc(5) ? "true" : "False"}</td>  
28.                   </tr>  
29.                   <tr>  
30.                       <td>String</td>  
31.                       <td>{this.props.propString}</td>  
32.                       <td>{this.props.propString ? "true" : "False"}</td>  
33.                   </tr>  
34.                   <tr>  
35.                       <td>Number</td>  
36.                       <td>{this.props.propNumber}</td>  
37.                       <td>{this.props.propNumber ? "true" : "False"}</td>  
38.                   </tr>  
39.              </table>  
40.         </div>  
41.         );  
42.    }  
43. }  
44. App.propTypes = {  
45.     propArray: PropTypes.array.isRequired,  
46.     propBool: PropTypes.bool.isRequired,  
47.     propFunc: PropTypes.func,  
48.     propNumber: PropTypes.number,  
49.     propString: PropTypes.string,   
50. }  
51. App.defaultProps = {  
52.     propArray: [1,2,3,4,5],  
53.     propBool: true,  
54.     propFunc: function(x){return x+5},  
55.     propNumber: 1,  
56.     propString: "JavaTpoint",  
57. }  
58. export default App;  

Main.js

1. import React from 'react';  
2. import ReactDOM from 'react-dom';  
3. import App from './App.js';  
4.   
5. ReactDOM.render(<App/>, document.getElementById('app'));  

Output:

ReactJS Custom Validators

ReactJS allows creating a custom validation function to perform custom validation. The following argument is used to create a custom validation function.

• props: It should be the first argument in the component.
• propName: It is the propName that is going to validate.
• componentName: It is the componentName that are going to validated again.

Example

1. var Component = React.createClass({  
2. App.propTypes = {  
3.    customProp: function(props, propName, componentName) {  
4.         if (!item.isValid(props[propName])) {  
5.           return new Error('Validation failed!');  
6.         }  
7.       }  
8.    }  
9. })  

What are React Props?

 Props stand for "Properties." They 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 gives a way to pass data from one component to other components. 

It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. 

These attributes are available in the component as this.props and can be used to render dynamic data in our render method.

When you need immutable data in the component, you have to add props to reactDom.render() method in the main.js file of your ReactJS project and used it inside the component in which you need. It can be explained in the below example.

Example

App.js

1. import React, { Component } from 'react';  
2. class App extends React.Component {  
3.    render() {     
4.       return (  
5.           <div>  
6.             <h1> Welcome to { this.props.name } </h1>    
7.             <p> <h4> Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. </h4> </p>          
8.           </div>  
9.       );  
10.    }  
11. }  
12. export default App;  

Main.js

1. import React from 'react';  
2. import ReactDOM from 'react-dom';  
3. import App from './App.js';  
4.   
5. ReactDOM.render(<App name = "JavaTpoint!!" />, document.getElementById('app'));  

Output

Default Props

It is not necessary to always add props in the reactDom.render() element. You can also set default props directly on the component constructor. It can be explained in the below example.

Example

App.js

1. import React, { Component } from 'react';  
2. class App extends React.Component {  
3.    render() {     
4.       return (  
5.           <div>  
6.               <h1>Default Props Example</h1>  
7.             <h3>Welcome to {this.props.name}</h3>   
8.             <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</p>          
9.           </div>  
10.         );  
11.     }  
12. }  
13. App.defaultProps = {  
14.    name: "JavaTpoint"  
15. }  
16. export default App;  

Main.js

1. import React from 'react';  
2. import ReactDOM from 'react-dom';  
3. import App from './App.js';  
4.   
5. ReactDOM.render(<App/>, document.getElementById('app'));  

Output

State and Props

It is possible to combine both state and props in your app. You can set the state in the parent component and pass it in the child component using props. It can be shown in the below example.

Example

App.js

1. import React, { Component } from 'react';  
2. class App extends React.Component {  
3.    constructor(props) {  
4.       super(props);  
5.       this.state = {  
6.          name: "JavaTpoint",         
7.       }  
8.    }  
9.    render() {  
10.       return (  
11.          <div>  
12.             <JTP jtpProp = {this.state.name}/>             
13.          </div>  
14.       );  
15.    }  
16. }  
17. class JTP extends React.Component {  
18.    render() {  
19.       return (  
20.           <div>  
21.               <h1>State & Props Example</h1>  
22.               <h3>Welcome to {this.props.jtpProp}</h3>  
23.               <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</p>  
24.          </div>    
25.       );  
26.    }  
27. }  
28. export default App;  

Main.js

1. import React from 'react';  
2. import ReactDOM from 'react-dom';  
3. import App from './App.js';  
4.   
5. ReactDOM.render(<App/>, document.getElementById('app'));  

Output: