react开发环境搭建
选择一个目录,然后运行以下命令:
javascript
npm init vite
- 执行完成之后会让你输入项目名称 例如
demo-01
- 接下来会让你选择一个框架 这时候选择
react
- 然后选择
TypeScript + SWC
如果你不会ts就选择js
目录介绍
- public 公共目录
- src
- assets 静态资源
- App.css 根组件样式
- App.tsx 根组件
- index.css 全局css文件
- main.tsx 全局tsx文件
- vite-env.d.ts 声明文件
- .eslintrc.cjs eslint配置文件
- .gitignore git忽略文件
- index.html 入口文件index.html
- package.json 项目依赖模块文件
- tsconfig.json ts配置文件
- tsconfig.node.json vite-ts配置文件
- vite.config.ts vite配置文件
语法入门
-
插值语句,使用{} 可以放在里面的数据类型有:
字符串,数字,数组(里面存放普通类型数据),三元表达式,元素,api
reactimport './App.css' function App() { let number = 90 return ( <> <div> <p>{"字符串"}</p> <p>{123}</p> <p>{true ? "yes" : "no"}</p> <p>{[1,2,3]}</p> <p>{number}</p> </div> </> ) } export default App
-
要放对象的话,需要序列化,JSON.stringify(obj)
reactfunction App() { let obj = { name:"jjs", age: 12 } return ( <> <div> <p>{JSON.stringify(obj)}</p> </div> </> ) }
-
添加事件,使用驼峰命名,如onClick={fn},如果需要传参,使用高价函数,所谓高阶函数,就是一个函数自执行,返回这个执行事件的函数,目的就是为了传参
reactimport './App.css' function App() { function fn(param,e) { console.log(param,e.target) } return ( <> <div> <button onClick={(e) => fn(123,e)}> 点我一下 </button> </div> </> ) } export default App
-
在tsx要支持泛型, 这样写会被理解为一个元素,因为
这是这样写的。所以要在后面加上,用来区分
reactfunction App() { function fn<T,>(param:T,e) { console.log(param,e.target) } return ( <> <div> <button onClick={(e) => fn(123,e)}> 点我一下 </button> </div> </> ) }
-
绑定id和class,在react中class要使用className
reactfunction App() { const id = "1" const cls = "test" return ( <> <div> <button id={id} className={cls}> 点我一下 </button> </div> </> ) }
-
绑定多个class , 使用模板字符串的格式即可
react<button className={`${cls} ${id}`}> 点我一下 </button>
-
绑定style ,style = {color: 'red'}
reactfunction App() { const style = { color: "red", backgroundColor: "#baf", margin: "10px", border: "none" } return ( <> <div> <button style={style}> 点我一下 </button> </div> </> ) } // 也可以直接 <button style={ { color: "red", backgroundColor: "#baf", margin: "10px", border: "none" } }> 点我一下 </button>
-
添加html代码片段
reactfunction App() { const html = ` <section> <p>我是内容</p> </section>` return ( <> <div> <button dangerouslySetInnerHTML={{__html: html}}></button> </div> </> ) }
注意,dangerouslySetInnerHTML标记的标签内部不能有内容
-
循环遍历元素
reactfunction App() { const arr = [1,2,3,4] return ( <> <div> {arr.map(v => { return <div key={v}>{v}</div> })} </div> </> ) }