• 所以,facebook专门出了create-react-app命令,用于react项目开发环境的构建! create-react-app是基于webpack+ES6创建的。 2、如何使用。 依次在命令行执行以下命令就完成项目的构建。 cnpm install -g ...

    1、create-react-app是什么?
    做一个react项目,构建其开发环境对初学者来说是很困难的!所以,facebook专门出了create-react-app命令,用于react项目开发环境的构建!

    create-react-app是基于webpack+ES6创建的。

    2、如何使用。
    依次在命令行执行以下命令就能完成项目的构建。

    cnpm install -g create-react-app
    create-react-app my-app //这里的my-app是随便起的一个项目名称而已。
    cd my-app/
    npm start

    最终得到的项目目录如下:
    项目目录
    效果图是这样的:
    这里写图片描述
    3、关于项目目录的说明:
    public文件夹:里面的index.html,是整个react项目最终打包的index入口页面的项目模板。但是和我们的代码编写无关,和最终的页面展示是相关的。

    src文件夹:是我们编写代码的地方。

    src/index.js:是整个项目的入口js文件。
    src/app.js:是被index引入的一个组件,也用一个js文件表示。
    src/index.css:index.js中的的样式文件。
    src/app.css:是app.js的样式文件。
    logo.svg:是一个svg的图片文件。用于界面展示使用。

    4、但是个人不会满足于这样的结构,很不适合开发。
    下面这个是我进行一个初始化的一个改造:
    这里写图片描述

    改好目录,改好项目路径,在这样的目录下,继续我们的项目开发工作。

    展开全文
  • 基于create-react-app手脚架创建的项目,使用React.js进行开发App管理平台系统Web前端工程。 做了2年的Android开发,第一次使用react去折腾一个前端项目,如有做得不好的地方,还望纠正。 为什么做一个App管理...

    简介

    基于create-react-app手脚架创建的项目,使用React.js进行开发的App管理平台系统Web前端工程。

    做了2年的Android开发,第一次使用react去折腾一个前端项目,如有做得不好的地方,还望纠正。

    为什么做一个App管理平台系统?因为每次发布App的时候都是用公司N年前开发的一个发布系统,界面难看且落后。所以抽时间想自己也搞一个出来,折腾新的技术也是挺有趣的。

    为什么选择React?因为之前我用过纯React Native和干货集中营开放的API开发过一个App应用GankAndPanyz,所以还算是熟悉React的语法。

    第一次跨岗去尝试前后端分离,嗯!服务端代码也是自己来搞(使用的是Spring+SpringMVC+MyBatis)和MySQL数据库,虽然对一些原理还不是很深入,但是能把系统做了出来,收获还是挺大的。从移动端->前端->后端->全栈工程师,挺进!

    项目源码Github地址

    功能

    1. 登录功能
    2. 数据统计功能:App登录统计、App下载统计
    3. 项目管理功能:项目的添加、编辑、删除、整合了Android、iOS下载二维码
    4. App管理功能(Android、iOS):根据场景App分为正式环境和测试环境进行展示每个App的本地链接下载和二维码下载
    5. 版本发布功能:根据对应的手机系统上传安装包和相应的信息进行版本发布

    使用到的第三方框架

    • ant design of react:UI框架
    • react-router:路由框架
    • fetch: 网络请求框架
    • moment:日期处理框架
    • rechart:图表框架
    • qrcode.react 二维码框架
    • crypto-js:加密解密框架

    截图

    login

    datastatistics1

    datastatistics2

    projectlist

    appmanager

    version

    展开全文
  • Create React App npx create-react-app my-react-app npx on the first line is not a typo — it’s a package runner tool that comes with npm 5.2+. 国内下载太慢,也可以使用淘宝定制的 cnpm 进行安装。 ...

    Create React App

    • 通过npx安装(新的方式,未来推荐)。
      npx on the first line is not a typo — it’s a package runner tool that comes with npm 5.2+.
      npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
      npx create-react-app my-react-app这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。
    npx create-react-app my-react-app
    
    • 通过cnpm安装(目前推荐)。
      国内下载太慢,也可以使用淘宝定制的 cnpm 进行安装。
    cnpm install -g create-react-app
    create-react-app my-app
    

    安装完成后,会显示下列信息。

    Inside that directory, you can run several commands:
    
      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!
    
    We suggest that you begin by typing:
    
      cd my-learn
      npm start
    
    Happy hacking!
    

    进入my-app目录,使用 npm start 命令启动。启动后会自动打开浏览器 http://localhost:3000
    启动界面:
    在这里插入图片描述

    展开全文
  • (1)npm命令进行全局安装create-react-app npm install -g create-react-app (2)创建react项目 create-react-app my-app cd my-app 生成my-app项目的目录结构 my-app/   README.md   ...

    1npm命令进行全局安装create-react-app

    npm install -g create-react-app

    2)创建react项目

    create-react-app my-app

    cd my-app


    生成my-app项目的目录结构

    	     my-app/
      		README.md
     		node_modules/
      		package.json
      		.gitignore
      		public/
        		    favicon.ico
        		    index.html
      		src/
        		    App.css
        		    App.js
        		    App.test.js
        		    index.css
        		    index.js
        		    logo.svg
    
    

    3)创建react项目完成后,我们尝试启动开发者模式。

    cd my-app

    npm start

    会启动弹出Urlhttp://localhost:3000/的界面,表示创建react应用已成功。


    展开全文
  • 一,首先检查环境ReactNative(一下简称:RN)开发,必要环境。 等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react ...
    一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。
    等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react native app)模式开发,也就是利用脚手架生产项目模板。【国内市场对CRNA的介绍不多,我这里先简单的介绍一下CRNA 入门,后续还是讲原生Android/IOS混合这种模式】暂时先不介绍CRNA模式开发,等国内市场成熟再说不迟。

    工具准备:

    1,进入http://nodejs.cnnodejs中文网,下载与自身环境相一致的nodejs安装包

     

    2,安装包下载之后,双击进行安装

    win平台的同学注意,安装过程中要关闭杀毒软件和各种安全工具

    3,安装完成之后,打开命令行工具,检查是否安装成功,执行如下命令:

    $ node -v
    

    该命令执行结果为当前node版本,笔者当前版本为:

    4,检查NPM是否安装成功,

    npm 是Node包管理工具,之后需要使用它来安装其他node程序包

    在在命令行中输入如下命令:

    $ npm -v
    

    该命令执行结果为:

    3.10.10
    
    

    Yarn

    Yarn是Facebook出品的一个依赖包管理工具,起作用和npm一样。但Yarn具有更多好用的特性:

    • Yarn 会缓存它下载的每个包,所以不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有

    • Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。

    • Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

    • 网络适应单个请求失败不会导致安装失败,请求失败时会重试

    安装yarn

    访问Yarn官网,下载响应平台的安装包,进行安装

    使用Yarn

    安装好之后,其他工具会自动使用Yarn进行加速。

    当然安装之前,你可以先检查一下,你自己是否已经安装过Yarn,如果出现下图的模式,说明已经安装过了。

    yarn -v 看一下当前版本

    安装create-react-native-app命令行工具

    create-react-native-app是一个综合创建ReactNative工程,并且不需要配置的工具,它极大的简化了入门开发的流程。具体的内容,大家可以进入其github.com的主页进行浏览

    安装create-react-native-app需要使用npm进行,在任意目录下,输入如下命令,便可以在该目录下创建一个ReactNative工程。

    注意,如果没有安装crna命令行工具的话,直接运行该命令会报这样的错:

    所以我们要先安装命令行工具,也叫脚手架。

    由于npm 服务器在境外,加上网速慢的原因,这个加载起来会很满,大家稍安勿燥。

    如图所示,安装完成,我今天网速好像有点快啊,安装了30s。

    创建ReactNative工程

    ReactNative工程的模板需要通过create-react-native-app工具进行创建。创建方法如下:

    1,通过命令行进入存放ReactNative工程的文件夹。

    2,在该文件夹下执行如下命令:

    $ create-react-native-app myapp
    

    myapp为工程名,可以更换为其他字符,但必须小写

    安装过程需要1-5分钟不等,如想提升安装速度,可以安装yarn,详情见yarn官网

    下面为笔者安装成功截图:

     

    这个过程比较 漫长  是真的漫长啊,我等了有10分种。这个过程你不要怀疑时间,真的是这样的。

    如果在这个过程中,你等的不耐烦,可以先下载我们的必备工具:1.模拟器,这里我推荐夜神模拟器。2.Expo ,这是一个可以直接装在手机上或者模拟器里,用来测试项目用的。

    模拟器都会安装吧,安装好模拟器,我们配置一下参数:

    为了减少我们的内存开销,我们把配置调的低一点。内存大的土豪无所谓!

     

    运行预览工程

    1,工程创建完成之后,便可以启动工程,开始开发和调试。

    启动工程,首先要使用命令行工具进入工程更目录,然后运行如下指令

     

    $ yarn start
    

    工程 启动之后,会生成一个二维码和一个本地链接,通过此此二维码或本地链接,便可预览工程运行效果。

     

     

     

     这就是代表着你的项目已经跑起来了,如何看效果呢?那就看英文字符,提示:想预览你的app加载出来是什么吊样,那么就用expo app的扫码工具扫一扫吧,你就可以看见你的项目运行起来是什么吊样了!

    expo是什么,如何找到expo并安装expo呢?去expo官网 https://expo.io  好多人反应官网上下载expo有问题,并且也有人加我找我要,这里如果你们有问题的话,可以直接访问下面我给出的expo下载链接,直接下载!

     

     

    按 a 打开该项目在android 或 模拟器上开发设备上

    按 q 展示二维码

    按 r 重新加载资源包 

    按R 重新加载资源包,并清楚缓存

    好了,下面我给大家提供一点资料:

    2,启动工程之后,需要在手机端安装Expo App,使用Expo App对所开发的ReactNative App进行预览运行。

    安装ExpoApp的方法如下:

    iOS平台:在AppStore中搜索Expo client,如图

     

    Android平台下,访问此链接:https://download.csdn.net/download/qq_28929589/10591139 下载安装包并安装,安装过程中需要给此App全部权限。

    3,Expo App在手机端安装完成之后,打开ExpoApp,通过其扫描二维码的功能,扫描生成的二维码,便可以在App内预览开发中的App工程

     

    4,新建工程的运行效果为:

    注意:expo上看你开发的app效果有两种途径:1.手机上直接扫码就可以了 2.复制exp://xxxx.xx.xx.xx那个链接,到project上收索该地址,可以看到项目,如图

     

    在IDE中编写代码,查看效果!

    熟话说,工欲善其事,必先利其器,这里我推荐大家用 vs code编辑器敲代码,效果是非常爽的!

     

    找到我们刚才创建的项目,有vs code打开它,并且编写代码!

     在我修改了内容之后,app的内容也发生了变化!

     

     

    用vs code写rn的话,我在推荐大家安装几个插件,安装插件的目的是为了更加高效的开发

     

     


     

     

     好了,到这一步,我们的app就算是跑起来了,如果你耐心的和我学到了这里,那么恭喜你,你很牛逼,因为我第一搞这个的时候,搞了两天,还是一脸蒙蔽!

    后续文章持续更新,敬请期待!

    文章为作者原创,转载请注明出处

    https://www.cnblogs.com/gdsblog/p/8025092.html

    展开全文
  • 关于react-native的介绍请各位自行百度,本系列文章将着重讲解如何从零开始搭建一个react-native开发环境。本系列教程将使用如下工具和库:node.js;后端服务器语言;react-native:前端框架;react-native官方文档...
  • 使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......) 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具。例如大多数的React项目都有src,...
  • create-react-app 是来自于 Facebook,通过该命令我们无需配置就快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 执行以下命令创建项目: $ cnpm install -g create-...
  • React Nactive混合APP开发

    2018-11-08 16:15:11
    React Nactive混合APP开发教程,该课程主要教大家如何利用react Nactive 构建一个APP,详细介绍各个APP中各个组件的用法及使用。
  • react环境搭建
  • create-react-native-app 文档地址 react-native expo 官网 expo 文档 两种创建react-natvie-app的方法 react-native init projectName create-react-native-app ...环境配置比较:第一种方法要求的开发环境比...
  • 目录 1. React Native简介 ... 1.2 为什么要使用React Native开发  1.3 环境搭建  1.4 基础开发工具与调试 2. React Native 开发基础  2.1 flexbox 布局基础知识  2.2.JaveScript 语法基础  2.3 Re
  • React开发过程中会使用大量node.js提供的各种库(就像Java开发需要使用大量的jar包一样),我们在开发Java程序时使用Maven来管理开发过程中使用的jar包,相应的在开发React程序时我们需要使用npm (这里给个npm的全称...
  • create-react-app:来自 Facebook官方的零配置命令行工具 create-react-app 是来自于 Facebook 出品的零配置命令行工具,能够帮你自动创建基于 Webpack+ES6 的最简易的 React 项目模板,有助于初学者快速上手实践。...
  • React 搭建开发环境

    2018-07-09 14:22:40
    工欲善必须利其器,想要高效的开发react,必须保证有一个高效有序的开发环境。React本文记录了本人以及目前团队从无到有使用React的过程,我们将从webpack开始说起,一步一步展现React最基本的开发生态。在这里并不...
  • 1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。最后开始打算从RN开始学起。废话不多说,开始搞起。2 ...
  • 使用场景:在使用creat-react-app开发项目中,项目中接口会分为两种情况一种是开发中的测试接口,一种是打包上线后的正式接口。那么怎么判断是开发模式还是线上模式(打包后的项目也就是npm run build)。 如果...
  • 使用WebStorm 开发React Native Android APP的配置本教程可以帮助你对WebStorm 进行配置,适用于开发React Native app 1:安装 2:环境配置 3:安装插件 4:Enjoy it 安装1:安装nodejs 与NPM 从以下链接下载Nodejs 并...
  • create-react-app 开发环境编译太慢的解决方案 react 开发环境编译太慢的解决方案
  • 当然 .env.development .env.test就是开发和测试环境了 变量规则: 必须是 REACT_APP_ 开头的 REACT_APP_ROOT='/api' 读取不变还是: let root = process.env.REACT_APP_ROOT 设置代理 在src 根目录新建:set...
1 2 3 4 5 ... 20
收藏数 21,410
精华内容 8,564