1.创建一个react项目
create-react-app 快速脚手架
npm install -g create-react-app创建React项目
create-react-app xxx start
创建成功！
2.了解项目目录结构
node_modules — 项目依赖包文件夹
public — 静态资源文件夹
- favicon.icon — 网站偏爱图标
- index.html — 主页面（重要）
- logo192.png — logo图
- logo512 — logo图
- manifest.json — 应用加壳的配置文件
- robots.txt — 爬虫协议文件
src — 源码文件夹
- App.css — App组件的样式
- App.js — App组件 （重要）
- App.test.js — 给App测试
- index.css — 样式
- index.js — 入口文件 （重要）
- logo.svg — logo图
- reportWebVitals.js — 页面性能分析文件（需要web-vitals库的支持）
- setupTests.js — 组件单元测试的文件（需要jest-dom库的支持）
gitignore — git的选择性上传的配置文件
配置不会上传的文件信息。
开始学习
jsx语法结构
- 1.jsx模板语法中双标签必须要有开始和结束
- 2.jsx模板语法中单标签必须要有结束
- 3.jsx模板语法中有且只能有一个根标签
- 4.jsx模板语法严格区分大小写
jsx模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const div = <div>
<h3>111</h3>
<p>
<h2>222</h2>
</p>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板变量的使用
文本内容:使用{}解析js语法
属性: 属性名={js语法}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const msg = '111';
const div = <div>
<h3>{msg}</h3>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const str = 'i have an apple';
const div = <div>
<div>{str.toUpperCase()}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
调用自定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const str = 'i have an apple';
function fn(str){
return str.split('').reverse().join('')
}
const div = <div>
<div>{str.toUpperCase()}</div>
<div>{fn(str)}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板注释
{/*这里写注释内容*/}
条件渲染
- 不能使用if结构做条件判断
- 使用三元运算符做条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
let age = 30;
const div = <div>
{/*<div>{if(age>=18){'已成年'}else{'未成年'}}</div>*/}
<div>{age>=18 ? '已成年' : '未成年'}</div>
<hr />
<div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
关键字
className为设置标签的选择器htmlFor设置label标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
const div = <div className="main">
<h3>22</h3>
<label htmlFor="search">搜索</label>
<input type="text" id="search" />
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
-
通过
style指定行内样式 -
style属性值采用{{}}来书写
{{}}:
外层{}: #指jsx模板语法
内层:{}: #指一个json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
const obj = {background:'red',color:'yellow'};
// 书写jsx模板语法
const div = <div className="main">
{/*错误写法*/}
{/*<h3 style="background:'red';color:'yellow'">啊哈哈哈哈哈哈</h3>*/}
<h3 style={obj}>咿呀呀呀呀呀</h3>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
列表的渲染
- 在遍历数组时,key需要绑定在遍历的直接子元素上
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 2.引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 3.引入babel --> <script src="./libs//babel.min.js"></script> <style> .main{ background: skyblue; } </style> </head> <body> <div id="container"> </div> <script type="text/babel"> let arr = ['朝阳区','海淀区','通州区']; let arr1 = [<h2 key="0">海淀区</h2>,<h2 key="1">朝阳区</h2>,<h2 key="2">通州区</h2>] // forEach 没有返回值 let arr2 = []; arr.forEach(item=>{ arr2.push(item) }) // map #有返回值 let arr3 = arr.map((item,index)=>{ return <h3 key={index}>{item}</h3> }) let brand = [ { id:1, name:'宝马', price:500000 }, { id:2, name:'奔驰', price:1000000 }, { id:3, name:'奥迪', price:400000, } ] // 书写jsx模板语法 const div = <div className="main"> {arr} <hr /> {arr1} <hr /> {arr2} <hr /> {arr3} <hr /> {arr.map((item,index)=>{ return <h3 key={index}>{item}</h3> })} {/*变形写法*/} {arr.map((item,index)=><h3 key={index}>{item}</h3>)} <hr /> {/*在遍历数组时,key需要绑定在遍历的直接子元素上*/} {brand.map(item=>( <div key={item.id}> <h2>{item.name}</h2> <div>{item.price}</div> </div> ))} </div> ReactDOM.render(div,document.querySelector('#container')) </script> </body> </html>
1916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
