0基础进大厂，第15天，React框架基础篇：React.jsx——react的持续进阶之路

引言

在前一篇文章中，我们只是创建react项目输出了一个"Hello React"，但请别急，道虽远，但路在脚下。

接下来，我们就仔细讲讲react项目里如何写基础的代码，这和我们平时直接写js代码还有有所不同的。

继续介绍项目结构

package.json

• 依赖声明 ：定义项目的元数据（如名称、版本、入口文件）和直接依赖（dependencies 和 devDependencies），但版本范围通常使用语义化符号（如 ^18.2.0 允许次版本更新）。
• 灵活性：开发者可手动修改，用于声明兼容的依赖范围，便于获取新功能或修复。
• 脚本命令 ：通过 scripts 字段定义开发、构建等命令（如 npm start）

package-lock.json

• 版本锁定 ：由 npm 自动生成，记录所有依赖（包括间接依赖）的精确版本 、下载地址（resolved）和哈希值（integrity），确保不同环境安装结果完全一致。
• 稳定性 ：防止因依赖版本浮动导致的兼容性问题（如 ^18.2.0 可能安装到 18.3.0，但锁文件固定为 18.2.0）。
• 依赖树管理：扁平化记录完整的依赖结构，加速安装并解决嵌套依赖冲突

package.json和package-lock.json的存在，让我们拿到别人的项目，只需要在终端输入npm i 即可完成依赖的安装

.gitignore

这里声明了在向仓库远程提交代码时不需要上传的文件，比如一些API密钥、依赖等等。在项目初始化时，已经写好了一些不需要提交的文件，后续你也可以根据需要，自己添加。

README.md文件

这是介绍项目的文件，格式为markdown，中文翻译过来就是"读我"，相当的接地气，所以，以后在看别人的项目时，先读readme.md这个文件，看看项目作者的介绍。以后你自己开发项目，不管开不开源，都应该写一个readme文件，因为也要方便一下若干时间后的自己，方便自己能够快速回顾曾经写的项目。

node_modules文件

这是项目的大仓库，所有下载的第三方插件，包括react的源码，都在这里面，不可乱删。

语法介绍

温馨提示： 可以接着上一个项目接着写，也可以自己重新创建一个（忘记了，可以看一下上一篇文章），把没必要的删干净一些，这样就不会觉得难掌握。

JSX

• 为什么是jsx？不是js？jsx？是什么东西？
• 后缀写jsx和js没有区别，但是一定写jsx
• jsx写固定的HTML标签在react里有提示，像以前一样，js没有，体验感不好
• 将 html 写在 js 中
• 在 html 中植入 js 代码需要用 {}
• 类名不再用class，采用className，因为react框架用掉了class这个关键字
• jsx 的循环渲染
• jsx 的条件渲染 （不能用 if）
• 可以使用三元运算符

来到App.js文件

• 一个函数就是一个组件，通过在return（）里写HTML来写一个组件，或者称之为一个页面。
• 一定要有一个div包裹里面所有的代码
• 在div里面就可以像以往一样正常写HTML代码

function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
    </div>
  );
}
export default App;

声明一个变量，并将变量值渲染到页面上，需要{}

• 注意变量名声明的位置，在函数体里
• 我们在HTML里面通过{}嵌套变量名

function App() {
  const name = "React";
  return (
    <div className="App">
      <h1>Hello {name}</h1>
    </div>
  );
}
export default App;

介绍数组的一个遍历方法------map方法

• 因为react里不能在HTML里嵌套for循环，所以需要了解这个方法
• 这是数组的方法
• map(item,index,array)里接收三个参数，分别是每一项的值，下标，原数组
• 每一个item都要有唯一的标识，否则会报错，具体看下面的案例

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.map((item, index, array) => {
  console.log(item, index, array);
})

尝试用map方法遍历一个数组，将数据渲染到页面上

• 我们声明了一份json格式的数据
• 在ul标签里用{}包裹了一份js代码
• {}里使用了map方法遍历数组
• 如果没有在li标签里加上key={item.id}，在浏览器的控制台上可以看到报错，报错内容看下面的截图

function App() {
  const name = 'react'
  const songs = [
    { id: 1, name: '素颜' },
    { id: 2, name: '平凡之路' },
    { id: 3, name: '岁月神偷' },
    { id: 4, name: '小幸运' },
    { id: 5, name: '演员' }
  ]
  return (
    <div className="App">
      <h1>你好，{name}！</h1>
      <ul>
        {
          songs.map((item, index) => {
            return <li key={item.id}>{index + 1}.{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
export default App;

报错在说：map遍历的每一项都应该要有一个唯一的标识，虽然页面能正常，但是会影响页面的渲染效率，建议加上代码key={item.id}，也可以使用下标index,只要确保唯一即可。

这是成功渲染的页面：

jsx里写三元运算符

function App() {
  const flag = false
  return (
    <div className="App">
      <h3>{flag ? 'react 真有意思！' : 'react真难'}</h3>
    </div>
  )
}
export default App;

如何写样式呢？

方法一: 行内样式

需要嵌套两层{}

<h3 style = {{color = 'red'}}>{flag ? 'react 真有意思！' : 'react真难'}</h3>

方法二： 传入一个对象，因为对象自带一个{}

function App() {
  const flag = false
  const styleObj = {
    color: 'green'
  }

  return (
    <div className="App">
      <h3 style={styleObj}>{flag ? 'react 真有意思！' : 'react真难'}</h3> 
    </div>
  )
}
export default App;

方法三：给元素添加类名或id，引入外部的css文件

• 创建一个App.css文件
• 像以往一样写css代码

• 注意需要引入App.css文件,注意文件路径

import './App.css'
function App() {
  const flag = false
  const styleObj = {
    color: 'green'
  }

  return (
    <div className="App">
      <h3 className="person">{flag ? 'react 真有意思！' : 'react真难'}</h3> 
    </div>
  )
}
export default App;

子组件

• 一个App.jsx文件不可能写完一个项目里所有需要的组件
• 有些组件我们可以封装成一个个jsx文件
• 我现在要将这几行代码封装成一个子组件

<ul>
      {
        props.data.map(item => {
          return <li key={item.id}>{item.name}</li>
        })
      }
    </ul>

• 那么我们需要这样做
  
• 我们在src下面新建了一个components文件夹，当然，名字你随便取，注意命名规范即可
• List.js
• 子组件要被抛出
• 接收了一份数据，从APP.js传递来的

function List(props) { // 子组件
  console.log(props.data);
  
  return(
    <ul>
      {
        props.data.map(item => {
          return <li key={item.id}>{item.name}</li>
        })
      }
    </ul>
  )
}

export default List

• App.js
• 引入这个子组件
• 注意文件路径
• 子组件的函数名作为一个标签使用
• data={songs}传递值，这也是父向子通信的一部分，后面会细聊
• 这样，页面正常展示，我们也完成了一个子组件的封装

import List from './components/List.js'
function App() {  // 根组件  父组件
  const songs = [
    { id: 1, name: '素颜' },
    { id: 2, name: '平凡之路' },
    { id: 3, name: '岁月神偷' },
    { id: 4, name: '小幸运' },
    { id: 5, name: '演员' }
  ]

  return (
    <div>
      <h1>hello react</h1>
      {/* list */}

      <List data={songs}></List>
    </div>
  )
}

export default App;