nodejs安装使用React

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;