React基础_初始React_搭建项目+基础知识

公司主要的技术栈是Vue，所以平时对于Vue的使用会更多，自然对于其他内容的了解会比较少，所以从今天开始，和千千万万同我有一样想学习的同学一起走进React吧~

学习学得好，文档少不了
React官方文档
Create React App文档

1. cra(create-react-app)

1.1 创建项目

• 创建一个名为ftt_react的React项目 npx create-react-app ftt_app
• 
• 若你本地没有安装过create-react-app的话，可以根据提示进行安装哦
• 进行ftt_react项目中 cd ftt_react

1.2 查看package.json文件

查看package.json配置文件，我们发现，可执行指令有以下四种：
start: 启动开发服务器
build: 将应用打包到静态文件中用于生产。
test: 启动测试运行程序。
eject: 暴露配置项，删除此工具并复制构建依赖项、配置文件，并将脚本放入app目录。如果你这么做了，就回不去了!

我们可以根据自己的需求，例如npm run start执行不同的指令

1.3 文件结构

• 我们执行了 npm run eject 后会生成config文件夹，里面就是所有的配置文件
• node_modules 依赖包汇总
• public 静态资源
• src 包含所有的开发代码

1.4 查找入口文件方法

• index.js 入口文件，存在于src目录下。如何判断其为入口文件呢，我们在config文件夹中可以找到webpack.config.js文件，其中entry位置为entry: paths.appIndexJs，path为上面引入进来的，根据引入，找到path文件，及文件内对应的变量appIndexJs我们可知，其指向的是appIndexJs: resolveModule(resolveApp, 'src/index')。
• 同样查找模板文件index.html. template，我们可以在webpack.config.js中发现plugins下的template: paths.appHtml,,去path.js中查找appHtml，发现其指向的是appHtml: resolveApp('public/index.html'),

1.5 入口文件

在index.js文件中我们会发现，该文件中引入两个库React、ReactDOM，这两个库分别有着不同的功能：

• React 负责逻辑控制，将数据转换成VDOM，使用JSX语法一定要引入这个
• ReactDOM渲染实际DOM，将VDOM转换成真实DOM

2. JSX语法，使用{}包裹

2.1 变量

const str = ‘121212’

function Home () {
  return (
    <div>
      {str}
    </div>
  )
}

export default Home

2.2 函数使用

我们定义两个变量，一个是数组类型，一个是对象类型
```
const obj = {
	name: 'Ably',
	age: 20
}
const arr = ['ably', 20]

<div>
	{arr}{obj}
</div>
```
同样方法调用，数组类型没有问题，但是对象类型就会报错
`Objects are not valid as a React child `那么此时，如果我们想读取对象的值展示，就需要使用函数的方式

const obj = {
  name: 'Ably',
  age: 20
}
function myIntro(obj) {
 return `My name is ${obj.name}, And I am ${obj.age} year old`
}
<div>
  {myIntro(obj)}
</div>

2.3 JSX对象

const el = <div>我说jsx对象</div>

<div>
	{el}
</div>

2.4 条件语句

可以进行条件判断，可用于判断在何种情况下展示不同的组件

const isShowName = true
// 用法一：
      {
        isShowName ? <div>展示name</div> : <div>不展示name</div>
      }
// 用法二：
      {
        isShowName && <div>展示name</div>
      }

2.5 数组

上面说直接以变量的方式，是支持数组直接展示的，那么我们平常用的数组循环打印内容又是如何书写的呢？

const arrNum = [1,2,3,4,5,6,9]
// diff时，首先比较type即元素的类型，然后是key，所以同级同类型元素，key值必须唯一
<ul>
  {arrNum.map((item, idx) => (
     <li key={idx}>该元素的下标是{idx},元素的值是{item} </li>
  ))}
</ul>

2.6 属性

像上个例子的key值绑定一样

import imgUrl from '../logo.svg'

<img className="container" src={imgUrl} alt="图片存在" style={{width: '200px',height: '100px'}}/>

注：

• 上面的style={}，只是里面的值是对象类型，不是双括号哦
• react中样式类名为className，避免与类class冲突

2.7 模块化

当项目中的样式文件以引入时，为了避免不同的样式之间进行相互影响，可以采用模块化的形式。

import styles from './Home.module.css'

<ul className={styles.container}>
    <img src={imgUrl} alt="图片存在" style={{width: '200px',height: '100px'}}/>
</ul>

这样使用样式
生成的样式类名唯一，对开发大型项目时有很大的帮助。

3.react-router

3.1 安装react-router

yarn add react-router-dom@6

单页面应用的跳转最重要的是router。如果在做web应用需要用到的是react-router-dom而不是react-router。区别是react-router中包含了react-native中需要的一些组件，如果只做网页用不到

3.2 全局路由模式

index.js 中

// 引入 BrowserRouter
import { BrowserRouter } from 'react-router-dom';
// 包裹全局入口组件 App
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

3.3 在App.js页面中定义整个页面的路径信息

• 从react-router-dom中引入我们需要的组件
• Routes 包含Route， Route定义路径与组件间匹配关系，Link指定跳转地址

import { Routes, Route, Link } from 'react-router-dom';
function App() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/aricle">文章</Link>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/aricle" element={<MyAriticle />}></Route>
      </Routes>
    </div>
  );
}

function Home () {
  return (
    <div>
      这是首页信息啦啦啦啦
    </div>
  )
}

function MyAriticle() {
  return (
    <div>
      这是文章页面
    </div>
  )
}

export default App;

至此，页面的基本结构已经完成啦，我们可以写对应的内容和信息啦

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~