• 现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目, 准备工作安装node环境,这个去百度搜索下node安装,在命令行中 分别测试npm -v ; node -v都没问题,就说明环境准备好了...

    现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目,

    准备工作安装node环境,这个去百度搜索下node安装,在命令行中 分别测试npm -v  ; node -v都没问题,就说明环境准备好了,如下:

    然后安装脚手架,命令:npm install -g create-react-app

     脚手架安装好之后,就可以利用脚手架帮我们搭建一个项目了,以上我是在桌面目录文件夹下,想跟我一样测试的,可以在桌面按着shift+鼠标右键  ,选择在shell命令行模式(windows系统),以上命令都是在这个目录下操作的。

    然后创建一个新项目todolist,如下:

     

    然后按照提示跑起来(切到todolist目录         yarn start)就可以了。多操作几次就会越来越熟练。

    展开全文
  • 创建一个项目,首先要选择合适的编辑器(我选择的是VS Code)以及配置环境。 首先需要安装node.js,直接搜索并在官网下载安装包。 node.js官网:https://nodejs.org/en/ 选择适合的版本后下载下来(...

    React作为与Vue,Angular同样热门的前端框架之一,因其简单的代码风格(俗称语法糖)受广大开发者追捧。

    现在我也来学一下React。

    创建一个项目,首先要选择合适的编辑器(我选择的是VS Code)以及配置环境。

    首先需要安装node.js,直接搜索并在官网下载安装包。

        node.js官网:https://nodejs.org/en/

        选择适合的版本后下载下来(最好是最新版),并打开安装程序,如下图所示

        然后,根据安装提示安装node.js,npm包管理工具也会一同安装。

        安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成(如下图)。

    当然也可以从VS Code新建一个终端输入命令来查询(如下图)

    成功安装node和npm后,我们可以用npm来创建新的项目,首先用npm 安装 create-react-app工具(脚手架工具),其可以自动地在本地目录中创建react项目。

    在终端输入npm命令:

     npm install -g create-react-app

    然后继续输入 create-react-app my-new-app

    其实上述两句命令可以用 npx create-react-app my-new-app来代替

    不同之处在于第一种需要安装脚手架,第二种跳过安装脚手架,直接创建项目

    这里是默认安装在用户目录下的,想更换目录可以先进入到对应目录再输入上述命令

    等待一段时间待项目创建好你会发现包括以下目录

    其中,    --node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,

                  --public文件夹中是 index.html存放目录,也就是React根页面的所在地

                  --src中用于存放js文件,也就是项目开发中的主要区域

                  --json文件不能直接打开,需要用到文本编辑器,本人用的是VScode

                  --package.json用于记录项目信息,以及外部依赖包的导入信息等

    我们可以看到dependencies下包含 react / react-dom / react-scripts三个依赖包,后续导入的包都会记录于此

    这里只安装了一些可以说是必备的包,后续大家用到什么包搜索对应的npm命令就好了。
    因为npm是国外服务器来维护的,下载起来可能会比较慢(你懂的),然后大家可以用淘宝镜像cnpm,cnpm是十分钟和国外服务器同步一次。

      然后就可以通过命令 npm start 来启动项目(注意启动时 要在项目路径下输入 npm start启动命令,否则会报start命令找不到的错误),自动弹出localhost:3000的网页窗口,这样一个React项目就算创建成功了!我们 只需要继续完善就好了。

    展开全文
  • 从零开始构建react项目
  • 距离上次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。 然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在...

    转载请注明出处:王亟亟的大牛之路

    距离上一次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。
    然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在脚手架一行撸穿,还是感叹懒人的世界6666


    老规矩开篇前先案例:https://github.com/ddwhan0123/Useful-Open-Source-Android (一篇前端文章贴安卓东西合适吗?哈哈哈哈)


    废话不多说介绍下用得比较顺手的脚手架一个是FaceBook的create-react-app

    一个是阿里的Ant Design of React


    安装 create-react-app

    先装脚手架

    npm install -g create-react-app

    然后运行

    create-react-app 你的项目名

    然后噼里啪啦就ok了
    cd 进去

    npm run start

    这里写图片描述

    他会创建一个很纯粹的React项目
    引用到的就是

     "dependencies": {
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-scripts": "1.1.1"
      }

    没有其他依赖,所以如果要自己加一些库(UI组件什么的)就自己弄了


    安装 antd

    先装脚手架

    npm install antd-init -g

    然后cd到你要建项目到目录

    antd-init

    然后跑项目

    npm start

    这里写图片描述

    antd脚手架的依赖也就是多了一个自己的套餐antd

     "dependencies": {
        "antd": "^3.0.0",
        "moment": "^2.19.3",
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
      }

    升级版本

    基于dva的脚手架

    首先是安装脚手架

    npm install dva-cli -g

    然后创建项目

    dva new dvatest

    运行项目

    npm start

    效果如图

    这里写图片描述

    创建出来的就是一个有项目目录,有“路霸“,有打包脚本的“高完成度“项目了
    这里写图片描述

    简化了你的“立项成本“,简单好用!

    但是说实话roadhog的封装解释的东西相对浅显,爬坑。。。爬坑。。。。

    展开全文
  • 创建一个react项目有三种方式: 1.create-react-app 快速脚手架(简单,类似于 vue-cli 工具) 2.webpack一步一步构建 3. 第三方脚手架(generator-react-webpack,需要yeoman的支持) 这里主要介绍利用...

    创建一个react项目有三种方式:

            1. create-react-app 快速脚手架(简单,类似于 vue-cli 工具)

            2. webpack一步一步构建

            3. 第三方脚手架(generator-react-webpack,需要yeoman的支持)

     

    这里主要介绍利用 create-react-app 快速脚手架 创建一个react项目:

    注意:create-react-app 要求node版本至少在 8.0.0 及以上,如果您的node版本较低,请先更新: 使用 n模块 更新node

               node更新后可能会导致以前的项目跑不起来哦,如有这种情况发生,更新或者重装一下依赖 即可解决

    (1)npm install -g create-react-app    全局安装

    (2)create-react-app 项目名称       新建并对react项目进行命名(注:项目名称不能有大写)==>> 请先进入到项目要存放的位置

    (3)cd 项目名称                              通过命令进入文件夹内部,准备运行项目

    (4)npm start                                       运行项目

    为了提高速度,最好使用 cnpm 或者 yarn 哦!

     

    创建成功后如下图所示:

     

    运行 npm start 命令,启动开发服务器后,在地址栏中输入  http://localhost:3000/ 就能看到我们的项目了。(项目会自动打开,默认端口是3000,并自带热更新),命令运行成功效果如下:

    项目打开后的效果:

     

    其他构建项目的方式请参考:https://www.cnblogs.com/cina33blogs/p/9115294.html

     

    注意:

    create-react-app 快速脚手架搭建的项目,其默认配置文件都是隐藏的,如果要自定义,运行npm run eject。

    单向操作不可逆,npm run eject命令暴露项目的配置,可以自由配置项目所需的依赖,不使用的版本零配置即可开发。

    create-react-app刚生产项目后的package.json和目录结构如下:

    运行npm run eject命令后的package.json和目录结构如下:

     

     

    参考文章:https://www.jianshu.com/p/c6040430b18d

     

    注意:运行npm run eject命令可能会报如下错误:

    报错原因:

    create-react-app 脚手架添加.gitgnore文件,但是却没有本地仓库。

    解决办法:

    cd  project
    git init  // 当前目录新建代码库
    git add .  // 添加当前目录所有文件到暂存区
    git commit -m 'Saving before ejecting'  // 提交暂存区到仓库区
    npm run eject

    注意:在webstorm里面运行以上的命令可能不成功,可以在cmd命令行中运行

     

    参考文章:https://www.cnblogs.com/feng3037/p/10179959.html

     

    文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

    对博客文章的参考,若原文章博主介意,请联系删除!请原谅

     

     

    展开全文
  • 基于官方React 安装做一个简单的总结 1 npm install -g create-react-app // 构建 React 开发环境 2 create-react-app 项目名 // 新建项目 3 cd 项目名 // 进入项目 ,为启动项目做铺垫 4 npm start // ...

    基于文档React 安装和antd在create-react-app中使用做一个简单的总结

    创建项目

    1 npm install -g create-react-app // 安装create-react-app脚手架
    2 create-react-app 项目名 // 创建项目

    create-react-app 项目名 --scripts-version=react-scripts-ts 可创建文件后缀名为tsx的项目
    由于我是新手 所以我选择最原始的方式创建项目 即 create-react-app 项目名

    3 cd 项目名 // 进入项目 ,为启动项目做铺垫
    4 npm start // 启动项目

    安装Ant-Design

    npm i antd -S

    应用

    • 以引用一个按钮为例

    这是一个新建的文件 test.js

    import React from "react";
    import { Button } from "antd";			//  从antd引入button
    
    function Test() {
      return (
        <div>
          <span>这是测试按钮</span>
          <Button type="primary">Primary</Button>			// 这是一个button按钮
        </div>
      );
    }
    
    export default Test;
    

    在index.js中

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import 'antd/dist/antd.css';			// 引入样式
    import Test from './test';			// 引入test文件
    import * as serviceWorker from './serviceWorker';
    // 运行test文件
    ReactDOM.render(<Test />, document.getElementById('root'));
    
    serviceWorker.unregister();
    

    最后 npm start,界面运行成功!!
    在这里插入图片描述

    展开全文
  • Facebook 官方推出Create-React-App...React一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagr...
  • 如何新建react项目

    2018-10-11 16:20:48
    1、电脑安装node.js(安装完之后可以使用npm命令) ... 2、全局安装react脚手架 ...3、脚手架安装完成之后就可以创建react项目 cd进入要进行存放的文件夹例如 D:/project 在此此文件夹下执行命令crea...
  • 首先推荐安装 5.2.0版本以上的npm,没有的也可以先去更新一下npm,然后输入git bash输入代码npx create-react-app my-app效果如上,接下来等一会儿安装完成后:cd my-app npm start就能启动你的项目了...
  • 由于create-react-app命令预先安装和配置了webpack和babel,同时也初始化了npm(可以通过npm init来初始化,初始化完会有一个package.json文件,专门来说明你的项目的一些基本信息和可以设置npm自定义命令),所以有...
  • React—webstorm新建react项目 1、在webstorm中选择一个文件夹,输入指令: sudo npx create-react-app 文件名 例如:sudo npx create-react-app aa(windows应该不需要加上sudo) // 下载速度很慢。。。 完成之后是...
  • 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件. 安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理...
  • RN项目的开发使用WebStorm开发工具,点击此处去下载 ... 2.1 Location:项目的保存位置和项目名称,本实例的项目名称为RNDemo  2.2 Node Interpreter:node解释器,输入Node安装目录中的Node.ext  2
  • 1、npm init my-app 2、npm start该项目就发布了 初始化: 1、在index.js文档中删除import app的语句 2、删除app的js和css
  • 今天新建一个react native项目,结果运行报错,错误如下 ![图片说明](https://img-ask.csdn.net/upload/201903/21/1553160751_57188.png) 新建项目,,,除了配置其他都没改过
  • 、安装 1.安装node.js 官网地址https://nodejs.org/en/进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本。(如果已经安装了node.js跳过此步)如下图 : 点击即可下载。 检测node.js是否安装...
  • 1、创建一个项目文件夹 2、进入react文件夹,再点击上面的目录 输入cmd,回车进入cmd 3、输入npx create-react-app my-app,开始创建项目,如果npm是5.2版本以下,使用该命令 npm install -g create-react-app...
  • 创建第一个React项目

    2018-09-16 15:08:10
    .环境准备:  1.下载安装VSCode,Node.js,Yarn  网址如下:1.VSCode:https://code.visualstudio.com/  2.Node.js:https://nodejs.org/en/  3.yarn:https://yarnpkg....
  • 一、核心步骤 1. 使用 npm install create-react-app 命令...1. 新建一个文件夹 react; 2. 按住shift,右键选择“在此处打开 PowerShell 窗口”(也可以通过 win+R 命令一层层进入到该目录下,或者直接用编辑器打...
  • (1)由于npm库最先是Node.js项目使⽤的包管理⼯工具,后来流行成为所有的前端JavaScript库的 包管理理工具。所以下载安装npm,直接进入到Node.js官网上下载安装。 在这里插入代码片https://nodejs.org/en/ 操作:下载...
1 2 3 4 5 ... 20
收藏数 13,078
精华内容 5,231