怎么新建一个react项目

怎么新建一个react项目

现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目,

准备工作安装node环境,这个去百度搜索下node安装,在命令行中 分别测试npm -v ; node -v都没问题,就说明环境准备好了,如下:(推荐学习:【Node.js安装教程】)

1.png

然后安装脚手架,命令:

npm install -g create-react-app

2.png

脚手架安装好之后,就可以利用脚手架帮我们搭建一个项目了,以上我是在桌面目录文件夹下,想跟我一样测试的,可以在桌面按着shift+鼠标右键 ,选择在shell命令行模式(windows系统),以上命令都是在这个目录下操作的。

然后创建一个新项目todolist,如下:

3.jpg

4.jpg

然后按照提示跑起来(切到todolist目录 yarn start)就可以了。多操作几次就会越来越熟练。

Image placeholder
前端答疑
未设置
  94人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

如何快速新建react项目?

创建一个react项目有三种方式:1.create-react-app快速脚手架(简单,类似于vue-cli工具)2.webpack一步一步构建3.第三方脚手架(generator-react-web

如何新建react项目

如何新建react项目前文中,我们介绍过了2种react项目的搭建方式,分别是webpack的方式搭建和create-react-app脚手架的方式搭建感兴趣的同学可以点击下方链接,进行学习。webp

dreamweaver怎么新建css?

dreamweaver怎么新建css?1、新建一个htlm文档,在body中插入一个div,将ID命名为main2、在右侧的CSS设计器点击源的加号,选择在页面中定义3、点击选择器的加号,输入#mai

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

怎么从0搭建react项目

怎么从0搭建react项目一、浏览器中通过标签直接引入React框架有两个核心的包,分别是react以及react-dom,如何想直接在浏览器中使用React,那么把这两个包直接引入就可以了。 如

怎么编译react项目

怎么编译react项目使用create-react-app脚手架搭建的react项目,只需要使用npmrunbuild命令就可以编译项目了,代码会被编译到build目录中。一、create-react

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何运行别人的react项目

如何运行别人的react项目1、从网上下载项目到本地,放在自己的工作空间中2、下载好的项目缺少项目依赖环境,我们需要自己安装。npminstall这个步骤将会新建该项目的node_modules文件夹

如何启动react项目

如何启动react项目1、首先打开命令提示符工具开始——菜单——运行——cmd2、然后使用cd命令进入项目目录cdmy-app3、接着运行npmstart即可注:如果项目目录中没有node_modul

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

如何访问已启动的react项目

如何访问已启动的react项目1、运行react项目都会开启一个终端窗口,只需要打开窗口,查看项目的运行地址即可。上面这个项目的地址是http://localhost:3000/,打开浏览器输入这个地

如何查看react项目端口?

如何查看react项目端口?react项目端口默认是3000,定义在node_modules\react-scripts\bin\react-scripts.js文件中,可以通过文本编辑器打开它,搜索

Python 多个return值

多个return值 那如果你想从一个函数里返回两个变量而不是一个呢?新手们有若干种方法。最著名的方法,是使用global关键字。让我们看下这个没用的例子: defprofile(): globalna

Java 14 可能带来什么新特性?

JDK/Java13在一个月前已经发布,该版本带来了5大新特性,笔者观察到其中的TextBlocks(文本块)特性似乎被讨论最多。文本块特性与常见的Python“””anyinput”””特性一样,它

如何基于 Kafka 构建一个关系型数据库

在这篇文章里,我将分享如何通过扩展KCache(https://github.com/rayokota/kcache)来实现一个全功能的关系型数据库,我把这个数据库叫作KarelDB(https://

03.2. Go 搭建一个 Web 服务器

前面小节已经介绍了Web是基于http协议的一个服务,Go语言里面提供了一个完善的net/http包,通过http包可以很方便的就搭建起来一个可以运行的Web服务。同时使用这个包能很简单地对Web的路

symfony 创建一个 flash 提示框

给大家介绍下flash,flash还是比较不错的。于是记录下来。 首先还是在我的baseController中建立一个方法 /** *@authorgf * *flash提示 * *@par

通过 Laravel 创建一个 Vue 单页面应用(一)

使用laravel创建一个Vue单页面应用(SPA)可以构建一个整洁的由API驱动的应用。在此教程中,我们将学习如何构建并运行一个以Vue路由为前端,laravel为后端的SPA应用。首先我们将注意

通过 Laravel 创建一个 Vue 单页面应用(三)

我们将通过演示在vue-router进入一个路由之前,如何异步加载数据来继续使用Laravel构建我们的VueSPA。 之前在通过Laravel创建一个Vue单页应用(二)中完成了UsersInde

使用 Vue.js 和 Iris 共建一个简单的 Todo MVC 应用

本文用Golang的Iris框架作为后端服务,vuejs渲染前端UI,用websocket通信。基于监听hash变化director.js库实现简单路由,axios库与后方沟通,netoffos.j

使用 Vue.js 和 Iris 共建一个简单的 Todo MVC 应用

数据服务 packagetodo import"sync" //Item条目数据 typeItemstruct{ SessionIDstring`json:"-"` IDint64`json:"i

用 Go 构建一个 SQL 解析器

在本文中,小编将向大家简单介绍如何在Go中构造LL(1)解析器,并应用于解析SQL查询。希望大家能用Go对简单的解析器算法有一个了解和简单应用。摘要本文旨在简单介绍如何在Go中构造LL(1)解析器,在

建一个5G基站,到底要花多少钱?

自从国内5G正式宣布商用之后,全国各地的5G网络建设速度明显加快了。5G基站的身影,出现在越来越多的城市、角落。5G信号的覆盖范围,也在不断扩大。这意味着,5G的投资已经全面启动,并且在不断增加。一直

使用Go语言在MacOS创建一个自定义的命令行工具

原文链接:https://idoubi.cc/posts/create-a-cli-tool-in-macos/ 使用MacOS做开发的朋友都知道,我们一般会使用Homebrew做软件包管理,经常会用