最近在学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. 三层神经网络自编码算法推导和MATLAB实现 (转载)

    转载自:http://www.cnblogs.com/tornadomeet/archive/2013/03/20/2970724.html 前言: 现在来进入sparse autoencoder的一 ...

  2. PSP 进度条 柱状图 饼状图

    9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小组 ...

  3. mybatis_mysql

    SELECT round(avg(c.AVG_DELAY_TIME)) as AVG_DELAY FROM `result_road_saturation_day` a LEFT JOIN info_ ...

  4. RPC和WebService的区别

    最近分析的这个系统,逻辑架构中有一层是RPC interface.之前对RPC不熟悉,就上网搜索了一下资料,在此总结一下: RPC是Remote Procedure Calling,远程过程调用的缩写 ...

  5. 分享:50行代码监听watch小程序的globalData

    监听方法: // 在任何组件.页面,例如页面 const app = getApp( ); Page({ onLoad: function( ) { app.watch$('role', ( val, ...

  6. 【Django】Django迁移数据库

    我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,Django 还没有把它翻译成数据库语言,因此实际上这些数据库表还没有真正的在数据库中创建 为了让 Django 完成翻译,创建 ...

  7. collection 多态 会自动转型为子类 继承多态需要显示转型

  8. 对Spark2.2.0文档的学习3-Spark Programming Guide

    Spark Programming Guide Link:http://spark.apache.org/docs/2.2.0/rdd-programming-guide.html 每个Spark A ...

  9. 【uoj#282】长度测量鸡 结论题

    题目描述 给出一个长度为 $\frac{n(n+1)}2$ 的直尺,要在 $0$ 和 $\frac{n(n+1)}2$ 之间选择 $n-1$ 个刻度,使得 $1\sim \frac{n(n+1)}2$ ...

  10. InnoDB 5.6 新特性之一:FullTEXT Indexes[1.简单介绍]

    先来看一条SQL语句: SELECT * FROM aa where acol like '%like_normal%'; 当我们使用Innodb时,无论如何对这条语句进行优化,都是无意义的:有的人会 ...