• create-react-app 是一个全局的命令行工具用来创建一个新的项目
  • react-scripts 是一个生成的项目所需要的开发依赖

一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖,再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。
现在 如果你正在搭建react运行环境,使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中,你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖,和在配置文件中编写的配置代码,react-scripts 都帮你写了,比如:react-scripts帮你自动下载需要的 webpack-dev-server 依赖,然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ,并且运行启动了一个使用 express 的Http服务器,现在你只需要专心写src源代码就可以了。省去了很多精力,最适合快速上手一个demo了。

react-scripts有以下支持,都帮你配置好了:

  1. React, JSX, ES6, and Flow syntax support.
  2. Language extras beyond ES6 like the object spread operator.
  3. Import CSS and image files directly from JavaScript.
  4. Autoprefixed CSS, so you don’t need -webkit or other prefixes.
  5. A build script to bundle JS, CSS, and images for production, with sourcemaps.
  6. A dev server that lints for common errors.

Getting Started

安装

创建一个应用程序

生成的目录结构

没有配置文件(webpack.config.js)

运行应用 npm start

 

在浏览器中打开:http://localhost:3000

现在我们看 my-app文件夹下的public/index.html 和src/index.js的源码,我们可以在这里编写项目代码,但是注意 public/index.html 是启动http服务器的首页,src/index.js是编译的入口文件,只能叫index这个名字,改别的名字不行。

打开 http://localhost:3000/index.html 首页,f12查看 网页源码,你会看到

<script type="text/javascript" src="/static/js/bundle.js"></script>

/static/js/bundle.js
在你的项目my-app你是看不到这个文件路径的,你也没有写配置文件webpack.config.js,
http服务器配置,自动代开浏览器窗口,react,es6语法编译,babel-core,webpack,等等这些 你都没下载,配置。
这些活,react-scripts 都帮你做了。

刚才的过程分析

回顾

npm run start
我们 一开始这么启动服务 运行项目
打开你的my-app\package.json

"scripts": {
"start": "react-scripts start",
...
}

所以执行的是 react-scripts start 
打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件

上面代码中  script 的变量值是 start

所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 文件代码节选重点如下

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); // 启动http服务器
var paths = require('../config/paths'); //要编译的文件路径与生成路径等
var config = require('../config/webpack.config.dev');
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; //这就是为什么 端口号 不是8080 而是 3000 的原因,在这里可以改成8080,重新npm run start 生效
detect(DEFAULT_PORT).then(port => {
if (port === DEFAULT_PORT) {
run(port); //这里开始运行
return;
}
...... function run(port) {
// 这里可以设置 http协议, 或者可以在 npm run start 之前 cmd命令窗口中执行 set HTTPS=true&&npm start 改成https 安全协议
var protocol = process.env.HTTPS === 'true' ? "https" : "http";
var host = process.env.HOST || 'localhost';
setupCompiler(host, port, protocol); // 编译源码 ,生成路径
runDevServer(host, port, protocol); //启动 http服务器
} //配置http服务器
function runDevServer(host, port, protocol) {
var devServer = new WebpackDevServer(compiler, {
compress: true,
clientLogLevel: 'none',
contentBase: paths.appPublic, //根据导入的paths 指定应用根目录(即index.html所在目录)
hot: true, publicPath: config.output.publicPath, //根据导入的 config 变量,指定 虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,
//必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。 quiet: true, watchOptions: {
ignored: /node_modules/
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === "https",
host: host
});
/**
* 省略其他代码
*/
openBrowser(protocol + '://' + host + ':' + port + '/'); // 打开浏览器 向服务器发送请求
});
} function setupCompiler(host, port, protocol) { compiler = webpack(config, handleCompile); // 根据导入的 config 变量 指向的 webpack.config.dev 配置文件 运行
/**
* 省略其他代码
*/
}

start.js 文件代码 中 导入了  my-app\node_modules\react-scripts\config文件夹下的  webpack.config.dev.js 与 paths.js
paths.js  代码节选如下:

 
var paths = require('./paths'); //也导入了 同文件夹下的 paths.js
module.exports = {
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'), paths.appIndexJs // 编译的入口文件 ],
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/bundle.js', // 只是编译后生成的目标文件 ,这就是一开始我们 打开浏览器按f12看到的index.html导入的
// <script type="text/javascript" src="/static/js/bundle.js"></script>
publicPath: publicPath
},
/**
* 省略其他代码
*/ }

已经搭建好运行环境了,接下来 如何开发app

导入组件

由于babel依赖,这个项目支持es6模块
当你仍然使用require() and module.exports ,我们鼓励你去使用import and export 替代.

例如: 
Button.js

import React, { Component } from 'react';  

class Button extends Component {
render() {
// ...
}
}
export default Button; // 不要忘记去使用 export default!

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; //从另一个文件导入一个组件 class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;

增加样式

Button.css

react-scripts 通过Autoprefixer 帮你的css文件自动添加浏览器兼容前缀
例如:

