最近在学react,然后感觉自己之前用的express+gulp+webpack+ejs的工作环境还是基于html+js+css这种三层架构的应用,完全跟react不是一回事。

愚蠢的我居然在原先的这个环境上又搭建了react的环境。好吧,写是能写,但是作为服务端的架构就显得驴唇不对马嘴。不免对环境的配置感到迷茫。我也知道redux,但是才刚学react,react还没熟,暂时还不想了解那个框架,然后我发现了create-react-app。

可以用这个直接为自己搭建脚手架,方便的eb,这里记录一下

首先安装这个包

npm install -g create-react-app

然后就跟用express “appname”一样,键入

create-react-app appname

来创建新的项目。比如我创建的名为“react-learn-1”的项目目录如下。

其中之前习惯放在根目录下的webpack构建配置文件被放在了node_modules下的react-scripts中。好像是因为觉得构建配置文件都大同小异,于是就直接藏起来了,到时候有一些小需求的时候可以去改。

创建成功之后它会告诉你怎么启动项目

  npm start
Starts the development server. npm run build
Bundles the app into static files for production. npm test
Starts the test runner. npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

ok,就这么简单

用create-react-app来快速配置react的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. 教你怎么快速配置 React

    导读 React 是一个构建用户界面的库,而它只是组成一个应用的一部分.应用还有其他的部分——风格.路由器.npm 模块.ES6 代码.捆绑和更多——这就是为什么使用它们的开发者不断流失的原因.这被称 ...

  3. 前端快闪三:多环境灵活配置react

    你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...

  4. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  5. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  6. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  7. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  8. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  9. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

随机推荐

  1. Struts2(四)

    以下内容是基于导入struts2-2.3.32.jar包来讲的 1.struts2配置文件加载的顺序 struts2的StrutsPrepareAndExecuteFilter拦截器中对Dispatc ...

  2. Servlet处理表单

  3. 78W的数据使用forall 进行批量转移;

    create or replace procedure test_forall(CURRENTPAGE number ) as .--CURRENTPAGE number :=2 ; .PAGESIZ ...

  4. linux自启动、定时启动脚本

    linux开机自启动 想让一个程序.脚本开机自启动,可以在/etc/rc.d目录下面找到rc.local文件,编辑该文件,在尾部加上需要运行的命令即可. 如: #cd /etc/rc.d #sudo ...

  5. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  6. C#和Java在多态情况下对成员访问的比较

    本文简单比较一下两种语言在里氏替换原则下,父类引用变量访问成员时的访问结果: 如果有两个类,如Person与Student,后者继承了前者,而且子类与父类有重名成员,当Person p = new S ...

  7. Java 线程池详解

    Executors创建线程池 Java中创建线程池很简单,只需要调用Executors中相应的便捷方法即可,比如Executors.newFixedThreadPool(int nThreads),但 ...

  8. 【uoj#244】[UER #7]短路 CDQ分治+斜率优化dp

    题目描述 给出 $(2n+1)\times (2n+1)$ 个点,点 $(i,j)$ 的权值为 $a[max(|i-n-1|,|j-n-1|)]$ ,找一条从 $(1,1)$ 走到 $(2n+1,2n ...

  9. 从原理上搞定编码(二)-- Web编码

    周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...

  10. [四]SpringBoot 之 捕捉全局异常

    在class注解上@ControllerAdvice, 在方法上注解上@ExceptionHandler(value = Exception.class),具体代码如下: package me.shi ...