react入门第一步-基础api

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_33676492

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ndweb/blog/1839229

版权

为什么80%的码农都做不了架构师？>>>

安装

npm install -g create-react-app	

npm install -g create-react-app --registry=https://registry.npm.taobao.org


create-react-app myApp
cd myApp
npm start

这样你就简单的完成了一个 react app 建立，其目录结构如下（图中不包括 node_modules 目录，下同）：

Hello World

删除一些不必要的东西，然后修改目录结构如下：

修改 index.js 如下：

import React from 'react';
import ReactDOM from 'react-dom';

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

然后命令行运行： npm start
就可以看到熟悉的 ‘hello world’ 了

一、HTML 模板

使用 React 的网页源码：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

二，组件们

在 React 中，你可以创建一个有特殊功能的组件，这在 HTML 元素里你是打着灯笼也找不到的，比如这个教程里的下拉导航。每个组件都有自己的地盘(scope)，所以我们定义一个组件后可以反复的用反复的用，根本就不需要和别的组件交互！

三，JSX

如果你经常注意React你也许会发现有个东西叫JSX。JSX允许我们在Javascript中写HTML，而不是用HTML包含Javascript。它能帮助我们快速开发，因为我们不用担心字符串和换行等。你可以在浏览器中运行JSX，但是不推荐，因为这样会减慢你的页面速度。gulp和grunt为你的预处理任务提供了一个JSX解释器，所以如果你想使用JSX，我建议开启这个功能

使用 JSX

var ExampleComponent = React.createClass({
    render: function () {
        return (
            <div className="navigation">
                Hello World!
            </div>
            );
    }
});

如果你要在你的浏览器中运行这段代码，只会得到语法错误的提示，因为在Javascript中<和>字符要用引号包含起来。当你在代码上运行JSX解释器，它将被转换成这样

var ExampleComponent = React.createClass({
    render: function () {
        return (
            React.createElement('div', {className: 'navigation'}, 'Hello World!')
            );
    }
});

转载于:https://my.oschina.net/ndweb/blog/1839229