React Hello,World

来源：互联网发布：淘宝运营公司骗局编辑：程序博客网时间：2024/06/07 08:31

https://facebook.github.io/react/docs/composition-vs-inheritance.html

关注很久，一直想好好研究下，当我看见看见脚本里放标签，就喜欢上它了，以前大部分是从根标签往下套，一直觉得太麻烦，希望能解决这样的问题？

一、介绍

React 是一个灵活且能被用于各种工程中，你能用它建立一个新的应用，但是你不用重写，可以逐渐把它引入到一个已经存在的代码库中。

下面选项中哪一个最能描述你想做什么？

Try React
Create a New App
Add React to an Existing App

二、几种实验法：

第一、用CodePen 在线测试css,html,js非常方便，且效果非常好，这么好的工具怎么写出来的？

第二、如果你更喜欢用文本编辑，你可以download this HTML file,编辑它，在自己本地的浏览器去打开它。它运行很慢，因为每次要加载三个脚本文件，测了下面的页面，需要花费260ms,所以不要用在一个项目中。

注意，网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。

2.1 使用三个库：

1> react.js：核心库

2>react-dom.js：提供Dom相关的功能

3> babel.min.js：用于将JSX 语法转化为JavaScript 语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel"> //type="text/babel",这是 React 独有的 JSX 语法，跟 JavaScript 不兼容
ReactDOM.render( //ES6脚本放在script标签之中
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

第三、如果你想使用它在整个项目中，有两个最受欢迎的方式：建里一个React 应用，or 增加到已有项目中。

第四、建立一个React 应用：https://github.com/facebookincubator/create-react-app

1、

阅读全文

0 0