Einführungs-Tutorial zu React.js: 5 Möglichkeiten, eine Hallo-Welt zu erstellen

1. Einführung in ReactJS

React ist in letzter Zeit ein sehr beliebtes Front-End-Entwicklungsframework. React entstand als internes Projekt bei Facebook. Da das Unternehmen mit allen JavaScript-MVC-Frameworks auf dem Markt unzufrieden war, beschloss es, ein eigenes Projekt zu schreiben, um die Instagram-Website zu erstellen. Nachdem ich es erstellt hatte, stellte ich fest, dass diese Reihe von Dingen sehr nützlich ist, und so wurde sie im Mai 2013 als Open Source veröffentlicht. Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher beginnen immer mehr Menschen, darauf zu achten und es zu nutzen, weil sie glauben, dass es in Zukunft das Mainstream-Tool für die Webentwicklung sein könnte.

Offizielle Website-Adresse von ReactJS: http://facebook.github.io/react/

Github-Adresse: https://github.com/facebook/react

ReactJS Chinesische Adresse: http://reactjs.cn/react/docs/getting-started.html

Was ist React?

React ist eine JS-Bibliothek, die von herausragenden Programmierern bei Facebook für die Entwicklung von Benutzerinteraktionsschnittstellen entwickelt wurde. Der Quellcode wird von herausragenden Programmierern von Facebook und der Community gepflegt, sodass dahinter ein sehr starkes technisches Team steht, das technischen Support leistet. React bringt viele neue Dinge, wie Komponentisierung, JSX, virtuelles DOM usw. Das bereitgestellte virtuelle DOM ermöglicht es uns, Komponenten sehr schnell zu rendern, was uns von der schweren Arbeit befreit, das DOM häufig zu manipulieren. Jeder, der React kennt, weiß, dass sich die Arbeit mehr auf die V-Schicht in MVC konzentriert. In Kombination mit anderen wie Flux können Sie problemlos leistungsstarke Anwendungen erstellen.

2. Funktionen von ReactJS

1. Virtuelles DOM

Durch den DOM-Diff-Algorithmus werden nur die differenzierten Teile aktualisiert. Es ist nicht erforderlich, die gesamte Seite zu rendern, um die Effizienz zu verbessern

2. Durch die Komponentisierung

wird die Seite in mehrere Komponenten unterteilt, die eine logische Struktur und einen logischen Stil enthalten

Die Komponente enthält nur ihre eigene Logik und kann beim Aktualisieren der Komponente vorhergesagt werden, was für die Wartung praktisch ist

Die Seite ist in mehrere Komponenten aufgeteilt, die wiederverwendet werden können

3, einseitiger Datenfluss

Daten werden von Komponenten der obersten Ebene an Unterkomponenten weitergeleitet

Daten kontrollierbar

3. Erste Schritte mit dem React-Schreiben Hallo Welt. Lassen Sie uns zunächst verstehen, was JSX ist

Einer der Kernmechanismen von React ist virtuelles DOM: ein virtuelles DOM-Element, das erstellt werden kann in Erinnerung. React verwendet virtuelles DOM, um Vorgänge am tatsächlichen DOM zu reduzieren und die Leistung zu verbessern. Ähnlich wie das echte native DOM kann auch virtuelles DOM beispielsweise über JavaScript erstellt werden:

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);
React.render(
<div>{root2}</div>,
document.getElementById(&#39;container5&#39;)
);

Mit einem solchen Mechanismus können wir JavaScript verwenden, um einen vollständigen Schnittstellen-DOM-Baum zu erstellen, genau wie wir ihn verwenden können JavaScript zum Erstellen eines echten DOM. Aber die Lesbarkeit eines solchen Codes ist nicht gut, also hat React JSX erfunden und unsere bekannte HTML-Syntax verwendet, um ein virtuelles DOM zu erstellen:

var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
React.render(
<div>{root}</div>,
document.getElementById(&#39;container6&#39;)
);

5 Möglichkeiten, mit dem Schreiben von Hello, world in React zu beginnen

Der 1. Weg

<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById(&#39;example1&#39;)
);
</script>

Der 2. Weg

<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement(&#39;h1&#39;, {className:&#39;classN2&#39;}, &#39;2 Hello, 直接创建元素 world!&#39;),
document.getElementById(&#39;example2&#39;)
);
</script>

Der 3. Weg

<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可
return (<h1 className=&#39;classN3&#39; >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>,
//或者双括号 <CreateEl></CreateEl>
document.getElementById(&#39;example3&#39;)
);
</script>

Der 4. Weg

<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement(&#39;h1&#39;, {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null),
document.getElementById(&#39;example4&#39;)
);
</script>

Die 5. Methode

<div id="example5"></div>
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data=&#39;5 hello&#39; />
<World />
</h1>,
document.getElementById(&#39;example5&#39;)
);
</script>

Angehängter Code:

Lassen Sie mich etwas Wissen hinzufügen:

Reagieren Sie auf die Terminologie

React Elements

JavaScript, das ein HTML-Elementobjekt darstellt. Diese JavaScript-Objekte werden schließlich in entsprechende HTML-Elemente kompiliert.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; }
</style>
<div id="box">
<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>, 
document.getElementById(&#39;example1&#39;)
);
</script>
<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement(&#39;h1&#39;, {className:&#39;classN2&#39;}, &#39;2 Hello, 直接创建元素 world!&#39;), 
document.getElementById(&#39;example2&#39;)
);
</script>
<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可 
return (<h1 className=&#39;classN3&#39; >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>, 
//或者双括号 <CreateEl></CreateEl>
document.getElementById(&#39;example3&#39;)
);
</script>
<div id="example4"></div> 
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement(&#39;h1&#39;, {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null), 
document.getElementById(&#39;example4&#39;)
);
</script>
<div id="example5"></div> 
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello 
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world 
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data=&#39;5 hello&#39; />
<World />
</h1>, 
document.getElementById(&#39;example5&#39;)
);
</script>
</div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</body>
</html>

Components

kapselt React Elements und enthält ein oder mehrere React Elements. Komponenten werden zum Erstellen wiederverwendbarer UI-Module wie Paging, Seitenleistennavigation usw. verwendet.

JSX

JSX ist eine von React definierte JavaScript-Syntaxerweiterung, ähnlich wie XML. JSX ist optional. Wir können JavaScript zum Schreiben von React-Anwendungen verwenden, aber JSX bietet eine einfachere Möglichkeit, React-Anwendungen zu schreiben.

Virtuelles DOM

Virtuelles DOM ist ein JavaScript-Objekt, das einen DOM-Baum simuliert. React verwendet Virtual DOM zum Rendern der Benutzeroberfläche, während es Datenänderungen im virtuellen DOM überwacht und diese Änderungen automatisch in die Benutzeroberfläche migriert.

Weitere Einführungsbeispiel-Tutorials zu React.js: 5 Möglichkeiten zum Erstellen einer Hallo-Welt und verwandte Artikel finden Sie auf der chinesischen PHP-Website!