当前位置：首页 > news >正文

nodejs安装使用React

news 2025/7/20 1:29:52

1、react安装
首先，确保电脑上具备nodejs环境，之后用 win+r 呼出控制台，输入 cmd 命令弹出cmd控制台（小黑框）之后在默认路径输入如下代码

npm i -g create-react-app //全局安装react环境无需选择特定文件夹

安装成功后用cd / 命令跳转到要创建目录的文件夹之下输入如下代码创建一个react项目，我这里安装在了C盘中

create-react-app mreact  //create-react-app + 文件名 该文件名是react根文件名cd mreact //转到mreact文件目录下npm start  //运行项目

2、封装个组件，导出组件

function Profile() {return (<div>ddade</div>);
}export default function Gallery() {return (<section><h1>导入应该主键</h1><Profile /><Profile /><Profile /></section>);
}

3、引入组件使用，组件function Dade()首字母必须大写

import logo from './logo.svg';
import './App.css';
import Gallery from './admin/index.js'function Dade(){let dades = 999999;if(dades == 999999){return (<div>{dades}</div>)}else{return (8888)}
}function App() {return (<div className="App"><Gallery /><section><Dade /></section></div>);
}
export default App;

在这里插入图片描述

function Item({ name, isPacked }) {if (isPacked) {return <li className="item">{name} ✔</li>;}return <li className="item">{name}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride 的行李清单</h1><ul><Item isPacked={true} name="宇航服" /><Item isPacked={true} name="带金箔的头盔" /><Item isPacked={false} name="Tam 的照片" /></ul></section>);
}

4、遍历

import logo from './logo.svg';
import './App.css';
import Gallery from './admin/index.js'function Dade(){const people = ['遍历1','遍历1','遍历1','遍历1','遍历1',];const lis = people.map(req=><li>{req}</li>);let dades = 999999;return (<div>{dades}{lis}</div>)
}function App() {return (<div className="App"><Gallery /><section><Dade /></section></div>);
}
export default App;