jquery项目怎么跑起来_React+webpack+Ant Design-一个能跑起来的项目

最新推荐文章于 2023-02-09 16:40:52 发布

weixin_39678103

最新推荐文章于 2023-02-09 16:40:52 发布

阅读量236

点赞数

文章标签： jquery项目怎么跑起来

本文链接：https://blog.csdn.net/weixin_39678103/article/details/111671582

版权

本文介绍了如何使用create-react-app创建一个React项目，并结合Ant Design搭建一个Markdown文档实时编辑器。首先，通过create-react-app初始化项目，然后引入Ant Design并配置webpack和less-loader。接着，创建自定义组件并展示在页面上，实现了一个简单的页面。作者分享了搭建过程中的学习心得，同时提供了GitHub仓库链接，欢迎感兴趣的人一起交流。

摘要由CSDN通过智能技术生成

做了两年前端，大部分时间还是接手做了一半的项目，自己没有从零开始创建过新项目，准备在本地搭建一个项目，先实现一个markdown文档实时编辑器，路由部分暂时不配置。

一、create-react-app

create-react-app已经很完善了，结合官方文档查看，就能搭建出一个基本的react项目了，创建方式可以选择以下一种，挑自己熟悉的方式；

npx create-react-app my-app // npx 来自 npm 5.2+ 或更高版本
npm init react-app my-app // npm init <initializer> 在 npm 6+ 中可用
yarn create react-app my-app // yarn create 在 Yarn 0.25+ 中可用

创建完成之后就会得到一个这样结构的项目：

通过

npm start

就可以运行项目了。

id为root的组件渲染位置：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

知识点：StrictMode是一个用以标记出应用中潜在问题的工具。就像Fragment，StrictMode不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。

App组件代码和样式来自App.js和App.css，我们改变这两个文件中的代码，页面就会跟着变化，如果修改这个文件或者添加一些组件，可以先在这个文件中进行修改。

接下来我引入了Ant Design，组件库除了有统一的样式之外，还会让一些事件调用更加方便，在使用之前需要看好官方文档，很多简单的功能都是被封装好的。

引入：

$ npm install antd --save
$ yarn add antd

因为antd组件样式是通过less写的，所以我这时候引入了webpack和less-loader，关于webpack，来自官方文档的解释是：

你无需安装或配置 Webpack 或 Babel 等工具。它们是预先配置好并且隐藏的，因此你可以专注于代码。
只需创建一个项目，就可以了。

但是需要手动添加一个webpack.config.js文件，配置如下：

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const { getThemeVariables } = require('antd/dist/theme');

module.exports = {
	devtool: 'inline-source-map',
	entry: {
		index: './src/index.js'
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'build')
	},
	module: {
		rules: [{
			test: /.css$/,
			loader:['style-loader', 'css-loader']
		}, {
			test: /.scss$/,
			loader: ['style-loader', 'css-loader', 'sass-loader']
		}, {
			test: /.less$/,
			use: [{
				loader: 'style-loader',
			}, {
				loader: 'css-loader', // translates CSS into CommonJS
			}, {
				loader: 'less-loader', // compiles Less to CSS
				options: {
					lessOptions: {
						modifyVars: getThemeVariables({
							dark: true, // 开启暗黑模式
							compact: true, // 开启紧凑模式
						}),
						javascriptEnabled: true,
					},
				},
			}]
		}, {
			test: /.(png|svg|jpg|gif)$/,
			loader: 'url-loader',
			options: {
				limit: 10000,
				name: 'img/[name].[hash:7].[ext]'
			}
		}, {
			test: /.(js|jsx)$/,
			loader: 'babel-loader',
			exclude: /node_modules/
		}]
	},
	devServer: {
		contentBase: './build',
		port: 8081,
		inline: true,
		hot: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new HtmlPlugin({
			template: 'public/index.html'
		})
	]
}

这里引入antd需要使用webpack的配置内容，需要在package.json中进行配置：

重新启动后，就可以使用Ant Design引入组件了。

接下来我们考虑写一个自定义的组件，我的习惯是在src文件夹中新建一个component文件夹，用于存放组件，如果是单页内容，可以命名为page。

在App.js中对引入组件，并写在想要显示的位置：

import MarkdownDemo from "./page/MarkdowDemo";

function App() {
  return (
      <div>
          <MarkdownDemo />
      </div>

  );
}

一个最简单的组件内容：

import * as React from "react";
import './index.scss';

class MarkdownDemo extends React.Component{
   render() {
      return (
         <div className='editor'>
            component content
         </div>
      )
   }
}

export default MarkdownDemo