Reactjs 入门基础(一)

时间 2019-11-18

标签 reactjs 入门基础繁體版

原文原文链接

实例中咱们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：
　　1，react.min.js -React 的核心库
　　2，react-dome.min.js - 提供与DOM 相关的功能。
　　3，browser.min.js 用于将JSX 语法转化为JavaScript 语法。react

　ReactDOM.render(
　　　　　　<h1>Hello, world!</h1>,
　　　　　　document.getElementById('example')
　　);

　　注意：若是咱们须要使用 JSX，则 <script> 标签的 type 属性须要设置为 text/babel。数组

　　React 使用 JSX 来替代常规的 JavaScript。
　　JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
　　咱们不须要必定使用 JSX，但它有如下优势：
　　JSX 执行更快，由于它在编译为 JavaScript 代码后进行了优化。
　　它是类型安全的，在编译过程当中就能发现错误。
　　使用 JSX 编写模板更加简单快速。浏览器

使用 JSX
　　JSX 看起来相似 HTML ，咱们能够看下实例:安全

　　　ReactDOM.render(
　　　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　　　document.getElementById('example')
　　　);

咱们能够在以上代码中嵌套多个 HTML 标签，须要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，
添加自定义属性须要使用 data- 前缀。babel

　　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<h1>柠檬先生</h1>
　　　　　　　　<h2>欢迎学习 React</h2>
　　　　　　　　<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
　　　　　　</div>,
　　　　　　document.getElementById('example')
　　　　);

独立文件dom

　　　　你的 React JSX 代码能够放在一个独立文件上，例如咱们建立一个 helloworld_react.js 文件，代码以下：学习

　　　　　ReactDOM.render(
　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　document.getElementById('example')
　　　　　　);

　　　　而后在 HTML 文件中引入该 JS 文件：优化

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel" src="helloworld_react.js"></script>
　　　　　　</body>

　　　　咱们能够在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例以下：spa

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　<h1>{1+1}</h1>
　　　　　　　　　　　　</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

在 JSX 中不能使用 if else 语句，单可使用 conditional (三元运算) 表达式来替代。如下实例中若是变量 i 等于 1 浏览器将输出 true, 若是修改 i 的值，则会输出 false.code

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　　　var i = 1;
　　　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<h1>{i == 1 ? 'True!' : 'False'}</h1>
　　　　　　　　　　　　　　　　</div>,
　　　　　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

样式
React 推荐使用内联样式。咱们可使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。如下实例演示了为 h1 元素添加 myStyle 内联样式：

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var myStyle = {
　　　　　　　　　　　　fontSize: 100,
　　　　　　　　　　　　color: '#FF0000'
　　　　　　　　　　};
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<h1 style = {myStyle}>柠檬先生</h1>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

注释
注释须要写在花括号中，实例以下：

　　　ReactDOM.render(
　　　　　　　　<div>
　　　　　　　　　　<h1>柠檬先生</h1>
　　　　　　　　　　{/*注释...*/}
　　　　　　　　</div>,
　　　　　　　　document.getElementById('example')
　　　　);

数组
JSX 容许在模板中插入数组，数组会自动展开全部成员：

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var arr = [
　　　　　　　　　　　　<h1>柠檬先生</h1>,
　　　　　　　　　　　　<h2>学的不只是技术，更是梦想！</h2>,
　　　　　　　　　　　　];
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>{arr}</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

React 组件
接下来咱们封住一个输出 "Hello World！" 的组件，组件名为 HelloMessage：

　var HelloMessage = React.createClass({
　　　　　　　　render: function() {
　　　　　　　　　　　　return <h1>Hello World！</h1>;
　　　　　　　　}
　　　　});

　　　　ReactDOM.render(
　　　　　　　　<HelloMessage />,
　　　　　　　　document.getElementById('example')
　　　　);

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，好比 HelloMessage 不能写成 helloMessage。
除此以外还须要注意组件类只能包含一个顶层标签，不然也会报错。

1. ReactJS入门基础
2. Reactjs系列一reactjs基础知识
3. ReactJS入门之ReactJS简介
4. reactJs 基础
5. 【JavaScript】ReactJS基础
6. ReactJS基础(续)
7. ReactJS 快速入门
8. ReactJS入门指南
9. ReactJS入门教程
10. ReactJs入门教程
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Kotlin 基础语法 - Kotlin 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用