React学习笔记--环境的基本配置！

最新推荐文章于 2023-01-29 16:15:15 发布
最新推荐文章于 2023-01-29 16:15:15 发布
阅读量211 收藏
点赞数
文章标签： react webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_leaner/article/details/70967913
版权
  1. 创建目录结构(源文件夹src，用于存放js css 组件等)
  2. 初始化项目生成package.json文件

    npm init (回车然后自定义配置信息)
    npm init -y (自动默认配置信息)
  3. 安装npm第三方包(根据需求安装)
"dependencies": {
    "react": "^15.5.4",//react库
    "react-dom": "^15.5.4"//将react代码渲染为dom结构
  },
  "devDependencies": {
    "babel-core": "^6.24.1",//可以将es6语法规则转为es5
    "babel-loader": "^7.0.0",//转码对应的格式文件
    "babel-plugin-transform-runtime": "^6.23.0",//转换新的API
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "html-webpack-plugin": "^2.28.0",//用于生成主页面index.html,并自动引用相关的css js文件
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"//用来启用web服务
  }

4.创建入口文件 main.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>
    我创建成功了~~
  </div>,document.getElementById("box"))

创建index.html载体

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

5.webpack配置文件

var path=require('path')//路径规则
var htmlWebpackPlugin=require('html-webpack-plugin')//将文件合并用于生成index.html主文件
var webpack=require('webpack')
module.exports={
  entry:path.resolve(__dirname,'src/js/main.js'),//指定入口文件
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:"bundle.js"//最终合并的js文件
  },
  module:{
    rules:[//转码规则，写css文件时转换
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/\.(jpg|jpeg|bmp|gif|png)$/,use:'url-loader'}
    ]
  },
  devServer:{//热更新服务
    //contentBase:path.resolve(__dirname,'src'),
    open:true,
    port:4321,
    hot:true
  },
  plugins:[
    new htmlWebpackPlugin({          template:path.resolve(__dirname,'src/index.html'),
      filename:'index.html'//生成index.html并自动引入bundle.js
    }),
    new webpack.HotModuleReplacementPlugin() //启用热更新
  ]
}
  1. 根目录新建 .babelrc文件 code如下：
//解析jsx文件 
{
    "presets":["es2015", "stage-0", "react"],
    "plugins":["transform-runtime"]
}
  1. 在根目录下运行webpack 自动打包后index.html和bundle.js结构为：
    dist（文件夹）
    bundle.js（文件）
    index.html（文件）
    运行index.html文件
it_leaner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React环境配置
weixin_30832405的博客
04-21 158
一．环境配置 1、必须要安装nodejs 注意：安装nodejs稳定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0 2.安装脚手架工具 （单文件组件项目生成工具） 只需要安装一次 npm install -g create-react-app / cnpm install -g create-react-...
react的搭建和环境配置
weixin_44153357的博客
02-27 287
今天被同学问到了react的搭建和环境配置，自己没学到，就来捣鼓一次 步骤大概是 1、首先你的电脑得有下载node 2、然后就执行npm i -g create-react-app 这步是全局安装react的脚手架 3、紧接着是用这个脚手架 create-react-app myfirst-react-app（由于本人编码习惯，会习惯首字母大写，然后却发现会报错，最后全使用小写就没问题了） 4...
react的安装和环境配置
wangcuiling_123的博客
09-06 903
一：首先我们需要用到npm来管理react，所以我们需要先安装 node和npm，安装好后在cmd控制台输入 node -v npm -v 检测是否安装成功，成功后显示安装版本 二：接下来就是安装react了，首先找到你项目所在目录， 建立一个React 文件夹，进入后，在当前文件夹下打开cmd(在文件夹内，按住shift键，点击鼠标右键选择在此处打开命令行)，输入 npm init -
React学习之路一：React环境搭建
u013418556的博客
02-22 372
学习时主要参考官网的教程：https://facebook.github.io/react/docs/hello-world.html。本文操作系统使用的是windows1.安装node去官网（https://nodejs.org/en/download）下载最新的稳定版本。写本文时，安装的版本为v8.9.4。可以根据使用的系统下载不同的安装版本。下载完成后进行安装。新版的node安装完成后会自带...
react配置环境变量
yutingwu816的博客
01-29 3528
react配置环境变量
React Native 基础学习笔记.rar
01-28
React Native的学习通常从创建第一个应用开始，这通常涉及到安装Node.js环境，设置React Native的开发环境，包括安装React Native命令行工具（CLI）和配置模拟器或真实设备。然后，通过`react-native init`命令初始...
Course-Notes-React:React课程笔记
03-12
在命令行中输入`npm init`可以创建一个新项目，并生成`package.json`文件，这是项目的基本配置文件。 2. **创建React应用**：React应用通常使用Create React App工具快速初始化。运行`npx create-react-app my-app`...
React-first-app:Github搜索者和笔记记录者
05-17
标题中的“React-first-app: Github搜索者和笔记记录者”表明这是一个使用React技术构建的应用程序，主要用于在Github上进行搜索并记录笔记。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合...
react-native-practical-guide:Udemy课程的练习文件，作业和笔记
04-14
基础部分将涵盖React Native的基本架构、环境搭建、组件系统以及样式表。 2. **组件化开发** 在React Native中，一切皆为组件。理解如何创建自定义组件、使用内置组件（如View、Text、Image）以及管理组件的状态和...
Angular4学习笔记之准备和环境搭建项目
12-08
了解基本的英语阅读能力也很重要，因为Angular的官方文档通常是最新的资源，中文文档可能存在滞后。 在实际的项目开发中，作者提出的需求包括三个页面：主页、机体列表页和机体详情页。这些页面展示了如何在Angular...
React环境搭建
weixin_47075145的博客
11-18 6325
这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件，或者一些第三方库；：让目录结构更易懂:接下来，我们改动一下src里面的内容和结构，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉，事实证明，越亲切的事物我们越希望去接近。：里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到。，并且这也是react工程的。
react 环境配置
changan1999的博客
08-29 1183
react环境配置
React环境配置和基本使用
fareise的博客
09-03 1万+
1.准备：配置好Node环境，并且安装npm工具2.安装依赖包npm install babel -g npm install webpack -g npm install webpack-dev-server -g上面这三个依赖包都需要安装到全局，因为需要使用它们的命令行工具。其中babel是一个可以将ES6代码转换成ES5代码，这样我们就可以在编写代码的时候使用ES6的一些新特性了。webpa
React学习（一）——基础项目搭建以及环境配置
热门推荐
daxiazouyizou的博客
03-29 6万+
    大家好，我是凯文，本篇文章将介绍React前端框架的环境配置以及项目搭建方法，其中涉及到了node.js（js运行平台）、npm（依赖包管理工具）等内容。网上已经有许多类似的教程，这篇文章可以给各位做个参考，同时给我自己当做一个笔记。    React作为时下较为热门的前端框架，由facebook公司开创，用于搭建响应式的前端页面，这里不作太多介绍。下面我们直接开始搭建React框架运行环...
