初始化
npm init
简单配置一下package.json;
安装依赖
npm install react react-dom babel-standalone -S
- react 核心库
- react-dom 提供与DOM相关的功能
- babel-standalone 将JSX语法转为JS语法
编写一个helloworld.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HelloWorld</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="helloworld"></div>
<script type="text/babel">//注意type="text/babel,这样可以识别并编译JSX语法
//用于将模板转为html语言,并插入指定DOM节点
ReactDOM.render(
<ul className="parent">//不能用class,只能用className
<li >111</li>
<li>222</li>
<li>333</li>
</ul>, //这里有个逗号
document.getElementById('helloworld')
);
//方法二
/* var child1 = React.createElement("li",{id:'a'},'111');
// null 这个位置可以设置该元素的类名 、id名;是null的话就只是一个普通标签
var child2 = React.createElement("li",null,'222');
var par = React.createElement("ul",{className:'parents'},child1,child2);
ReactDOM.render(
par,
document.getElementById('helloworld')
) */
</script>
</body>
</html>
注
- 设置
<script type="text/babel">
,用来支持JSX语法 - 只能有一个根目录,上述代码不会同时出现两个ul模块,只能显示一个。
var sty = {
fontSize:"20px",
color:"red"
}
var flag = false;
ReactDOM.render(
<ul className="parent">
<li style={sty}>{flag===true?'111':'123'}</li>
<li>222</li>
<li>333</li>
</ul>,
document.getElementById('helloworld')
);
注
- react不支持if ···else·· 只支持三目运算符