您的位置：首页 > Web前端 > React

蓝鸥React Native零基础入门到项目实战 Hello React

2016-12-27 10:27 387 查看

蓝鸥React Native零基础入门到项目实战 Hello React http://edu.csdn.net/course/detail/3129
Hello React

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>


<script src="./build/react.js" charset="utf-8"></script>

<script src="./build/react-dom.js" charset="utf-8"></script>

<script src="./build/browser.min.js" charset="utf-8"></script>


</head>
<body>

<div id="container">

</div>

</body>


<script type="text/babel">

// 在此处编写React代码

</script>

</html>

Hello React.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<!-- react.js是React的核心库 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

</head>
<body>
<!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
<div id="container">

</div>

</body>
<!-- 在React开发中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要设置type：text/babel -->
<!-- babel是一个转换编译器，ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">

// 在此处编写React代码

// 需求：渲染一行标题，显示“Hello React”
//
/*
ReactDOM.render()
React的最基本方法，用于将模板转换成HTML语言，渲染DOM，并插入指定的DOM节点中

3个参数
第一个：模板的渲染内容(HTML形式)
第二个：这段模板需要插入的DOM节点(本程序中，是id为container的div节点)
第三个：渲染后的回调，一般不用

*/

//  ReactDOM.render(
//   <h1>Hello React</h1>,
//   document.getElementById("container")
// );

/*

JSX入门

JSX不是一门新的语言，是个语法(语法糖)。

*/

// 1、JSX必须借助React环境运行

// 2、JSX标签其实就是HTML标签，只不过我们在JavaScript中书写这些标签的时候，不用使用""括起来，
// 可以向XML一样书写

ReactDOM.render(
<h1>
Hello React
</h1>,
document.getElementById("container")
);

// 3、转换：JSX语法能够让我们更直观的看到组件的DOM结构，不能直接在浏览器上运行，最终会转化成JavaScript代码在浏览器上运行

ReactDOM.render(
React.createElement("h1", null, "Hello React"),
document.getElementById("container")
);

// 4、在JSX中运行JavaScript代码。
// 使用{}括起来  {表达式}
//

var text = "蓝鸥";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
);

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React Native 蓝鸥 Hello React 础入门到项目实战免费React视频

相关文章推荐

新的分享

章节导航