create react app:https://www.html.cn/create-react-app/docs/getting-started/
创建一个react项目的步骤
npx create-react-app my-app
cd my-app
npm start
(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)
你 无需 安装或配置 Webpack 或 Babel 等工具。 它们是预先配置好并且隐藏的,因此你可以专注于代码。
只需创建一个项目,就可以了。
jsx语法
1.定义虚拟DOM,不能使用“”
2.标签中混入JS表达式的时候使用{}
3.样式的类名指定不要使用class,使用className
4.内敛样式要使用style={{样式:"值"}}
5.不能有多个根标签,只能有一个跟标签
6.标签必须闭合
7.如果小写字母开头,就将标签转化为html同名元素,如果html中无该标签对应的元素,就报错
如果是大写字母开头,react就去渲染对应的组件,如果没有就报错
以下为jsx语法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sss{
color: red;
}
</style>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
</body>
<!-- 引入依赖 ,引入的时候,必须就按照这个步骤-->
<!-- 引入react核心库 全局多了React -->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom 用于支持react操作dom 全局多了ReactDOM-->
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>
<!-- 解析jsx -->
<script src="../React-js/babel.min.js" type="text/javascript"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
const MyId = "title";
const MyData = "Cyk";
// 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
// const VDOM = React.createElement('h1',{id:"title"},"nihao")
//不需要加"",jsx语法
const VDOM = (
<h1 id = {MyId.toLocaleUpperCase()}>
<span className = "sss" style = {{fontSize:'50px'}}>{MyData}</span>
</h1>
)
// 2.渲染,如果有多个渲染同一个容器,后面的会将前面的覆盖掉
ReactDOM.render(VDOM,document.getElementById("test"));
/*
JS表达式:返回一个值,可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}
JS语句:if(){} for(){} while(){} swith(){} 不会返回一个值
*/
//1.定义虚拟DOM,不能使用“”
//2.标签中混入JS表达式的时候使用{}
//3.样式的类名指定不要使用class,使用className
//4.内敛样式要使用style={{样式:"值"}}
//5.不能有多个根标签,只能有一个跟标签
//6.标签必须闭合
//7.如果小写字母开头,就将标签转化为html同名元素,如果html中无该标签对应的元素,就报错
// 如果是大写字母开头,react就去渲染对应的组件,如果没有就报错
</script>
</html>