ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react安装及简单使用

2022-05-19 15:02:53  阅读:156  来源: 互联网

标签:npm -- App loader react webpack 简单 安装


一、脚手架工具create-react-app安装

使用以下命令进行安装:

npm install -g create-react-app

二、create-react-app的使用

  1. 在需要创建项目的位置打开命令行
  2. 输入create-react-app + 项目名称的命令,比如:
create-react-app todolist

  1. 当项目创建完成后,可以进入项目,并启动:
cd todolist
npm start

三、脚手架工具生成的目录结构

  • 重要文件:
  1. index.html
  2. index.js
  3. App.js
  • 文件内容:
  1. App.js
import React, { Component } from 'react';
/**
    import {Component} from 'react'
    相当于:
    import {Component} from React // 因为react导出React对象
    由于解构赋值的原因,所以Component等于React.Component
*/
//所有的组件都要继承Component
class App extends Component {
  // 发送页面内容
  render() {
    return (
      <div>
        Hello World
      </div>
    );
  }
}
// 导出App模块
export default App;

  1. index.js
import React from 'react'; // 导入React的作用是使用jsx语法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用标签的语法,叫做jsx语法
ReactDOM.render(<App />, document.getElementById('root'));

  1. index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>TodoList</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

1.快速构建react项目:

npm install -g create-react-app // 全局安装create-react-app (只需要安装一次)
create-react-app demo // 创建项目
cd demo // 进入项目目录

创建的项目目录结构:

-Demo // 项目名
  -node_modules // 存放第三方包
  -public
    -favicon.ico
    -index.html
    -manifest.json
  -src // 页面代码都写在这下面
    -App.css
    -App.js
    -App.test.js
    -index.css
    -index.js //项目入口
    -logo.svg
    -serviceWorker.js
    -setupTest.js
.gitignore
package.json
README.md
yarn.lock

2.初始化项目

在项目的根目录下打开命令行,输入:

npm init -y   // 项目初始化, 执行完后会生成 package.json文件 

3.安装所需包

安装react 的东西,以及antd

npm i --save react react-dom antd

安装webpack 的三个基本项

npm i webpack webpack-cli webpack-command --save-dev

安装webpack

npm i -D webpack  // 安装最新稳定版

安装webpack 服务器 webpack-dev-server,让启动更方便

npm i --save-dev webpack-dev-server

自动创建html文件 html-webpack-plugin

npm i --save-dev  html-webpack-plugin

清除无用文件 clean-webpack-plugin,将每次打包多余的文件删除

npm i --save-dev clean-webpack-plugin

样式编译loader插件

npm i --save-dev style-loader css-loader  // css相关loader
npm i --save-dev node-sass sass-loader  // scss 相关loader
npm i --save-dev file-loader url-loader // 加载其他文件,比如图片,字体

安装babel

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react  @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader

4.根目录创建webpack.config.js文件,代码如下

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
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: /\.(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'
        })
    ]
}

5.在根目录下添加文件 .babelrc,代码如下

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

6.修改 package.json

 "scripts": {
    "start": "webpack-dev-server --open --mode production",
    "watch": "webpack --watch",
    "build": "webpack --mode production",
    "dev": "webpack  --mode development& webpack-dev-server --open  --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

7.修改public / index.html文件

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>demo</title>
  </head>
  <body>
      <div id="root"></div>
  </body>
</html>

8.修改src / index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

9.修改src / App.js文件

import React, { Component } from 'react';
import './App.css';  // 引入样式文件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="main">
        <div>我是首页</div>
      </div>
    );
  }
}
export default App;

10.修改 src / App.css文件

.main {
  background: darkgray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

11.启动项目

(1) 在项目根目录下执行

npm run dev

(2) 如果装有yarn,也可以用yarn执行

yarn start

执行结果:xxx

 

作者:年轻人多学点
链接:https://www.jianshu.com/p/931b5864a101
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:npm,--,App,loader,react,webpack,简单,安装
来源: https://www.cnblogs.com/sundaysandroid/p/16288476.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有