.App {
display: flex;
flex-direction: row;
align-items: center;
}

变成

.App {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
 

增加CSS预处理器

首先在 my-app/  目录下  安装node-sass用来将scss编译成css

npm install node-sass --save-dev

打开my-app/package.json,增加以下代码到scripts中

 
   "scripts": {
+ "build-css": "node-sass src/ -o src/",
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
"start": "react-scripts start",
"build": "react-scripts build",
......
}

现在你可以重新命名my-app/src/App.css to my-app/src/App.scss and 运行   npm run watch-css

或者你可以改成

"scripts": {
"build-css": "node-sass src/ -o src/",
"start": "npm run build-css && react-scripts start", //先执行 build-css 再执行 react-scripts start
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}

直接 npm run start

增加图片

当项目构建的时候,Webpack将正确的移动图片到构建的文件夹下,提供我们正确的路径

在css工作中的方式也一样

.Logo {
background-image: url(./logo.png);
}

webpack发现所有的相对模块, 以 ./  开始

增加 bootstrap
在react+es6 moudle+bootstrap
你不是一定要React Bootstrap和React 一起使用,但是他是流行的库去整合 bootstrap 和react应用程序,如果你需要他,你可以通过Create React App整合他,通过以下几个步骤

首先安装React Bootstrap and Bootstrap从npm,React Bootstrap 不包括Bootstrap CSS ,所以你需要去安装
在 my-app/  目录下  安装

修改 my-app/src/index.js
在你的src/index.js 文件内容的顶部,导入 Bootstrap CSS 和可选的 Bootstrap theme CSS

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'; // 必须的
import 'bootstrap/dist/css/bootstrap-theme.css'; // 可选的
import App from './App';
import './index.css'; ReactDOM.render(
<App />,
document.getElementById('root')
);

修改 my-app/src/App.js

import React, { Component } from 'react';
import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap'; class App extends Component {
render() {
return (
<div>
<Navbar inverse fixedTop>
<Grid>
<Navbar.Header>
<Navbar.Brand>
<a href="/">React App</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
</Grid>
</Navbar>
<Jumbotron>
<Grid>
<h1>Welcome to React</h1>
<p>
<Button
bsStyle="success"
bsSize="large"
href="http://react-bootstrap.github.io/components.html"
target="_blank">
View React Bootstrap Docs
</Button>
</p>
</Grid>
</Jumbotron>
</div>
);
}
} export default App;

最后 运行

    npm run start

create-react-app的使用及原理分析的更多相关文章

  1. 深入 Create React App 核心概念

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

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

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

  3. tap news:week5 0.0 create react app

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

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

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

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

  6. Create React App

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

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. 某虚拟定位APP从破解到原理分析

    工具环境ida7.0iphone 6ios 10.2 0x00:基本情况 1. 该app可以修改模拟手机地理位置(gps.基站.WIFI),拥有全局定位.指定应用定位.模拟扫街等功能,只能在已越狱的I ...

  9. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  10. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

随机推荐

  1. django 生成csv文件重要代码

    import csv from django.http import HttpResponse # Number of unruly passengers each year 1995 - 2005. ...

  2. python之函数用法get()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法get() #http://www.runoob.com/python/att-dic ...

  3. word2vec训练中文模型

    --  这篇文章是一个学习.分析的博客 --- 1.准备数据与预处理 首先需要一份比较大的中文语料数据,可以考虑中文的维基百科(也可以试试搜狗的新闻语料库).中文维基百科的打包文件地址为 https: ...

  4. soa---java 多线程的---锁

    如今soa 与分布式计算已经成为互联网公司技术的标配 那他包括的知识点应该熟悉了解.并以此为基础,去应用,调优各种soa的框架. 包括例如以下的四点.是分布式的基础.         a java 多 ...

  5. 架构-虚拟路由器冗余协议【原理篇】VRRP详解

    转自:http://zhaoyuqiang.blog.51cto.com/6328846/1166840/ 为什么要使用VRRP技术 我们知道,为了实现不同子网之间的设备通信,需要配置路由.目前常用的 ...

  6. How to use, monitor, and disable transparent hugepages in Red Hat Enterprise Linux 6

    Resolution Note: Transparent Huge Pages are not available on the 32-bit version of RHEL 6. Transpare ...

  7. std::bind 详解及参数解析

    // Bind_std_function.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...

  8. 【转载】TCP数据包结构

    最近在研究TCP协议,找了点资料,感觉很经典,所以转载过来. 如果本文中图片不能观看,请链接原始地址:http://xinxiangsui2018.blog.163.com/blog/static/1 ...

  9. C语言终极面试及答案分析

    第一部分:基本概念及其它问答题 .关键字static的作用是什么? 这个简单的问题很少有人能回答完全.在C语言中,关键字static有三个明显的作用: ). 在函数体,一个被声明为静态的变量在这一函数 ...

  10. HDU 4602 Partition (矩阵乘法)

    Partition Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...