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 目录，下同 ）：
Hello World
- 删除一些不必要的东西，然后修改目录结构如下：
- 其中 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
下一篇： springboot第三天
推荐阅读