搭建开发环境
create-react-app(创建项目):npx create-react-app xxx(xxx 项目名)
解读项目目录
![](https://i-blog.csdnimg.cn/direct/5613a8bfac304c57bac0f31b0a9a5074.png)
app.js
// 项目的根组件
// app被引入到index.js 被index.js里的核心代码 渲染到 public里的index.html里的root div上去
function App() {
return (
<div className="App">
this is APP
</div>
);
}
export default App;
index.js
// 整个项目的入口
// 下面两个是react两个必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目的根组件
import App from './App';
// 把根组件渲染到id为root的dom节点上(在public下的index里)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
JSX
jsx:js+xml(html)
本质
jsx不是标准的js语法,浏览器不认识,需要通过解析工具(babel)做解析之后才能在浏览器中允许
想深入了解jsx (Babel · Babel (babeljs.io))多看看区别呗
jsx中使用js表达式
{}
![](https://i-blog.csdnimg.cn/direct/d577c577c8f84bdc8cd425670c80bc00.png)
注意:仅支持表达式哦!!if语句、switch语句、变量声明属于语句 不是表达式 不允许出现在{}中