React环境及使用
代码青春
06-28 830
在cmd命令行中输入：                    npm install -g create-react-app        等待其安装，意思是全局安装create-react-app脚手架工具，然后就可以使用命令创建新的react项目。        在cmd中输入：                    create-react-app my-new-app           ...
详解从零开始配置汇编开发环境(DosBox,MasmPlus)
Scott Wang's blog
05-30 1万+
一、前言 这几天在学习汇编语言，但是苦于找不到一个好用的IDE，编译连接感觉很麻烦，今天，终于找到了解决办法，采用MasmPlus+DosBox的方式，很方便。本着让其他筒子们少走弯路的想法，也算给自己一个交代，特与大家分享。 二、资源准备 下载2个软件： DosBox-0.74：http://pan.baidu.com/s/1o63gkkU MasmPlus：http://pa
React配置环境
吃蛋糕的居居
07-09 795
1.先下载node(用最稳定的版本) 2.全局安装：(第一次安装的时候需要用到) npm install webpack -g npm install webpack@^4.39.2 npm install --save-dev webpack-cli@^3.3.7 3.项目安装步骤： (1)创建站点(一个新的文件夹) (2)初始化项目文件：npm init (3)npm install webpack@^4.39.2 --save-dev (4)npm install webpac...
配置React项目的运行环境
weixin_53011724的博客
11-28 2063
两种配置react项目运行环境的方法 第一种方法，一步步配置项目的运行环境： 1）下载node，在官方网站可以下载，安装步骤不难，差不多一步步意 点next就行； 2）运行cmd 输入node -v npm -v两行命令检查是否安装成功； 3）接下来在cmd下输入npm install -g webpack (最好使用cnpm命令进行下载，快一点)，全局安装webpack打包软件； 4）然后输入npm install -g webpack-cli 全局安装webpack-cli脚手架； 5）接下来安装
react-css-modules怎么配置
最新发布
05-19
使用 `react-css-modules` 需要进行以下配置： 首先安装依赖包： ``` npm install react-css-modules --save npm install babel-plugin-transform-decorators-legacy --save-dev ``` 在 babel 配置文件 `.babelrc` 中添加 `transform-decorators-legacy` 插件： ```json { "plugins": [ "transform-decorators-legacy" ] } ``` 在 webpack 配置文件中添加 `css-loader`： ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }; ``` 然后在组件中使用 `react-css-modules`： ```javascript import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './MyComponent.css'; class MyComponent extends React.Component { render() { return ( <div styleName="container"> <h1 styleName="title">Hello, World!</h1> </div> ); } } export default CSSModules(MyComponent, styles); ``` 在上面的示例中，`styles` 是一个对象，其中包含了组件的样式。`styleName` 属性用于指定样式的名称，它会自动从 `styles` 对象中查找对应的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值