React初体验

90 阅读2分钟

 闲得无聊,不知道看点啥,在和妹妹(男)的闲扯中提到了他们一直在用React框架,反正闲着也是闲着,不如就学一学看一看。万一学会了能涨薪呢(不可能)

1、创建一个React项目

// 在终端中输入
npx create-react-app {项目名}

1.png  点击回车后自动创建React项目,创建完成后,在项目目录中打开终端输入 npm run start,不出意外的话,一个新的React项目就启动了

如果能看到这个页面,就证明你的React项目已经创建完成了

2.png

2、开始编写自己的页面

 当然,项目创建完成了之后也不能看着这个球在这转吧,所以我们要自己上手写一个页面,写页面之前,先熟悉一下项目目录结构

 目前需要了解的就是public文件夹下的页面静态文件,React渲染完成后会挂载到 index.html页面中 src下的index.js文件就是项目的入口文件

3.png

 目前,我们现在要做的就是,删除src目录下的文件,然后新建一个index.js 开始重新编写一个入口文件

 当前安装的是React18的版本,index.js 中的入口文件写法和网上查到的都不太一样,直接放上代码

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<h2>你好呀!</h2>)

 这个时候刷新浏览器页面,你就能看到你的新页面

4.png

3、编写一个属于你的React组件

 在入口文件的同层级下,新建App.jsx文件,因为我用的是WebStorm,在页面创建好之后输入rcc然后按Tab就能自动创建代码,创建完成后代码如下

5.png  然后在index.js中引入该文件后,你就能在页面上看到你的第一个React组件了

6.png