欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React

程序员文章站 2024-03-25 14:43:52
...

1. webpack,React

是打包所有的资源。模块打包机

  1. 安装webpack
    cnpm install webpack webpack-cli -S
    检测安装版本
    webpack -v

  2. ** 新建文件夹aa(文件夹名自定义)**
    打开命令符,在终端输入 cnpm init (一路回车) / cnpm init -y(不回车),
    文件夹会多出一个package.json 文件,package.json是对项目的说明。

  3. 创建src文件,在src 文件在创建一个组建文件夹components,在components文件夹里创建nav.js

  4. 在nav.js中写入内容

//导出一个函数
export default function nav(){
    console.log('123456789')
}
  1. 在src文件夹里创建一个app.js文件,并在文件中导入nav.js:(app.js是一个入口文件)
import Nav from './components/nav'
Nav()

  1. 在webpack.config.js中写入
const path =require('path')  //把path引进来

module.exports={
    entry:'./src/app.js',     //入口文件
    output:{   //出口文件
        filename:'main.js', //输出之后,打包之后有一个文件夹来接收
        path:path.resolve(__dirname, 'dist/')  //输出之后文件路径
        //dirname 是当前文件路径所在的目录   ‘dist/是main.js所在的目录里
    }
}

  1. 在终端输入webpack, 这样在aa文件夹里会自动生成dist文件夹,dist的文件夹里面有main.js文件
  2. 在src文件夹里创建一个index.html文件,引入main.js
  3. 打开网页,就能看到console.log()里的内容

2. 安装react

安装: cnpm install react react-dom -S
在app.js中写入:

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Hello</div>,
    document.getElementById('root')
)

在index.html中 写入

<body>
<div id="root">

</div>
<script src="../dist/main.js"></script>
</body>

安装Es6:cnpm install babel-core babel-loader babel-preset-react --save-dev
安装babel-loader: cnpm install [email protected] -S

在webpack.config中写入

 module:{
        rules:[
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['react']
                        }
                    }
                ]
            }
        ]
    }

安装完成

安装webpack服务器(热加载)

这样每次写完代码,不用在终端输入webpack进行打包,手动刷新页面

  1. 在终端输入
    cnpm install webpack-dev-server html-webpack-plugin -S
  2. 在webpack.config.js中配置内容
const  HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
  1. 在package.json里面写入
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server"   
  },
  1. 在终端输入 cnpm run server ,便可以出现 localhost:8080
相关标签: webpack.react