构建react_构建react项目 - CSDN
精华内容
参与话题
  • React项目构建

    2018-05-08 21:56:46
    自己学习了一下,总结了两种react项目构建的方法.这两种方法的前提是你安装了node.js。第一种是通过create-react-app,这也是官网教程中的方法。它一个无需配置的、用于快速构建开发环境的脚手架工具。① 首先在全局...

    目前React项目挺火的。自己学习了一下,总结了两种react项目构建的方法.

    这两种方法的前提是你安装了node.js

    第一种是通过create-react-app,这也是官网教程中的方法。它一个无需配置的、用于快速构建开发环境的脚手架工具。

    ① 首先在全局安装create-react-app

    npm install -g create-react-app  # Window
    
    npm install -g create-react-app  # Linux


    ②生成react项目


    生成的项目文件结构如下:


    ③cd到生成的项目文件夹中,npm start 

    第二种方法:webpack 一步步构建

    ①使用webpack对项目初始化,执行完后项目文件夹中会生成一个package.json文件

        npm init 

    ②安装webpack,安装成功后会在package文件中看到版本号 ,当然你也可以用cnpm安装,这样比较快一点

    npm install --save-dev webpack

    ③配置webpack.config.js,在项目文件夹根目录中新建一个webpack.config.js,并写入下面的代码,这主要是生成入口文件和出口文件,说白了就是打包前的文件和打包后的文件,

    var path =require('path');
    module.exports = {
        //入口文件
        entry:'./app/index.js',
        //出口文件
        output:{
            filename:'index.js',
            path:path.resolve(__dirname,'dist')
        }
    }

    新建index.html文件,并移入出口文件,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>webpack-react</title>
    </head>
    <body>
        
    </body>
    <script src="./dist/index.js"></script>
    </html>

    ⑤测试webpack配置

    在入口文件(./app/index.js)中写入下面的代码,并进行打包测试。

    function component(){
        var element = document.createElement('div');
        element.innerHTML = ('Hello React');
        return element;
    }
    
    document.body.appendChild(component());

    package.josn的scripts属性中添加build命令

    "scripts": {    "build": "webpack"  },

    然后 npm run build 执行,打开index.html,检测一下app/index.js的结果,如果成功则能看见"hello React",

    现在我们需要搭建一个开发服务器,安装webpack-dev-server,

    cnpm install --save-dev webpack-dev-server

    安装完成后,配置webpack.config.js文件,

    devServer:{
        contentBase:'./',
        host:'localhost',
        compress:true,
        port:1717
    }

    并在package.json中的scripts标签中新增server指令,--open只自动启动浏览器

     "server": "webpack-dev-server --open"

    在终端输入npm run server,就能成功启动我们的项目,如果我需要设置自动刷新,否则我们需要每次都去run build.我们需要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。

      //出口文件  
        output:{  
            filename:'index.js',  
            path:path.resolve(__dirname,'dist'),
            publicPath:'temp/'
        }  

    并在index.html引入

    <script src="./temp/index.js"></script>

    其次我们需要安装babel,并支持es2016和React,所以要安装四个包。

    cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

    安装成功后可以在package.josn文件中看见他们的版本号.可以到webpack.config.js里配置module,也就是配置我们常说的loader。

    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loaders:"babel-loader",
                query:{
                    presets:['es2015','react']
                }
            }
        ]
    }

    通过上面的一些配置,webpack基本配置完成,但是我们还需要安装react和react-dom,才为我们编写react代码服务.

    cnpm install --save react  react-dom

    安装成功后我们需要改写app/index.js和index.html里的代码

    app/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(
        <div>Hello JSPang</div>,
        document.getElementById("app")
    );

    index.html

    在body中增加容器

    <div id="app"></div>

    现在可以输入npm start 启动我们的项目.预览效果





    展开全文
  • 所以,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、但是个人不会满足于这样的结构,很不适合开发。
    下面这个是我进行一个初始化的一个改造:
    这里写图片描述

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

    展开全文
  • 【分享视频资源】React JS教程

    千次阅读 2018-05-11 10:57:08
    React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 ...

    React 是一个用于构建用户界面的 JAVASCRIPT 库。
    React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
    React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
    React 拥有较高的性能,代码逻辑也比较简单。

    视频教程下载网址: (百度云)
    https://pan.baidu.com/s/1jJLo6GY

    密码: aty5

    内包含文件:
    这里写图片描述

    这里写图片描述

    还有这位牛人写的也比较清晰,我就不多说了,大家可以参考下:
    http://www.ruanyifeng.com/blog/2015/03/react.html

    展开全文
  • npm config set registry https://registry.npm.taobao.org -- 配置后可通过下面方式来验证是否成功 npm config get registry -- 或npm info express

    npm config set registry https://registry.npm.taobao.org
    -- 配置后可通过下面方式来验证是否成功

    npm config get registry
    -- 或npm info express

    展开全文
  • nginx 上部署 react 项目

    万次阅读 2018-02-28 17:39:16
    测试项目:react-demo克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目)如果需要,请安装项目环境,比如:node.js,yarn等进入项目目录,执行npm run build,开始构建项目构建成功之后,会生成一个...
  • react官方脚手架创建的项目默认是隐藏webpack的配置的,我们要配置不同环境的不同通用请求接口地址,就要暴露webpack配置,执行命令 npm run eject 执行完之后,就会多c出下面几个文件 找到scripts目录下的build....
  • 推荐几款ReactJS最优秀的UI框架

    万次阅读 2018-07-06 08:42:26
    使用优秀的UI框架来构建你的ReactJS应用。Material-UI一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。查看地址:...
  • 最近在学习react时候无意中接触到了element-react,感觉文档和界面做的都很漂亮,所以决定用elemet-react快速构建一款后台管理系统。下面是一些效果
  • react五星重点npm run eject

    千次阅读 2019-06-13 16:40:18
    在用creata-react-app脚手架构建react项目的时候, 当我们使用软件打开之后,会发现共有几个文件 其中: 1.node_modules是各个插件存放位置 2.public用于放置静态资源,里面的资源不会参与构建 3.src是源码...
  • 构建react-app的时候,一直卡在加载资源包的地方,重试了几次也是卡住在这里,在git bash时候是看不见卡住在哪里的,因为git bash没有显示加载的过程。可以在项目文件夹按住shift点击右键就会看见:在此处打开...
  • React使用build生成项目:资源文件路径"/"修改为相对路径"."React使用build生成项目:资源文件路径"/"修改为相对路径"."yarn build 指定相对路径拓展为任意构建环境定制环境变量帮助文档 React使用build生成项目:...
  • React的项目创建

    万次阅读 2018-01-23 14:40:18
    使用create-react-app构建react应用程序 create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。 快速开发步骤: 打开控制台 进入你想要创建项目的...
  • create-react-app关闭eslint提醒

    万次阅读 2018-06-30 18:39:13
    create-react-app关闭eslint提醒(亲测)在create-react-app框架下的react项目中,定义变量,未使用会出现如下报错:解决方案:1: 运行npm run eject 注意:这是一个单向操作,一旦你使用eject,那么就不能恢复了 ...
  • React 后台管理系统项目

    千次阅读 2020-10-19 14:38:05
    react + redux + react-router + sass + antd + eslint + webpack 项目预览地址 https://jesonman.github.io/react-admin-demo/ 项目源码地址 https://github.com/JesonMan/react-admin/ 相关页面 登录 首...
  • react-router和react-router-dom的区别

    万次阅读 2018-06-19 20:04:39
    转载自:react-router和react-router-dom的区别react-router-v4,我称之为“第四代react-router”,react-router和react-router-dom的区别是什么呢?为什么有时候我们看到如下的写法:写法1:import {Swtich, Route, ...
  • 投稿 | 亦枫责编 | 唐小引Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能。我们收到大量有关我们用法或 React ...
  • React使用原生Javascript版本 React使用JSX语句 React自动识别{},当javascript处理 React子节点this.props.children JSX中嵌入javascript;如:条件判断、使用变量、使用函数、使用逻辑与(&&)、使用逻辑或(||) React...
  • npm 创建react项目

    千次阅读 2018-08-01 20:57:35
    win+R 输入cmd ,打开cmd面板   安装cnpm (淘宝镜像,作用:提升下载速度) npm install -g cnpm --...   安装react构建器create-react-app cnpm install -g create-react-app create-react-app my-app...
  • 构建react项目失败解决办法

    千次阅读 2018-02-12 13:17:39
    使用create-react-app构建react项目失败,如图: 解决办法: 更换为淘宝镜像 npm config set registry https://registry.npm.taobao.org create-react-app 项目名,构建react项目成功 ...
  • 当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简单、粗暴,但是也有很大的局限性。...
1 2 3 4 5 ... 20
收藏数 51,737
精华内容 20,694
关键字:

构建react