react 第一个项目

复制代码

sudo npx create-react-app reactdemo01

npx node.js工具

create-react-app 核心包（固定写法）用于创建react项目

后跟项目名层

启动一个新的 React 项目 -- React 中文文档

复制代码

//项目的根组件
//App -> index.js ->/Users/king/Documents/reactapp/reactdemo01/public/index.html 的root
function App() {
  return (
    <div className="App">
      this is app 
    </div>
  );
}

export default App;

// 核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//根组件
import App from './App';
// 把App组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

遇到的问题

保存 "App.js"失败: 权限不足。选择 "以超级用户身份重试" 以超级用户身份重试。

sudo chown -Rv 用户名项目路径

JSX

JSX 是javascript 和xml (html)的缩写，表示在js代码中编写html模版结构它是react中编写UI模版的方式

优势

1.html 声明式模版写法

2.js的可编程能力

jsx的本质

jsx本质不是标准的js语法它是js的语法扩展浏览器本身并不能识别需要通过解析工具做解析之后才能在浏览器中运行

Babel · Babel

jsx中使用js表达式

复制代码

//项目的根组件
//App -> index.js ->/Users/king/Documents/reactapp/reactdemo01/public/index.html 的root
function getName() {
  return "return name"
}
const count = 100
function App() {
  return (
    <div className="App">
      this is app 
      {/*使用引号传递字符串*/}
      {'this is message'}
      {/*识别js变量 */}
      {count}
      {/*函数调用 */}
      {getName()}
      {/*方法调用 */}
      {new Date().getDate()}
      {/*使用js对象*/}
      <div style={{color: 'red'}}> 20240117 </div>
    </div>
  );
}

export default App;

在jsx中可以通过大括号{}识别javascrip中的表达式比如常见的变量函数调用方法调用等

if switch 变量声明等语句不是表达式不能在{}中

实现渲染

列表

复制代码

import logo from './logo.svg';
import './App.css';
const list = [
  {id:1001,name:"张三"},
  {id:1002,name:"李四"},
  {id:1003,name:"王二"},
  {id:1004,name:"麻子"}
]
function App() {
  return (
    <div className="App">
      hello world
      {/*列表渲染
        map 遍历哪个结构 return 结构
        注意事项 加上一个独一无二的key 字符串或者numberid 
        key 的作用 react 框架内部使用 提升更新新能
      */}
      <ul>
        {list.map(item =>  <li key={item.id}>  {item.name}</li>)}
      </ul>
    </div>
  );
}

export default App;

条件渲染

复制代码

const isLogin = false
function App() {
  return (
    <div className="App">
      hello world
      {isLogin && <span> this is App  </span>}
      {isLogin ? <span>lock</span> : <span>xxxxx</span>}
    </div>
  );
}

const info_type = 1
function create_widget() {
  if (info_type == 1) {
    return  <div>两个喜鹊叫喳喳</div>
  } else if (info_type == 2) {
    return  <div>树上的鸟儿成双对</div>
  } else if (info_type == 3) {
    return  <div>河边两个小娃在钓鱼</div>
  } else {
    return  <div>俩娃妈妈拿着刺条去河边</div>
  }

}
function App() {
  return (
    <div className="App">
      {create_widget()}
    </div>
  );
}

export default App;