• 现在比较流行和常用的方式就是利用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)就可以了。多操作几次就会越来越熟练。

    展开全文
  • 基于官方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...

    Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。

    React 教程

    React 是一个用于构建用户界面的 JAVASCRIPT 库。

    React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

    React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

    React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。


    React 特点

    • 1.声明式设计 −React采用声明范式,可以轻松描述应用。

    • 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

    • 3.灵活 −React可以与已知的库或框架很好地配合。

    • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

    • 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

    • 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

    由于create-react-app命令预先安装和配置了webpack和babel,同时也初始化了npm(可以通过npm init来初始化,初始化完会有一个package.json文件,专门来说明你的项目的一些基本信息和可以设置npm自定义命令),所以有几个自定义npm命令:

    一、如何安装
    1、首先确保已经安装 node.js,可以到node.js官网 https://nodejs.org/en/ 下载安装包,下载好后傻瓜式一步安装到位。
    2、按照如下步骤进行安装,推荐使用gitBush命令行工具

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

    (2)create-react-app reactproject       新建并对react项目进行命名(注:项目名称不能有大写)

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

    (4)npm start                                     运行项目

    3、通过以上命令就可以快速构建一个react项目,此时在地址栏中输入  http://localhost:3000/ 就能看到我们的项目了

    此时看到的项目结构如下

    4、可以看到项目中,没有webpack的相关配置,因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置,可以使用命令 npm run eject把webpack文件暴露出来,这个操作是不可逆的。

    此时我们的项目中就会有webpack的相关配置了

    --------------------- 项目启动效果图

    ------------------------------推荐案例

    react-douban 仿豆瓣电影app项目

    A React.js project 一个基于React.js仿豆瓣电影项目,使用react-router、webpack、redux等技术, 数据来源 https://api.douban.com/ 包含左右滑动,上拉加载更多等功能

    https://github.com/chenshaomei/react-douban

    使用NodeJs+MongoDB+React+ES6+jQuey+Webpack搭建的豆瓣电影音乐网站

    https://github.com/Loogeek/douban-React

    基于 React 的 超高仿 SPA 版豆瓣电影

    https://github.com/fi3ework/react-douban-movie

    更多前端学习资料,请关注【H5开发社区公众号】

    展开全文
  • 首先推荐安装 5.2.0版本以上的npm,没有的也可以先去更新一下npm,然后输入git bash输入代码npx create-react-app my-app效果如上,接下来等一会儿安装完成后:cd my-app npm start就能启动你的项目了...

    首先推荐安装 5.2.0版本以上的npm,没有的也可以先去更新一下npm,然后打开git bash输入代码

    npx create-react-app my-app

    效果如上,接下来等一会儿安装完成后输入如下:

    cd my-app
    npm 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项目

    2018-10-11 16:20:48
    1、电脑安装node.js(安装完之后可以使用npm命令) ... 2、全局安装react脚手架 ...3、脚手架安装完成之后就可以创建react项目 cd进入要进行存放的文件夹例如 D:/project 在此此文件夹下执行命令crea...
  • 从零开始构建react项目
  • 由于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项目有三种方式: 1.create-react-app 快速脚手架(简单,类似于 vue-cli 工具) 2.webpack一步一步构建 3. 第三方脚手架(generator-react-webpack,需要yeoman的支持) 这里主要介绍利用...
  • 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件. 安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理...
  • 从零搭建一个react-hooks项目(一) 最近有打算仿vue-admin项目构造一个react项目,不引用官方脚手架,从webpack开始配置一套基于react,redux,typescript的项目,并实时记录一下项目中的一些配置情况 首先搭建...
  • 根据自己最近学习react 视频,下面谈谈如何去创建一个react项目 准备工作: ES6语法、html5、css3、JSX语法 node.js 这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。 打开react官网,可以是...
  • 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) 新建项目,,,除了配置其他都没改过
  • RN项目的开发使用WebStorm开发工具,点击此处去下载 ... 2.1 Location:项目的保存位置和项目名称,本实例的项目名称为RNDemo  2.2 Node Interpreter:node解释器,输入Node安装目录中的Node.ext  2
  • 、安装 1.安装node.js 官网地址https://nodejs.org/en/进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本。(如果已经安装了node.js跳过此步)如下图 : 点击即可下载。 检测node.js是否安装...
  • 一、核心步骤 1. 使用 npm install create-react-app 命令...1. 新建一个文件夹 react; 2. 按住shift,右键选择“在此处打开 PowerShell 窗口”(也可以通过 win+R 命令一层层进入到该目录下,或者直接用编辑器打...
  • 创建第一个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、创建一个项目文件夹 2、进入react文件夹,再点击上面的目录 输入cmd,回车进入cmd 3、输入npx create-react-app my-app,开始创建项目,如果npm是5.2版本以下,使用该命令 npm install -g create-react-app...
1 2 3 4 5 ... 20
收藏数 13,122
精华内容 5,248
关键字:

新建一个react 项目