React知识-----①

实习了已经有三个月了~ 然后总结一下在公司期间学习有关React的一些知识内容☺

---

一、项目初始化

1、npm install -g creat-react-app

2、creat-react-app myapp(自定义项目名称)

3、cd myapp

4、npm start

create-react-app就是react的脚手架，可以帮助你搭建好react的一些开发文件
react项目初始化相对于vue要稍微慢一点
当你看到网页展示一个大大的React图标以后表示项目创建成功啦~（http://localhost:3000）

常见小问题：

① node版本不匹配

react目前支持最低的node版本是14 如果版本不对要去node官网重新下载

！！推荐使用nvm-----node版本管理工具！！

有时候写Vue为了兼容老项目，node的版本不能太高 然后有了nvm以后就可以很方便切换node版本

② 下载慢

简单粗暴：npm config set registry https://registry.npm.taobao.org 切换淘宝镜像源

---

二、简单的React项目

跟Vue差不多，页面入口文件也是index.html

教程推荐是把src文件夹下的文件都删除掉

然后在src下新建一个index.js文件

当时学的是react17 先看看17的写法

import React from "react";
import ReactDom from 'react-dom'

ReactDom.render(<h1>Hello World!</h1>,document.getElementById('root'))

react 18可以这样写

import React from "react";
import ReactDom from 'react-dom/client'

const root = ReactDom.createRoot(document.getElementById('root'))
root.render(<h1>Hello World!</h1>)

同样的效果

---

三、JSX语法

刚刚上面可以看到直接把<h1>Hello World!</h1>当成一个参数一样传给了render方法

其实它既不是html标签，也不是字符串

官方文档描述：

从Vue2转过来React可能一下子适应不了，但后面慢慢学习以后也就习惯了。

个人感觉就是能够将JavaScript和Html结合起来一起用，提高交互性。