欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react入门 第一步-基础api

程序员文章站 2024-03-23 23:16:04
...

安装

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 目录,下同 ):

react入门 第一步-基础api

Hello World

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

react入门 第一步-基础api

  • 其中 components 是个目录。

修改 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