react 脚手架_react脚手架 - CSDN
精华内容
参与话题
  • react学习 - 使用react脚手架

    千次阅读 2018-05-27 23:27:02
    脚手架 Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may ...

    脚手架

    Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used. The compiler uses this specification to generate code that the application can use to create, read, update and delete database entries, effectively treating the template as a “scaffold” on which to build a more powerful application.

    from StackOverflow

    所谓脚手架, 在我理解看来, 就是提供一个约定好的工具(框架). 按照约定来写自己的业务代码, 通过脚手架把约定的代码编译成真正能够执行的业务代码.

    使用脚手架

    react的脚手架其实非常多, 其中官方推荐的脚手架有下面这些:

    • Create React App - An officially supported way to start a client-side React project with no configuration
    • Next.js - Framework for server-rendered or statically-exported React apps
    • Gatsby - Blazing-fast static site generator for React
    • nwb - A toolkit for React apps, libraries and other npm modules for the web
    • razzle - Create server-rendered universal JavaScript applications with no configuration
    • Neutrino - Create and build modern JavaScript applications with zero initial configuration

    我们选用create-react-app这个官方最为推荐的脚手架, 因为用这个相对来说更容易入门, 并且遇到问题都有解决方案.

    安装脚手架环境

    npm install -g create-react-app
    create-react-app my-app
    
    cd my-app
    npm start

    这样子一个react的项目就启动了. 整个项目的文件结构如下:

    my-app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── public
    │   └── favicon.ico
    │   └── index.html
    │   └── manifest.json
    └── src
        └── App.css
        └── App.js //entry file
        └── App.test.js
        └── index.css
        └── index.js
        └── logo.svg
        └── registerServiceWorker.js
    

    启动react脚手架项目

    npm start
    yarn start
    //二选一即可

    build项目

    一个项目start只是为了本地运行, 而想要生成打包好的文件, 就需要build了.

    npm run build
    yarn build
    //二选一即可

    这个时候打包出来的文件就会在build目录下面, 会多出 index.htmlstatic目录. 其中static目录下面的就是打包好的js, css的文件. 可以直接引用.

    遇到的疑问

    1. 为什么打包出来的文件名字有一串乱码.
      ans : 这个是文件hash值, 为了防止浏览器缓存的. 想要更改, 看我下一篇博客.

    2. 下载很慢怎么办
      ans : npm在国内就是速度很慢, 请更改源地址为国内, 或者下载cnpm.

    3. 然后如何开发
      ans : 下一篇博客, 讲如何在这个基础上, 自定义配置和开发.

    展开全文
  • React脚手架

    千次阅读 2018-10-25 11:22:44
    React脚手架 和vue一样,react也有它开发用的脚手架,能够快速的创建一个项目结构,并下载部分依赖。 安装之前的准备 准备好node.js运行环境,大家可以去搜索node的安装和配置,这里不做详细介绍,整篇文章默认...

    React脚手架

    • 和vue一样,react也有它开发用的脚手架,能够快速的创建一个项目结构,并下载部分依赖。

    安装之前的准备

    • 准备好node.js运行环境,大家可以去搜索node的安装和配置,这里不做详细介绍,整篇文章默认大家已经安装并配置了nodejs及其全局环境;
    • 全局安装create-react-app工具:npm install create-react-app -g;
    • 可能要花上几分钟,因为要下很多插件和依赖,如果因为下载npm官方的包比较慢,可以安装淘宝的cnpm镜像:
      npm install -g cnpm --registry=https://registry.npm.taobao.org
      然后用cnpm代替npm即可。

    整好开干

    • 打开你喜欢的一种可以使用控制台指令的工具,可以是git的bash,可以是vscode的终端,也可以是系统自带的cmd控制台;
    • cd到你的项目文件夹下;
    • 注意文件夹不要用中文,不然户很麻烦。
    • create-react-app [项目名]创建你的项目,项目名小写,不要包含中文(因为脚手架创建项目的时候会使用npm init,而默认-y参数会以文件夹名作为packge.json里的一个参数值,在生成这个值的时候中文会引发报错)。
    • 等待几分钟后你可以看到这样一个结构:

    在这里插入图片描述

    • 项目创建完成会提示你修改的指令(即script属性里的指令替换),以及怎么运行这个项目的方法:

    在这里插入图片描述

    • 根据目录创建的这些文件,这些命令分别是用来运行不同的文件的:
    npm start #运行开发环境服务
    npm run build #将项目打包捆绑成用于生产环境的静态文件
    npm test #运行测试文件
    npm run eject #  ↵
    #将所有工具和包移动并将其配置为项目的依赖,这样会把这些文件都差到package.json文件的dependences下
    #为的是开发时使用了自定义的第三方库能被准确标记。
    
    • 可以看到项目创建的时候有两个app.js 和app.test.js 这就是两个用于生产和开发的文件,在测试代码无误后可以添加进入生产使用文件里。
    • 按照提示运行项目:
    cd [项目文件夹内]
    npm start
    
    • 运行成功会有这样的提示:

    在这里插入图片描述

    你可以通过下面提供的两个地址:本地地址local: http://localhost:3000访问当前项目,或者网络中的地址:http://192.168.43.252:3000进行访问。

    它一般会自动打开你的默认浏览器并默认访问local的地址:
    在这里插入图片描述

    如果加载过慢,可能是默认加载了node_moduls里的依赖,这里文件非常多,那么请在设置里忽略加载这些文件。

    展开全文
  • 公司官网,小项目,耗时短,为了更好的说明各部分需要注意的地方,也因为篇幅过长,影响阅读体验,请允许在下的多情,就按实际的开发过程,拆分成了“脚手架搭建(基础)”、“router4.0配置(多页面结构)”、...

    公司官网,小项目,耗时短,为了更好的说明各部分需要注意的地方,也因为篇幅过长,影响阅读体验,请允许在下的多情,就按实际的开发过程,拆分成了“脚手架搭建(基础)”、“router4.0配置(多页面结构)”、“页面效果实现”、“添加百度地图(自定义)”、“打包发布(结束)”这几个部分,分篇发布。

    首先node环境是必须的,如果已安装就忽略

    不作赘述: Node.js 安装配置菜鸟教程
    建议安装8.0以上版本,安装指定版本方法:
    npm install -g n
    n v8.6.0

    react一顿操作,我采用官方给出的create-react-app方法

    1.脚手架下载
    npm install -g create-react-app
    或使用淘宝镜像 npm install -g create-react-app --registry https://registry.npm.taobao.org

    2.进入指定路径,建立react项目
    create-react-app webname

    生成的项目最好不要用驼峰式命名,否则后面生成文件提示也会让你改。

    3.静待片刻,给文件的生成一点时间,然后进入目录并启动项目
    cd webname
    npm run start
    这时候浏览器已经打开了这个react项目,我们也就可以开始进行开发啦~

    到这里,其实脚手架这部分已经结束了,但是!!!我们还需要antd和webpack,既然用了轮子,那还矜持个什么劲,好用就继续用喽╮(╯▽╰)╭

    4.安装antd
    不推荐yarn安装,因为以后其他的依赖都要yarn安装才不会报错,强迫症犯了不好治。
    npm install antd --save

    然后问题来了,既然你看到了这篇,想必也是迷茫狗一只,我就多费些笔墨,说下antd组件如果不按需加载的问题,如图:
    在这里插入图片描述
    就是这样,每个页面的css文件上面都要引入一遍antd.css,麻烦不?且不提性能方面的影响,程序员最怕麻烦了,所以,接下来继续操作:

    5.引入 react-app-rewired 并修改 package.json 里的启动配置
    npm i react-app-rewired -D

    修改package.json文件里的scripts:

    "scripts": {
      	"start": "react-app-rewired start",
      	"build": "react-app-rewired build",
      	"test": "react-app-rewired test",
    } 
    

    然后在项目根目录创建一个 config-overrides.js 文件,用于后面的修改默认配置。

    6.使用babel-plugin-import, 一个用于按需加载组件代码和样式的babel插件
    npm i babel-plugin-import -D

    修改之前创建的 config-overrides.js 文件,把下面的代码拷进去:

    const { injectBabelPlugin } = require('react-app-rewired');
    module.exports = function override(config, env) {
       config = injectBabelPlugin(
         ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
         config,
       );
        return config;
    };
    

    OK啦,import { Button } from ‘antd’; 无需另外引入antd.css了哦~ 哦~好嗨呦……

    嗯……是这样的,页面的实现离不开css样式的支持,经常会因为设计稿的需求,手写或修改antd组件的样式,为了满足className的傲娇个性,我经常翻阅辞海,给它们起一些类似于“乌拉那拉氏”这样的名字,后来,我知道了less和sass,看着美丽的树结构,才明白曾经的自己有多傻呢,这个项目我用的是less

    7.引入 react-app-rewire 的 less 插件 react-app-rewire-less 来帮助加载 less 样式
    npm i --save react-app-rewire-less

    修改 config-overrides.js:

    const { injectBabelPlugin } = require('react-app-rewired');
    const rewireLess = require('react-app-rewire-less');
    module.exports = function override(config, env) {
       config = injectBabelPlugin(
         ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
         config,
       );
       config = rewireLess.withLoaderOptions({
         modifyVars: { "@primary-color": "#1DA57A" },
         javascriptEnabled: true,
       })(config, env);
        return config;
    };
    

    修改后重新运行npm run start,就可以加载less文件了。

    多说一点,因为使用了react-app-rewired,这样想暴露所有webpack配置就稍微有些麻烦,在下为了规避webpack配置,从而达到less仅对引用的当前组件有效,也就是,不同的组件内如果有相同的className,但互相不会影响,就在外层使用了动态命名,配合:local(){}:

    //about.js
    import styles from './about.less';
    
    <div className={styles.aboutbj}>
       <div className="about">
        	<div className="title">公司介绍</div>
       </div>
       <div className="title">关于我们</div>
     </div>
     
     //about.less
     :local(.aboutbj) {
        .about {
          .title {
            color: #000;
          }
        }
        .title {
            color: #999;
          }
      }
     @media screen and (max-width:496px) {
      :local(.aboutbj) {
        .about {
          .title {
            color: #999;
          }
        }
        .title {
            color: #000;
          }
      	}
      }
    } 
    
    展开全文
  • React脚手架搭建及创建React项目

    万次阅读 2018-10-26 10:22:05
    1.安装node.js和npm:  可自行到node官网下载,下载node完成后,npm也会自行下载完成。 2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。   3.安装好的npm的源默认是国外的源,会因为...

    1.安装node.js和npm:

       可自行到node官网下载,下载node完成后,npm也会自行下载完成。

    2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。

     

    3.安装好的npm的源默认是国外的源,会因为网络原因导致执行npm操作有延时,我们可以切换npm的源为淘宝的源镜像。

       执行 npm config set registry https://registry.npm.taobao.org。切换完成后,可通过 npm config get registry 查看。

    4.安装react脚手架,cmd执行 npm i -g create-react-app  (-g为全局下载)

     

    5.安装好 node 和 react脚手架后就可以创建项目啦,cmd切换至指定路径,执行  create-react-app rproject (rproject为自定义项目名),最后出现 happy hacking说明创建成功。

    6.如果出现以下报错,是因为网络原因,导致 npm读取代理服务器失败,解决办法为1查看网络状况,2将npm源路径切换到淘宝镜像。参照第三步。

    7.项目创建成功后,我们可在对应的路径下看到项目文件。打开文件可以看到文件结构。

    8.启动项目。在项目所在路径下cmd执行 npm start。

    9.启动成功后会自动打开浏览器,并出现react图标,说明项目启动成功。

     

       

    展开全文
  • React入门---react脚手架

    2019-02-27 02:23:18
    React是Facebook研发的一款前端框架(MVC框架:侧重于view层操作),目前在行业内广泛使用。为了让框架的体积变得更轻量级,设计者们把其定义为“渐进式”框架,也就是: 主体核心的部分都在react/react-dom两个框架中...
  • 脚手架工具搭建的react实现路由和状态机的简单demo,项目是用creat-react-app脚手架搭建的一个最简单的demo,简单实现了路由和状态机
  • React 路由&脚手架

    2019-09-27 07:06:07
    1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm start 启动 React-router介绍 什么是路由? 路由是根据不同的 url 地址展示...
  • 1. 由于react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是react-router-dom, 2. 安装 npm i react-router -S 、npm i react-router-dom -S 路由配置router.js: ...
  • react路由,脚手架

    2019-10-30 19:21:47
    react脚手架的使用 import React,{Component} from 'react' class 组件名 extends Component {state ={数据}} 样式类名会全局泄露 Axios 组件下直接引入axios Publick文件夹是特殊路径 配置代理:package.json下 ...
  • React 脚手架介绍以及路由基本信息

    千次阅读 2018-05-16 19:01:34
    create-react-app创建项目npm install -g create-react-app create-react-app react-cli目录结构介绍图中红色框是我后来加的,暂时可以不考虑。public:里面包含了我们项目中的启动页面,react比较适合单页面项目...
  • 从零搭建react 脚手架

    千次阅读 2019-05-28 02:11:40
    前言 将目前前端最主流,应用最广的webpack总结下 目前常用的构建工具 facebook官方的create-react-app(官方推荐) 基于webpack@3的版本
  • React脚手架快速搭建项目 环境搭建 下载安装Node.js (nodejs.cn) 进入cmd 使用 npm install -g create-react-app 搭建一个全局的脚手架 项目搭建 cd 到要搭建项目的文件夹 create-react-app 项目名 搭建项目 cd ...
  • 记一次改造react脚手架的过程

    千次阅读 2017-12-01 18:29:50
    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webpack上搭建改造,这里作为记录。代码在这里...
  • 一. 脚手架的安装 首先安装Node,Node安装好...create-react-app是React官方出的脚手架工具,其实有很多第三方的脚手架工具,也有很多优秀的。但是作为初学者为了减少踩坑,所以我们使用官方的脚手架。 二. 创建第...
  • React 脚手架 create-react-app 新版使用说明 重点是配置代理 近期更新了一下 create-react-app 工具,然后发现,和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版...
  • React 脚手架 脚手架:用来帮助程序员快速创建一个基于某种库的模板项目。其包括: 所有需要的配置 指定的所有的依赖 可以直接安装/编译/运行的简单效果 React 提供了用于创建react项目的脚手架库:create-...
  •        首先,说明一点,这是亲测可用、简单易行的,我...首先在你的虚拟机,或者是阿里云服务器上搭建出react脚手架的环境,如安装node, 安装react脚手架等,这些内容很简单,百
  • 本文从Node.js安装为起点,最终是为了使用React脚手架配置一个项目。 一、第一步,安装Node.js 安装Node.js环境,安装网址: https://nodejs.org/en/download/ Node.js是可以选择安装在哪个目录的,而且体积也...
  • React脚手架和dva

    2019-01-22 16:10:18
    构建react脚手架  全局安装 npm i create-react-app -g  创建 create-react-app my-app (名)  进入 cd my-app  下包 npm start 二. 优化  如果你的构建文件很大,你可以通过 analyze 命令构建并分析...
  • 步骤一: 安装react脚手架 create-react-app (确保nodejs和npm是可用的) npm install -g create-react-app 等待安装完成后可以打开使用cmd输入以下命令react脚手架是否可用 create-react-app 如果可用则会呈现...
1 2 3 4 5 ... 20
收藏数 10,561
精华内容 4,224
关键字:

react 脚手架