精华内容
参与话题
问答
  • react项目如何运行

    千次阅读 2018-11-10 15:02:23
    入门react时,最烦的就是配置各种依赖,不管是你从网上down的别人的代码还是你自己的代码换个工作目录运行,都会发现运行不起来。 解决办法是,移动react项目时不要把node_modules一同复制,打开项目后 运行cnpm i ...

    入门react时,最烦的就是配置各种依赖,不管是你从网上down的别人的代码还是你自己的代码换个工作目录运行,都会发现运行不起来。

    解决办法是,移动react项目时不要把node_modules一同复制,打开项目后 运行cnpm i 或者npm i,这个时候,它会自动根据你package.json里面的依赖,下载你需要的node_modules,然后就能运行了。

    展开全文
  • React项目从开发到上线运行全过程

    万次阅读 多人点赞 2018-07-02 10:05:56
    越来越多的前端工程师使用react来进行开发,当时用react时,creact-react-app无疑进入了大家的眼帘,本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用,然后本地调试,直到最后的上线运行。...

            随着react的流行,越来越多的前端工程师使用react来进行开发,当时用react时,creact-react-app无疑进入了大家的眼帘,本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用,然后本地调试,直到最后的上线运行。

    本篇文章内容结构说明,主要有以下12个部分:

    1. 安装nodejs

    2.使用nodejs的npm包安装create-react-app模块

    3. 使用creat-react-app模块创建我们的项目

    4. 了解控制我们项目运行测试打包的几个命令

    5. 通过npm start运行我们的项目

    6. 查看生产的项目目录的结构,并了解其作用

    7. 开始创建几个我们自己的组件

    8. 再次运行我们的项目

    9. 开始打包生产环境中需要的代码

    10. 将我们的代码部署进入我们的服务器

    11. ok,上线了,我们可以让用户正式访问了

    12. 维护调试

    一、安装node:

    我们要用create-react-app来开发react,首先要通过包管理器安装create-react-app,而包管理器一般安装了nodejs后会自带的,所以我们的第一步是在我们的电脑上安装node。

    请参考以下nodejs安装教程:

    Node.js安装配置

    二、检测npm包是否可用:

    安装好后,并且也配置进入了环境变量,然后我们来检测下你的npm包是否可用,打开cmd窗口,输入npm -v 进行检测,如下所示,若显示版本号则说明安装成功,环境变量也配置成功,可用开始安装creact-react-app进行react开发了。如果,你输入npm -v后没有弹出版本号,那么可能是你的环境变量没有配置好。请参考下面的如何配置环境变量教程。

    环境变量是什么?如何配置环境变量

    三、使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

    create-react-app 自动创建的项目是基于 Webpack + ES6 。

    执行以下命令创建项目:

    $ cnpm install -g create-react-app
    $ create-react-app project_name
    $ cd project_name/
    $ npm start在浏览器中打开 http://localhost:3000/ ,结果如下图所示:

    命令解释:

    npm : 表示调用的随node一起安装的npm包

    install : 顾名思义,就是安装的意思

    -g : 表示全局安装,安装后在系统的任意位置都能使用,这就是全局安装的意思

    create-react-app: 这就是我们要安装的模块

    提示:安装好后,如果你想卸载,可以直接把install改为uninstal即可,也就是在前面个un就可以表示卸载了。有时候卸载后在安装可能会报写错,此时你直接定位的create-react-app安装目录,然后把这个目录删除一般就能解决了。

    四、常用命令解释

    安装好后,他给你说了些命令,这些命令大致如下

      npm start

        命令作用:Starts the development server.

      npm run build

         命令作用:构建用于生产的静态代码【我们开发完成后,发布时就使用此命令获得我们想要的用于生产的代码放入服务器】

      npm test

         命令作用:运行测试服务器

      npm run eject

       命令作用:

        复制构建依赖关系,配置文件和脚本进入应用程序目录。(默认依赖关系是隐藏的,如果你执行此了操作,这你的项目就会出现此依赖关系)

    注意:此操作是不可逆的,

       如何开始你的项目:

      cd project_name

      npm start

    五、查看项目目录结构

    然后我们打开项目目录,可以看下其目录结构

    大致如下图所示,共有三个文件夹,四个文件

    解释如下:

    三个文件夹

     node_modules  //用来盛放你安装的所有node模块的文件夹

    public                //用来盛放所有公共资源的文件夹,比如html模板,项目图标

    src                     //用来盛放你自己代码的文件夹,默认生成app.js代码也在里面

    四个文件

    .gitignore       // 这个是用来定义那些在提交到远程代码库时要忽略的文件

    package.json //用来声明项目的各种模块安装信息,脚本信息等

    package-lock.json //用来锁定模块安装版本的,能确保大家安装的模块版本一致

    README.md  //盛放关于这个项目的说明文件(全英文的,有兴趣可以看看)

    1. src文件夹

      然后我们来重点看看src文件夹,因为我们的react组件代码待会也会写在里面。

      这里面的文件也不多,就四部分

      1、APP相关的js,css文件   //自动给我们创建的一个组件

      2、index相关的js,css文件

      3、一个logo.svg图标            //默认的一个简单图标文件

      4、 一个registerServiceWorker.js文件 //此文件能进行缓存一些资源,一般是用到生产环境的,主要是用来加快访问速度,

    2. 大致的分析下组件结构

      主要说些比较重要的文件

      1. 首先是public目录下盛放着index.html模板,如果开发单页应用,那么所有的代码都会渲染在这里。【index.html文件中也就三部分内容。1.通过meat标签引入的主页一个自适应的viewport声明。2. 通过link标签引入的一个项目基本 m配置文件anifest.json和图标,3. 一个用来让react组件渲染的div标签】

      2. 也是在public目录下的manifest.json文件,此文件记录着这个react的APP应用的基本配置信息,他类似于Android的AndroidManifest.xml

      3. 然后就是在scr目录下的index.js文件,他不是一个react组件,他是链接react与htnl模板的桥梁,所有的react组件最终都是由他进行渲染到html模板中。然后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。

      4. registerServiceWorker.js文件,这个文件是用于生产环境的,它可以缓存些资源,让用户在离线模式下也能访问缓存的内容,以给用户更好的体验,开发环境中没什么用处。。。

      5. 最后还有个app.test.js文件,主要是用来组件测试的,有兴趣可以取好好了解下,这里就不多讲这个。

    六、创建我们自己的组件

    1. 整个项目文件基本分析完了,然后我们就可以创建自己的组件了。

    2. 我们在src下新建一个目录:myselfComponent,用来盛放我们新创建的组件

    3. 我们分别创建两个组件C1,C2,他们分别各显示一句话即可,

    4. 然后我们在index.js里面引入C1,C2组件,

    5. 然后在浏览器查看运行效果


    C1.js

    import React, { Component } from 'react';

    import './C1.css';

     

    class C1 extends Component {

      render() {

        return (

          <div className="c1">

            Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件 我引入了相同目录下的 C1.css 文件,用来给我包含的文字设为红色

          </div>

          );

      }

    }

     

    export default C1;


    C2.js

    import React, { Component } from 'react';

    import './C2.css';

     

    class C2 extends Component {

      render() {

        return (

          <div className="c2">

            Hello,我是在src/myselfComponent目录下的C2.js文件中的C1组件 我引入了相同目录下的 C2.css 文件,用来给我包含的文字设为蓝色

          </div>

          );

      }

    }

     

    export default C2;


    index.js

    import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    import C1 from './myselfComponent/C1.js';

    import C2 from './myselfComponent/C2.js';

    import registerServiceWorker from './registerServiceWorker';

     

    ReactDOM.render(

      <div>

        <C1/>

        <App />

        <C2/>

      </div>,

     

      document.getElementById('root'));

    registerServiceWorker();


    ok,css文件就不展示了,免得让你们眼睛看花了

     在浏览器中的运行效果

    可以看到,运行的非常完美

     再复杂点

    上面中,我们是把所有组件全部引入了index.js文件中,然后统一渲染的。但是在实际开发中组件间必然存在嵌套关系,就是一个组件里面嵌套着另一个组件,

    现在我们就来在写个组件C3,然后把他嵌套进APP组件中。


    C3.js

    import React, { Component } from 'react';

    import './C3.css';

     

    class C3 extends Component {

      render() {

        return (

          <div className="c3">

            Hello,我是在src/myselfComponent目录下的C3.js文件中的C3组件 我引入了相同目录下的 C3.css 文件,用来给我包含的文字设为粗体黄色

          </div>

          );

      }

    }

     

    export default C3;


    APP.js

     

    import React, { Component } from 'react';

    import logo from './logo.svg';

    import './App.css';

    import C3 from './myselfComponent/C3.js';

     

    class App extends Component {

      render() {

        return (

          <div className="App">

            <header className="App-header">

              <img

                   src={ logo }

                   className="App-logo"

                   alt="logo" />

              <h1 className="App-title">Welcome to React</h1>

            </header>

            <C3 />

            <p className="App-intro">

              To get started, edit <code>src/App.js</code> and save to reload.

            </p>

          </div>

          );

      }

    }

     

    export default App;


    七、打包为生产版

    ok,基本上还是很简单的,然后我们的项目开发演示完成了,现在我们来开始进行生成生产环境的代码(所谓生产环境就是值用来发布到服务器里面的代码,是根据我们开发环境的代码生成)

    执行命令:

    num run build

    执行此命令后,他会在我们的项目目录下创建一个build文件夹,里面存放的就是生产环境需要的代码了

    八、将其放在服务器中执行

    生成环境中的代码生成后就要开发发布了,也就是放到我们的服务器上,供用户访问使用

    这部就比较简单了,直接将build里面的所有文件复制到服务器的根目录下即可,如下(这里我是直接复制到我本地搭建的apach服务器的根目录里面的)

     在看浏览器里面的运行结果(我的apach服务器的端口为8087)

     九、将其放到远程服务里面部署

    刚刚演示的是本地服务器,现在我再将其放到远程服务器里面进行部署

    如果你不知道如何将文件上传到远程服务器,请参考这一篇文章

    怎么把H5上传到服务器

    在浏览器中访问,ok,一切正常

    注意:如果你不想将文件复制到根目录,那么你需要修改inde.html文件中对js和css文件的路径,不然无法正常访问。

     十、部署到服务器上后的维护

    当我们项目上线后可能还要开发新功能,也可能项目运行期间会出bug,此时该怎么办呢?

    1. 当要开发新功能时,我们直接在本地开发好,然后打包生产文件,最后直接放到远程服务器里面就可以了

    2. 当出问题后,我们可以直接在浏览器里面访问,然后在线的打开控制台调试,并修改运行中的html代码,当改好后,再在本地修改即可。当然如果bug很复杂的话,那就需要认真思考了,不过要相信没有解决不了的bug

    再总结下:流程如下

    1. 安装nodejs

    2.使用nodejs的npm包安装create-react-app模块

    3. 使用creat-react-app模块创建我们的项目

    4. 了解控制我们项目运行测试打包的几个命令

    5. 通过npm start运行我们的项目

    6. 查看生产的项目目录的结构,并了解其作用

    7. 开始创建几个我们自己的组件

    8. 再次运行我们的项目

    9. 开始打包生产环境中需要的代码

    10. 将我们的代码部署进入我们的服务器

    11. ok,上线了,我们可以让用户正式访问了

    12. 维护调试

    到此,这篇文章就算完了,简单的讲了下,如何从无到有的搭建react开发环境,创建react项目,开发自己的项目,最后部署自己的项目,然后在运营期间的维护等。

    展开全文
  • react项目的打包: 在该项目文件夹中打开终端输入: npm run build //项目打包命令 打包成功后文件夹中会多出一个 build 文件,该文件就是打包好的项目! react项目打包后的启动方法: 我们如何启动该项目呢! ...

    react项目的打包:

    在该项目文件夹中打开终端输入:

    npm run build //项目打包命令

    在这里插入图片描述

    打包成功后文件夹中会多出一个 build 文件,该文件就是打包好的项目!

    react项目打包后的启动方法:

    我们如何启动该项目呢!
    首先我们全局安装live-server插件,live-server插件可以简单创建一个本地服务

    npm install -g live-server //全局安装live-server插件

    在这里插入图片描述
    安装完成就可以在终端启动打包好的build项目了
    在build文件终端输入

    live-server //启动项目

    在这里插入图片描述

    默认监听在8080端口

    这是本项目启动的效果图:
    在这里插入图片描述

    展开全文
  • react项目的安装与运行

    万次阅读 2017-09-26 20:51:46
    1.下载node 然后傻瓜式安装 2.安装淘宝镜像  淘宝镜像 不是安装 是所有node设置的关键 作用是 不去访问国外服务器 直接去淘宝服务器下载 插件 ... 3.进入项目 cd [路劲自己打]  ...4. npm i

    1.下载node 然后傻瓜式安装

    2.安装淘宝镜像  

     淘宝镜像 不是安装 是所有node设置的关键  作用是 不去访问国外服务器  直接去淘宝服务器下载 插件

     npm install -g cnpm --registry=https://registry.npm.taobao.org 



    3.进入项目   cd 【路径自己打】 

    4.  npm i  
    安装/还原  node 等 package.json 的 指定插件



    5.启动项目   
     npm start 

    展开全文
  • 关于React项目的运行

    2019-06-06 14:17:52
    安装开发工具WebStorm 安装node.js(8.0以上版本) 配置npm环境变量 WebStorm配置 导入项目,WS终端 cnpm install 下载相关包 npm start 运行 运行成功 ...React 命令初始化 ...
  • 运行react项目

    千次阅读 2018-04-08 19:40:49
    进入目录,按住shift键,在此处打开命令窗口输入:npm start会弹出 localhost:3000,的浏览器窗口打包项目:npm run build
  • react 常用命令

    千次阅读 2018-06-11 16:53:23
    工具:使用create-react-app脚手架开发 npm install -g create-react-app create-react-app my-app cd my-app/ /**启动项目/ npm start /*安装依赖*/ npm install
  • react运行环境搭建

    2020-06-22 10:31:20
    (2)、在运行软件中运行命令全局安装基础环境 npm install -g create-react-app (3)、新建项目 create-react-app my-app (4)、新建完成后 根据提示命令进入运行 cd my-app npm start ...
  • React Native运行原理解析

    万次阅读 多人点赞 2016-09-22 15:54:18
    Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建...
  • React 运行npm run eject的问题

    千次阅读 2019-07-16 15:05:09
    @TOC最近刚开始解除react 用的是官方推荐的create-react-app脚手架工具 如果想要自己修改webpack之类的配置需要执行npm run eject弹出配置文件 但这个操作是不可逆的 遇到一个问题就是我执行npm run eject之后 发现...
  • 1.修改baseUrl 添加本地测试baseUrl console.log($NODE_ENV); // console.log(process.env.NODE_ENV) let baseUrl = "/api/"; ... // 开发环境域名,直接访问地址,不走代理,如果是ip走代理 // 生产环境,不跨域,接口...
  • 由于react项目,有许多的依赖包,而且一般在上传源码的过程中都不会上传node_modules下的依赖包,因此在运行其他人的react项目时,需要自己在本地安装依赖环境。 本次学习的项目是W3CSchool的一个练习项目,从网上...
  • React项目搭建命令

    2018-10-12 14:19:15
    create-react-app my-app 目录名不要使用大写,这样作只要是为了严谨性,因为在Linux下是严格区分大小写的。 cd my-app npm start   安装yarn npm install -g yarn yarn add react-router...
  • 2、进入文件根目录打开命令窗口 cd ddpeiyin-admin 3、运行项目 npm start ***更改端口: const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000;将此处的8000可换为其他端口 scripts-start文件,...
  • 转载:https://www.cnblogs.com/greenteaone/p/10083129.html "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, 脚手架create-rea...
  • 准备工作 安装node.js:   官网下载node.js稳定版本,并进行安装nodejs官网 安装cnpm代替npm: ...安装create-react-app   安装create-react-app有利于我们快速创建一个react应用,安装命令: cnpm inst...
  • 运行react build 文件

    千次阅读 2019-02-19 02:55:09
    1 利用create-react-app 创建项目2 开发完项目,npm run build 后,将build 的文件传给别人3接到build 包后,需要在本地安装一个静态服务器,然后才可以运行项目,步骤: a: npm install -g serve b: serve -s build...
  • React脚手架打包后运行页面空白解决方法: 方法一:在package.json文件中进行如下修改 { "name": "cnode", "version": "1.0.0", "description": "", "main": "index.js", "homepage":"./", "author": "", ...
  • 错误提示如下: Remove untracked files, stash or commit any changes, and try again. npm ERR! code ELIFECYCLE ... myreact@0.1.0 eject: `react-scripts eject` npm ERR! Exit status 1 npm ERR...
  • 打包 React 项目并在服务器运行

    千次阅读 2018-11-02 18:17:24
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 1.找到项目根目录的package.json文件:如图: 2.打开cmd执行:npm run build 3.生成DIST文件夹。 4.把DIST文件放到服务器......
  • 过程一 @1. 安装Node.js 里面含有npm配置操作具体不多说了 @2. win+r里边cmd确定 执行node-v npm -v @3. 找到npm淘宝镜像 就是这句代码 执行 $ npm install -g cnpm --registry=...@4.查看yarn安装 执行cnpm...
  • (1)cd D://project/my-app npm start ...默认指向本机3000端口,此时浏览器打开 localhost:3000 会显示react界面 运行后截图 转载于:https://www.cnblogs.com/szw-blog/p/11441324.html...
  • react脚手架构建运行时报错问题

    千次阅读 2019-06-27 15:49:16
    具体操作 sudo npm install -g create-react-app mkdir react-first-demo ...create-react-app react-cli cd react-cli npm install (依赖安装完以后执行npm start) npm start 错误 $ react-scripts start There...
  • 因为后边要做rn项目,所以...react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...
  • React整体流程

    万次阅读 2017-03-29 14:24:50
    文章地址:http://react-china.org/t/react-redux/9072 react的组件化 react的一个组件很明显的由dom视图和state数据组成,两个部分泾渭分明。state是数据中心,它的状态决定着视图的状态。这时候发现...
  • react工作原理

    千次阅读 2018-05-02 14:47:38
    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual&amp;amp;amp;nbsp;DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长...
  • 楼主前两天给电脑杀了一下毒,之后发现原有的react项目不能正常运行,会报各种错,这边修好那边又报错,在网上查资料后,别人说是npm被更新了,但是我降级到之前的版本还是不行,自己又试着把node.js卸载后重新安装也是不行...
  • 博主这周开始学react 一早上敲了helloworld 开心 原地转圈圈 先建一个文件夹叫它react-demo src/App.js import React from 'react'; export default function App() { return <h1> h...
  • react-native 运行项目

    2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...
  • 按照官方教程配置按需加载,npm start启动时报错,'react-app-rewired' 不是内部或外部命令,也不是可运行的程序 这可能是create-react-app有丢包的缺陷,手动安装包后,需要重新添加下 解决办法:npm add react...

空空如也

1 2 3 4 5 ... 20
收藏数 73,364
精华内容 29,345
关键字:

react运行