最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
React use JSX instead of regular JavaScript.
JSX is a JavaScript syntax extension that looks a lot like XML.
We don’t need to use JSX necessarily, but it has the following advantages:
JSX executes faster because it is optimized after being compiled into JavaScript code.
It is type-safe and errors can be found during compilation.
Writing templates in JSX is easier and faster.
Let’s take a look at the following code:
const element = Hello, world!
; The tag syntax, which may seem strange, is neither a string nor a HTML.
It is called JSX, a syntactic extension of JavaScript. We recommend it in the React use JSX to describe the user interface in.
JSX is implemented within JavaScript.
We know that elements are made up React the smallest unit of application, JSX is used to declare React the elements in it.
With the browser’s DOM elements are different. React the elements are actually ordinary objects, and React DOM ensures that the browser DOM the data content of the React elements are consistent.
To set the Note: Because JSX is JavaScript, some identifiers are like JSX looks like HTML, so we can take a look at an example: We can nest multiple HTML tags in the above code, using a Your React JSX code can be placed on a separate file, for example, we create a Then introduce the JS file into the HTML file: We can use JavaScript expressions in JSX. The expression is written in curly braces Cannot be used in JSX Comments need to be written in curly braces. Examples are as follows: JSX allows you to insert an array into the template, and the array automatically expands all its members: React element is rendered to root DOM node, we pass them all to the ReactDOM.render() to render it to the page 3.4.1. React instance ¶
varmyDivElement= <divclassName="foo"/>;ReactDOM.render(myDivElement,document.getElementById('example'));
class and for . It is not recommended as a XML property name. Instead, React DOM use className and htmlFor to make the corresponding properties.Use JSX ¶
ReactDOM.render(
Hello,world!
,document.getElementById('example')); div element wraps it, the p element added a custom attribute data-myattribute to add custom properties, you need to use data- prefix. 3.4.2. React instance ¶
ReactDOM.render(
Rookie Tutorial
Welcome to learn React
Independent file ¶
helloworld_react.js file, the code is as follows: ReactDOM.render(
Hello,world!
,document.getElementById('example')); 3.4.3. React instance ¶
<body><divid="example">div><scripttype="text/babel"src="helloworld_react.js">script>body>
JavaScript expression ¶
{} . Examples are as follows: 3.4.4. React instance ¶
ReactDOM.render(<div> <h1>{1+1}h1> div> ,document.getElementById('example'));
if else statement, but you can use the conditional (ternary operation) expression to replace. In the following example, if the variable i equal to 1 the browser will output true if you change the value of I, the output false . 3.4.5. React instance ¶
ReactDOM.render(
,document.getElementById('example')); {i==1?'True!':'False'}
Style ¶
React inline style is recommended. We can use it. camelCase syntax to set the inline style. React will be automatically added after the element number is specified px . The following example shows how to create a h1 element addition myStyle inline style: 3.4.6. React instance ¶
varmyStyle={fontSize:100,color:'#FF0000'}; ReactDOM.render(<h1style={myStyle}>Rookie Tutorialh1>,document.getElementById('example'));
Annotation ¶
3.4.7. React instance ¶
ReactDOM.render(<div> <h1>Rookie Tutorialh1>{/\*explanatory note...\*/}div>,document.getElementById('example'));
Array ¶
3.4.8. React instance ¶
vararr=[
Rookie Tutorial
, Learning is not only about technology, but also about dreams！
,]; ReactDOM.render({arr},document.getElementById('example'));