使用react实现一个简版的印象笔记App

陈瀛Neptune

于 2024-02-01 16:19:07 发布

阅读量966

点赞数 10

文章标签： react.js 前端前端框架 javascript ecmascript

本文链接：https://blog.csdn.net/weixin_41154796/article/details/135976920

版权

一、效果图展示

二、初始化项目

① 安装react脚手架工具

// 全局安装 create-react-app
sudo npm -g install create-react-app
// 通过create-react-app命令创建react项目
create-react-app evernote

除了通过全局安装create-react-app来创建react项目外，我们还可以通过npm init命令去创建，即

npm init react-app evernote

因为执行npm init命令的时候，会自动在init之后的包名加上create前缀，所以相当于安装并执行create-react-app包，所以我们再传入项目名称即可创建对应的react项目了。注意，react的项目名不能以大写字母开头。

② 修改public下的index.html文件
react项目和vue项目一样也是单页面应用，所以public目录下也会有一个index.html页面，用于挂载react渲染的结果。由于我们的项目中会用到一些字体图标，所以我们需要把我们的字体链接对应的css引入进来，如:

// public/index.html
<!DOCTYPE html>
<html lang="en">
    <head>
         <link rel="stylesheet" href="//at.alicdn.com/t/font_1609262_ijm97o315o.css"/>
    </head>
</html>

这个在线css链接可以到阿里巴巴iconfont字体库中找到，如图所示:

③ 修改src/App.js文件
src/App.js是项目的根组件，我们将App.js中的代码删除，默认App是函数组件，我们这里改成类组件，因为我们需要让App组件拥有自己的状态，然后修改为如下代码:

import React from 'react';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="app-container">
          hello evernote.
      </div>
    );
  }
}
export default App;

④ 修改src/App.css
将原来的App.css内容清空，这里样式就不做过多解释，然后修改如下:

.app-container {
  display: flex;
  height: 100%;
}
.app-left {
  width: 10%;
  min-width: 190px;
  background: #343434;
}
.app-left-header, .app-left-body-title {
  display: flex;
  align-items: center;
  color: white;
  font-weight: bold;
  padding: 10px 0;
}
.add {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background:#6fcb66;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
  font-weight: bold;
}
.notebook-icon {
  height: 25px;
  text-align: center;
  line-height: 25px;
  margin: 0 5px 0 10px;
}
.notebook-list, .app-center-list{
  margin: 0;
  list-style: none;
  padding: 0;
  color: white;
}
.notebook-list li {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  padding: 5px 0  5px 25px;
}
.notebook-list .active {
  background: #1a1a1a;
}
.notebook-list li i {
  margin-right: 3px;
}
.app-center{
  width: 12%;
  min-width: 180px;
  background: #ececec;
  display: flex;
  flex-direction: column;
}
.app-center-header {
  padding: 10px 0px 10px 10px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.app-center-list {
  padding: 0;
  height: 100%;
  overflow: scroll;
}
.app-center-list .active {
  background: yellow;
}
.app-center-list li {
  margin: 5px 10px;
  height: 180px;
  background: white;
  color: black;
}
.app-center-list-item .note-header {
  font-weight: bold;
  text-align: center;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 5px;
  font-size: 12px;
}
.app-center-list-item .note-content {
  padding: 0px 10px;
  font-size: 13px;
  line-height: 22px;
  overflow: hidden;
  height: 130px;
  line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.app-right {
  width: 78%;
  display: flex;
  flex-direction: column;
}
.app-right-header {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  border-bottom: 1px solid #ccc;
}
.app-right-header .notebookName {
  margin-left: 5px;
  font-weight: bolder;
  font-size: 13px;
}
.app-right-title {
  height: 20px;
  line-height: 20px;
  padding: 8px 0 8px 30px;
  font-weight: bold;
  outline: none;
}
.app-right-content {
  display: flex;
  flex: 1;
  overflow: scroll;
}
.app-right-edit {
  background: #22272a;
  width: 50%;
  color: white;
  font-size: 15px;
  line-height: 25px;
  padding: 10px 0 0 10px;
  outline: none;
  resize: none;
}
.app-right-show {
  border-top: 1px solid #ccc;
  width: 50%;
  padding-left: 20px;
  overflow: scroll;
}

这里为了方便，将所有样式都写到了，App.css中，这样其他子组件都可以共享App.css中定义的样式了。

④ 修改index.css
为了让App组件能够占满全屏，需要对html、body、#root进行高度100%的设置，如:

html,body{
    height: 100%;
}
#root {
  height: 100%;
}

至此，evernote项目已经初始化完成。

三、项目分析

从效果图上可以看到，整个印象笔记分为左、中、右三块&#

最低0.47元/天解锁文章

陈瀛Neptune

关注

10
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用react实现一个简版的印象笔记App

一、效果图展示二、初始化项目① 安装react脚手架工具// 全局安装 create-react-appsudo npm -g install create-react-app// 通过create-react-app命令创建react项目create-react-app evernote除了通过全局安装create-react-app来创建react项目外，我们还可以通...
复制链接

扫一扫