(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
React介绍
React是什么
React的优势
React的市场情况
开发环境搭建
使用create-react-app快速搭建开发环境
尝试运行程序
react基本框架
index.js
//项目的入口 从这里开始运行
//react必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目的根组件
import App from './App';
import reportWebVitals from './reportWebVitals';
//将App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);App.js
//项目根组件
function App() {
return (
<div className="app">
this is app
</div>
);
}
export default App;JSX基础-概念和本质
什么是JSX
JSX的本质
JSX基础-高频场景
JSX中使用JS表达式
// 项目的根组件
// App -> index.js -> public/index.html(root)
const count = 100
function getName () {
return 'jack'
}
function App () {
return (
<div className="App">
this is App
{/* 使用引号传递字符串 */}
{'this is message'}
{/* 识别js变量 */}
{count}
{/* 函数调用 */}
{getName()}
{/* 方法调用 */}
{new Date().getDate()}
{/* 使用js对象 */}
<div style={{ color: 'red' }}>this is div</div>
</div>
)
}
export default App
JSX中实现列表渲染
const list = [
{ id: 1001, name: 'Vue' },
{ id: 1002, name: 'React' },
{ id: 1003, name: 'Angular' }
]
function App () {
return (
<div className="App">
this is App
{/* 渲染列表 */}
{/* map 循环哪个结构 return结构 */}
{/* 注意事项：加上一个独一无二的key 字符串或者number id */}
{/* key的作用：React框架内部使用 提升更新性能的 */}
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
}
export default App
JSX中实现条件渲染
const isLogin = true
function App () {
return (
<div className="App">
{/* 逻辑与 && */}
{isLogin && <span>this is span</span>}
{/* 三元运算 */}
{isLogin ? <span>jack</span> : <span>loading...</span>}
</div>
)
}
export default App
