一,配置环境
1，下载编辑器工具Atom https://atom.io/
2，下载atom 插件 https://atom.io/packages
常用插件，浏览器浏览功能 open-in-browser(可以设置快捷键)
分页显示HTML页面效果atom-html-preview(可以设置快捷键)
文件路径补全 autocomplete-path
3，下载react native https://facebook.github.io/react
4,browser.min.js
文件链接 https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
注明 下载的react 目录下是没有browser.min.js文件 需要自己添加
http://wiki.jikexueyuan.com/project/react-native/
二，创建工程
1，创建一个目录Holle react 导入build目录
在工程中创建一个文件index.html
<html> <head><title></title>
<!--导入react.js库是核心的库-->
<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 代码写在这边-->
/*
ReactDOM.render()
React的基本方法，用于将模板转换成HTML语言，渲染DOM，并插入指定的DOM节点中。
3个参数：第一个参数模板渲染内容（HTML形式）
第二个这段模板需要插入的DOM节点（本程序中，是ID为container的div节点）
第三个渲染后的回调，一般不用
*/
ReactDOM.render(
<h1>Holle React</h1>,
document.getElementById("container")
);
/**
JSX语法学习
1，JSX必须是借助React运行
2，JSX标签其实就是HTML标签，只不过我们在JavaScript中书写这些标签，不使用“”括起来
ReactDOM.render(
<h1>
Holle React
<h1>
,domcuemnt.getElemnetByid("container"));
//3,转换：JSX语法能够让我们更直观的看到组件的DOM结构，不能组件在浏览器上运行，最终会转化JavaScript
ReactDOM.render(
React.createElement("h1",null,"Hello React"),
document.getElementById("container"));
//JSX运行JavaScript代码 使用{}括起来 {表达式}
var text = “test React Holle”；
ReactDOM.render(<h1>{test Reat Hello}<h1>,
document.getElementById("container"))
</html>
扫一扫
5417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
