精华内容
下载资源
问答
  • 创建一个react项目
    千次阅读
    2022-04-02 17:54:10

    读react.js小书观后感

    首先需要先确定在电脑中要有node.js的文件以及npm环境

    1.运行如下命令

    npm install -g create-react-app

    通过这条指令在电脑中加入一个创建react项目的指令

    2.

    create-react-app hello-react

    通过这个指令来创建一个hello-react的指令,如果安装慢的话可以运行如下命令切换淘宝镜像

    (如果是在企业实习的好兄弟千万不要切换镜像,每个公司都会有自己公司内部的镜像)

    npm config set registry https://registry.npm.taobao.org

    3.可以进入react项目中来将项目跑起来

    cd hello-react
    npm start

    就可以看到如下画面了

    更多相关内容
  • 如何创建一个React项目(超简单)

    千次阅读 2022-07-04 15:50:39
    这个时候使用cnpm就比npm快)4、(查看安装的cnpm版本号,用于检查cnpm安装是否成功)5、(安装React的脚手架)6、(创建一个React项目,项目名为my-project。环境是先切换到项目所在目录再执行,如Desktop和F盘)7...

    1、安装Node.js(官网Node.js下载)

    2、运行node -vnpm -v两条命令(检验是否下载成功Node.js)

    3、npm install -g cnpm --registry=https://registry.npm.taobao.org(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)

    4、cnpm -v(查看安装的cnpm版本号,用于检查cnpm安装是否成功)

    5、cnpm i -g create-react-app(安装React的脚手架)

    6、create-react-app my-project(创建一个React项目,项目名为my-project。环境是先切换到项目所在目录再执行,如Desktop和F盘)

    7、cd my-project

    8、cnpm start(这两步跟着它提示操作即可)
    在这里插入图片描述
    9、 如果你看到跟下图一样,说明你的React项目创建成功,在浏览器打开http://localhost:3000/便可看到创建好的React项目,至此,一个React项目创建完成!
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 如何创建一个 react 项目

    千次阅读 2020-12-17 17:54:56
    构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐)。 generator-react-webpack 脚手架搭建 react 项目。 webpack 一步一步构建 react 项目。 、create-react-app 脚手架快速...

    目录

    前言

    一、create-react-app 脚手架快速搭建 react 项目

    1、安装 create-react-app

    2、检测 create-react-app 是否安装成功

    3、创建 react 项目

    二、generator-react-webpack 脚手架搭建 react 项目

    1、安装 yeoman

    2、安装 generator-react-webpack

    3、创建 react 项目

    三、webpack 逐步构建 react 项目

    1、新建一个文件夹,比如:react-webpack,并进入这个文件夹

    2、初始化项目

    3、跑通 webpack

    (1)、安装 webpack 执行所需要的包环境

    (2)在项目根目录新建 webpack.config.js 文件,在其中指定入口和出口文件

    (3)、在根目录新建入口文件(index.html),并引入 webpack 指定的出口文件(index.js)

    (4)、配置项目打包命令——build

    (5)、测试 webpack 基础配置

    4、开发服务器配置

    (1)、安装 webpack-dev-server

    (2)、配置 webpack.config.js 文件

    (3)、在 packeage.json 里增加一个 scripts 命令——server。

    (4)、测试开发服务器配置

    5、热更新(可选)

    (1)、在出口文件 index.js 中添加一个配置——publicPath

    (2)、修改入口文件 index.html 引入的出口文件 index.js 的 src 地址

    (3)、热更新测试

    6、Babel 的安装配置

    (1)、安装 Babel 的相关包

    (2)、配置 module

    7、编写 React 文件测试

    (1)、安装 React 和 React-dom 包

    (2)、改写 app/index.js 文件,把原来原生的 JavaScript 代码改成 React 代码。

    8、模式的配置使用

    9、常用 webpack 插件

    1、extract-text-webpack-plugin

    后记


    前言

    构建React项目的几种方式:

    • create-react-app 脚手架快速搭建 react 项目(推荐)。
    • generator-react-webpack 脚手架搭建 react 项目。
    • webpack 一步一步构建 react 项目。

    一、create-react-app 脚手架快速搭建 react 项目

    Create React App 中文文档

    要求:Node>=8.10 并且 npm>=5.6

    建议:Node>=10.14.2,否则会报错:error babel-jest@26.6.3: The engine "node" is incompatible with this module. Expected version ">= 10.14.2". Got "10.13.0"

    1、安装 create-react-app

    npm install -g create-react-app       // Windows
    sudo npm install -g create-react-app  // Linux

    2、检测 create-react-app 是否安装成功

    create-react-app -V // 注意:V 是大写的 

    3、创建 react 项目

    npx create-react-app <项目名称>// 注意:名字不能包含大写字母。我的是 my-app。
    cd my-app
    npm start

    说明:npx 是 npm 5.2+ 附带的 package 运行工具。

    默认,create react app 创建的项目是看不到 webpack 相关的配置的,如果想要配置 webpack,只能先 eject 一下,执行命令来释放 webpack 的配置文件:

    npm run eject

    之后,你可能会遇到一个问题:Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". 

    我参考了 github 上前辈的解决方案——在 package.json 文件中的 eslintConfig 对象里新增 parserOptions 选项(仅供参考):

    如果没有立即生效,请重启下 VSCode 试试。若还不行,请君开疆拓土。

    二、generator-react-webpack 脚手架搭建 react 项目

    1、安装 yeoman

    npm install -g yo

    2、安装 generator-react-webpack

    npm install -g generator-react-webpack

    3、创建 react 项目

    创建一个文件夹,比如:react-demo,并进入这个文件夹:

    mkdir react-demo
    cd react-demo
    

    用生成器生成我们的项目目录 :

    yo react-webpack

    运行 react 项目:

    npm start

    三、webpack 逐步构建 react 项目

    1、新建一个文件夹,比如:react-webpack,并进入这个文件夹

    mkdir react-webpack
    cd react-webpack

    2、初始化项目

    npm init -y

    【拓展】 

    关联远程仓库:

    git remote add origin <url>

    3、跑通 webpack

    (1)、安装 webpack 执行所需要的包环境

    npm i webpack webpack-cli html-webpack-plugin -D

    (2)在项目根目录新建 webpack.config.js 文件,在其中指定入口和出口文件

    var path =require('path');
    module.exports = {
        //入口文件
        entry:'./src/index.js',
        //出口文件
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:'bundle.js'
        }
    }

    (3)、在根目录新建入口文件(index.html),并引入 webpack 指定的出口文件(index.js)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>React全家桶-jspang</title>
    </head>
    <body>
    
    </body>
    <!--引入出口文件-->
    <script src="./dist/index.js"></script>
    </html>

    (4)、配置项目打包命令——build

    打开package.json文件,在 scripts 属性中加入 build 命令:

    "scripts": {
        "build": "rm -rf dist/* && webpack"
    },

    rm -rf dist/* && webpack:由于每次重新执行 webpack,都会生成一个 js 文件,所以为了不占用过多内存,我们每次执行 webpack 前,应该先删除现有的 dist 文件夹,再执行 webpack。 

    (5)、测试 webpack 基础配置

    在入口文件(/app/index.js)中写入下列代码:

    function component(){
        var element = document.createElement('p');
        element.innerHTML = ('Hello world');
        return element;
    }
    
    document.body.appendChild(component());

    在终端中执行打包命令:

    npm run build

    就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。

    到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack 的输出结果。

    4、开发服务器配置

    (1)、安装 webpack-dev-server

    npm i webpack-dev-server -D

    (2)、配置 webpack.config.js 文件

    devServer:{
        contentBase: './',
        host: 'localhost',
        compress: true,
        port: 3000
    }

    (3)、在 packeage.json 里增加一个 scripts 命令——server。

    "scripts": {
        "start": "webpack-dev-server --open"
        "build": "rm -rf dist/* && webpack"    
    },

    说明:这里的 --open 是直接打开浏览器的意思。

    (4)、测试开发服务器配置

    在终端执行:

    npm run start

    报错:error code error errno 1 error react-webpack@1.0.0 server: `webpack-dev-server --open`

    解决报错

    5、热更新(可选)

    (1)、在出口文件 index.js 中添加一个配置——publicPath

    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist'),
        publicPath:'temp/'
    }, 

    (2)、修改入口文件 index.html 引入的出口文件 index.js 的 src 地址

    将 dist 改为 temp 即可:

    <script src="./temp/index.js"></script>

    (3)、热更新测试

    重新运行项目,修改看看是否实现了热更新。

    6、Babel 的安装配置

    (1)、安装 Babel 的相关包

    我们一般需要支持 es2015 和 React,所以要安装四个包:babel-core、babel-loader、babel-preset-es2015 和 babel-preset-react。

    npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -D

    (2)、配置 module

    在 webpack.config.js 里配置 module 的 loder:

    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loaders:"babel-loader",
                query:{
                    presets:['es2015','react']
                }
            }
        ]
    }

    通过上边的步骤,webpack 已经基本配置完成了。

    7、编写 React 文件测试

    (1)、安装 React 和 React-dom 包

    npm install --save react  react-dom

    (2)、改写 app/index.js 文件,把原来原生的 JavaScript 代码改成 React 代码。

    // index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(
        <p>Hello world</p>,
        document.getElementById("app")
    );

    在入口文件 index.html 中增加一个 div 标签,并把 id 设置成 app。

    // index.html
    <div id="app"></div>

    都配置完了,我们可以用之前配置好的 npm run server 命令进行预览了。

    如果在浏览器中看到了 "Hello world" 这段文字,说明我们的配置成功了,以后就可以愉快的进行开发了。

    8、模式的配置使用

    选项描述
    development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
    production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称,FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPlugin 和 TerserPlugin 。
    none不使用任何默认优化选项

    如果没有设置,webpack 会给 mode 的默认值设置为 production

    【注意】

    设置 NODE_ENV 并不会自动地设置 mode

    具体每种模式的具体配置请看这里

    9、常用 webpack 插件

    1、extract-text-webpack-plugin

    extract-text-webpack-plugin:从 js 文件中提取分离样式,包括 CSS、less、scss。

    详见:webpack的extract-text-webpack-plugin插件_No Bug !的博客-CSDN博客_extract-text-webpack-plugin

    后记

    其实自己配置 React 开发环境在实际工作中也并不多,因为我们的配置毕竟不是很成熟,而且支持较少。这里学习只是为了你更好的掌握 React 构建过程和设置参数。

    实际工作中尽量使用合适的脚手架工具。

    本文参考文档:怎样创建react项目? - html中文网

    展开全文
  • 创建一个react项目

    2022-02-14 17:13:24
    创建React项目,第步需要安装node.js,因为之前我已经开发Vue,所以node环境是OK的,执行以下命令,全局安装React脚手架命令: $ npm install -g create-react-app 在全局安装的过程中,如果出现React脚手架版本...

    写了许久的Vue了,现在准备写个React后台项目来练练手,首先第一步创建一个React项目。第一步肯定需要安装node开发环境,这个可以看这篇文章

    1. 创建React项目,第一步需要安装node.js,因为之前我已经开发Vue,所以node环境是OK的,执行以下命令,全局安装React脚手架命令:
    $ npm install -g create-react-app
    

    在全局安装的过程中,如果出现React脚手架版本必须在1x.x.xx以上,目前版本是9.x.xx,需要升级node提示的时候。这时候千万不要盲目的升级node版本,因为升级之后会导致原有的Vue项目运行可能出现异常情况。这时候我们可以使用nvm管理模块来管理我们需要使用的node版本,教程可以看这里

    1. 等我们安装好,使用cmd管理员权限进行命令行操作,选好需要使用的node版本之后,然后进行下一步;
      在这里插入图片描述
    2. 完成之后,可以进行下一步进行如下命令行指令:
    $  create-react-app my-react
    

    在这里插入图片描述

    1. 如果发现提示错误,然后使用如下指令进行项目初始化操作,npx不用单独安装,在npm包管理中自带npx
    npx create-react-app my-react   // my-react项目名
    
    1. 项目创建成功之后,然后cd ./my-react,然后再npm strat 就可以看到在浏览器中运行的React项目了。
    2. 新创建的React项目的webpack配置文件是隐藏的,如需做配置运行npm run eject生成配置文件。
    3. 如果React项目使用完毕之后,需要切换回Vue项目,有可能需要把node版本切换回去低版本,使用nvm use [versions]指令,然后再启动vue项目就可以了。
    4. 附上项目地址
    展开全文
  • 创建一个react项目有三种方式: 1. create-react-app 快速脚手架(简单,类似于 vue-cli 工具) 2. webpack一步一步构建 3. 第三方脚手架(generator-react-webpack,需要yeoman的支持) 这里主要介绍利用 ...
  • 文章目录、使用create-react-app创建react应用1.1. react脚手架1.2. 创建项目并启动1.3. react脚手架项目结构1.4. 功能界面的组件化编码流程(通用)二、脚手架版 Hello React2.1 注意事项2.2 文件目录2.3 代码...
  • 创建一个react+ts的项目

    千次阅读 2022-03-08 15:44:05
    首先打开命令框输入:create-react-app index...现在创建项目就跑起来了。 我在创建项目是安装的依赖项有: yarn add styled-components -S yarn add @types/styled-components -S yarn add react-redux -S yarn
  • vsCode创建一个react项目

    千次阅读 2021-04-12 14:20:48
    (vue项目首选),那么如何利用其创建一个react项目? 1.在集成终端打开输入命令行,安装react的脚手架create-react-app yarn global add create-react-app 2.创建命令项目 create-react-app d
  • cnpm install -g create-react-app
  • VSCode创建React项目

    2021-12-07 14:31:57
    VSCode创建React项目 1、 打开Teriminal命令行,安装react的脚手架create-react-app yarn global add create-react-app 2、创建项目命令 create-react-app demo 3、开启项目命令 cd demo yarn start 或 ...
  • 创建一个React项目

    千次阅读 2018-09-16 14:56:00
    .环境准备:  1.下载安装VSCode,Node.js,Yarn  网址如下:1.VSCode:https://code.visualstudio.com/  2.Node.js:https://nodejs.org/en/  3.yarn:https://yarnpkg....
  • 创建React项目全过程(傻瓜式教程)

    千次阅读 2021-12-29 16:07:43
    创建React项目。npm无法识别
  • 从零开始构建react项目
  • yarn创建react项目

    千次阅读 2019-12-05 15:17:11
    yarn创建react项目 1.安装yarn https://yarnpkg.com/zh-Hans/docs/install 2.创建项目及安装antd 在cmd下输入“npm install create-react-app yarn -g” 在指定项目目录下输入 create-react-app your_project_...
  • 快速创建React项目

    2022-04-25 16:19:22
    创建React项目
  • 根据自己最近学习react 视频,下面谈谈如何去创建一个react项目 准备工作: ES6语法、html5、css3、JSX语法 node.js 这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。 打开react官网,可以是...
  • 命令行创建React项目

    千次阅读 2020-09-25 15:45:04
    cnpm install -g create-react-app ...找一个创建项目的目录,用cmd打开资源管理器对应目录运行 create-react-app demo 注意:安装过程中最好焦点不要移出cmd窗口,有时候会莫名其妙的中断安装
  • React 脚手架创建项目

    千次阅读 2022-04-13 10:40:03
    意义 现代的 Web 应用要考虑的问题很多,除了编写业务代码之外...使用 create-react-app 这个命令行工具,它是 React 官方团队出的一个构建 React 应用的脚手架工具。 方法一 全局安装npm i -g create-react-app或者y
  • 使用create-react-app或者antd创建一个React项目

    万次阅读 热门讨论 2018-03-08 18:00:37
    距离上次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。 然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在...
  • 1、安装node.js 官网地址 2、安装npm npm安装较慢,建议更换淘宝源,或者安装...4.创建react项目 安装脚手架 cnpm install -g create-react-app 或者 npm install -g create-react-app 若此时出现create-react-app: c
  • build-react-cli是帮助你快速创建生成react项目的脚手架工具,配置了多种可选择的不同类型项目模版
  • 1, 全局安装react代码行工具(脚手架) npm install -g create-react-app ... create-react-app my-app3,启动react项目 (需要cd进入项目my-app根目录) npm start 注意: 在使用 create-react-app 来创建一个新的R...
  • 身为位实打实的后端同学,由于最近换了份工作需要去写前端,还是从没接触过的react,简直崩溃到苦,我改了2小时的前端,前端同学一会就搞定了,差点就给劝离了。。。 但是!程序员有几是认输的,不会我就学...
  • 使用IDEA创建一个简单的React项目

    千次阅读 2021-07-25 21:23:24
    创建一个简单的React项目版本说明项目创建与运行结合element-react添加简单的点击计数组件点击运行 版本说明 IDEA 2020.3.2 react 17.0.2 element-react 1.4.34 项目创建与运行 以管理员的身份打开命令提示符,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,421
精华内容 36,168
关键字:

创建一个react项目