你的位置:首页 > Java教程

[Java教程]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 语法。

   ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
  );
  注意:如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。

  React 使用 JSX 来替代常规的 JavaScript。
  JSX 是一个看起来很像   我们不需要一定使用 JSX,但它有以下优点:
  JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  它是类型安全的,在编译过程中就能发现错误。
  使用 JSX 编写模板更加简单快速。

使用 JSX
  JSX 看起来类似 HTML ,我们可以看下实例:
      ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
      );

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,
添加自定义属性需要使用 data- 前缀。
    ReactDOM.render(
      <div>
        <h1>柠檬先生</h1>
        <h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
      </div>,
      document.getElementById('example')
    );

独立文件

    你的 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 表达式。表达式写在花括号 {} 中。实例如下:
      <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.

      <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。
除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。