创建第一个react项目

由于新项目的缘故,接触了一下React这个 Javascript 库。下面我就简单的总结一下经验以及遇到的一些问题,希望能够帮到需要的朋友。

一、安装 Node.js。 以下是我百度云盘的分享。

  https://pan.baidu.com/s/1ftU3mn2jN9bnOGevMdcrDg     提取码:wow3

二、安装cnpm

  cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装yarn

  cmd命令:cnpm install -g yarn

四、创建第一个React项目

  1、安装脚手架工具

    cmd命令:npm install -g create-react-app 或者 cnpm install -g create-react-app

    
  2、创建项目 

    注意:create-react-app要求 Node >= 6 和 npm >= 5.2 。 cmd查看node和npm版本  node -v  和 npm -v
    cd 到项目要创建的目录之后: create-react-app reactdemo

  3、cd 到项目位置
    cd  ../../reactdemo
    npm start    或者   yarn start  运行项目

    运行之后浏览器会自动打开,如果没有打开并且cmd提示安装成功的话。可以手动在浏览器访问 http://localhost:3000即可。

  步骤的图片如下:‘...###234###...’  这些是我创建项目时(create-react-app reactdemo)生成的,并且把安装脚手架的语句冲没了。按照上述步骤即可。

  这样就创建了我们的第一个React项目。我在项目中使用的是VsCode工具来操作React项目。

  百度云盘链接:https://pan.baidu.com/s/1_9_5IKTilP-jWFHLdYPlyw   提取码:a6xf    -- (windows x64 也可到官网下载,很方便的。)

五、遇到的问题

  我在安装过 Nodejs 之后,在cmd中查看版本号,一直显示的是 0.10.15 版本的。这和我下的完全就不同,之后我又安装了其他的版本,发现还是没有变化。我就查看的 Error 的错误信息是获取的是其他位置 Nodejs 。这就让我怀疑 cmd 中查看到 Nodejs 的版本是 Error 信息中这个路径的版本。然后我就通过百度,说需要修改环境变量。我就找到了这个路径,随后就抱着试试的想法,改了一下文件路径。让cmd默认去找我安装的Nodejs。这时问题就解决了。下面是相关的截图。

  其实换一个思路,在 cmd 中 cd 到安装Nodejs的文件位置,然后再进行创建脚手架以及创建项目也是没问题的。问题的原因应该是我之前安装了Nodejs,cmd也默认找到了这个位置,所以导致我再安装的版本就无效了。

  在VsCode工具中会自动去找到项目的位置,直接npm start便可以运行项目。

  希望可以帮到大家,我后续应该会写一些,关于React+antd的相关文章。

  这些都是自己在项目中遇到的,本人也是刚刚接触这些技术,所以有哪里说的不对的地方,希望各位大牛多多指点。

原文地址:https://www.cnblogs.com/liu-jinxin/p/10855924.html

时间: 2024-10-30 12:59:19

创建第一个react项目的相关文章

从零开始搭建一个react项目

如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目.快速开始 因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以考虑手动构建一个 React项目 代码下载 准备工作 安装node环境. 配置cnpm(看个人需求). 准备一个空的文件夹react-demo. 初始化工程 从这里开始新建一个react工程 1. 初始化工程目录 1 cd

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r

[Android Studio 权威教程]离线配置SDK,创建第一个AS项目

前三篇bolg我给大家分享了怎么安装Android Studio,但是我们还没有使用AS创建一个Android 的项目,那么这篇blog我们开始离线配置SDK,并且创建一个Android项目 没有看如何安装Android Studio的童鞋,请先看这里,然后回来我们继续: [Android Studio 权威教程]Mac下安装Android Studio [Android Studio 权威教程]Linux下安装Android Studio [Android Studio 权威教程]Window

用Kotlin创建第一个Android项目(KAD 01)

原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:http://antonioleiva.com/create-first-android-project-kotlin/ 原文作者,开始Kotlin系列课程的第一课:用Kotlin创建第一个Android项目. 今天,我开始一组30篇针对Android开发者的Kotlin语言的论文(KAD).在这系列

Maven 系列 二 :Maven 常用命令,手动创建第一个 Maven 项目

1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: 1 <project xmlns="http://maven.apache.org/POM/4.0.0" 2 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

Maven 系列 二 :Maven 常用命令,手动创建第一个 Maven 项目【转】

1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: 1 <project xmlns="http://maven.apache.org/POM/4.0.0" 2 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

Unity 5.3 官方VR教程(二) 创建第一个VR项目

为了准备好学习使用Unity开发VR应用,我们首先要检查下自己的电脑硬件和软件配置是否满足要求.简单来说,显卡要NVIDIA GTX970或AMD290以上,CPU要Intel i5-459以上,内存8GB以上,要有两个USB3.0接口,一个USB2.0接口,一个HDMI 1.3接口. 注意在打开Unity前要把DK2连接好并开启. 在继续之前,打开Oculus Configuration Utility应用,并检查Demo Scene可以正常运行.注意在运行Demo Scene之前看可能需要在

3.创建第一个android项目

安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 3.创建第一个android项目 1.打开Eclipse,选择File——>new——>others... 2.在弹出的窗口中选择Android展开——>选择Android Application Project——>next 3.如下图所示:在弹出的窗口中依次输入应用程序名称,工程名称,包名,最低运行版本,最高运行版本,编译版本,窗体样式,点击下一步. 4.如下图所示:将Create custom

如何架构一个 React 项目?

编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有多种.我相信,根据你的实际情况对架构进行演进,要远比坚持一些条条框框的教条更好.接下来我将会介绍一些基础的方法以资您思考. 将所有的东西都放在一个文件中 最简单的项目可以被放到一个文件之中.而这就是我所选择的用来处理我的Webpack 配置的方法.这种方法最大的好处就是所有你需要的东西都在这一个文件