闲得无聊,不知道看点啥,在和妹妹(男)的闲扯中提到了他们一直在用React框架,反正闲着也是闲着,不如就学一学看一看。万一学会了能涨薪呢(不可能)
1、创建一个React项目
// 在终端中输入
npx create-react-app {项目名}
点击回车后自动创建React项目,创建完成后,在项目目录中打开终端输入 npm run start,不出意外的话,一个新的React项目就启动了
如果能看到这个页面,就证明你的React项目已经创建完成了
2、开始编写自己的页面
当然,项目创建完成了之后也不能看着这个球在这转吧,所以我们要自己上手写一个页面,写页面之前,先熟悉一下项目目录结构
目前需要了解的就是public文件夹下的页面静态文件,React渲染完成后会挂载到 index.html页面中 src下的index.js文件就是项目的入口文件
目前,我们现在要做的就是,删除src目录下的文件,然后新建一个index.js 开始重新编写一个入口文件
当前安装的是React18的版本,index.js 中的入口文件写法和网上查到的都不太一样,直接放上代码
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<h2>你好呀!</h2>)
这个时候刷新浏览器页面,你就能看到你的新页面
3、编写一个属于你的React组件
在入口文件的同层级下,新建App.jsx文件,因为我用的是WebStorm,在页面创建好之后输入rcc然后按Tab就能自动创建代码,创建完成后代码如下
然后在index.js中引入该文件后,你就能在页面上看到你的第一个React组件了