精华内容
下载资源
问答
  • 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开发社区公众号】

    展开全文
  • 1、安装node.js 官网地址 2、安装npm npm安装较慢,建议更换淘宝源,或者安装...4.创建react项目 安装脚手架 cnpm install -g create-react-app 或者 npm install -g create-react-app 若此时出现create-react-app: c

    1、安装node.js 官网地址

    2、安装npm
    npm安装较慢,建议更换淘宝源,或者安装cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    3、安装yarn

    cnpm install -g yarn

    4.创建react项目

    • 安装脚手架

    cnpm install -g create-react-app 或者 npm install -g create-react-app

    若此时出现create-react-app: command not found错误
    解决报错

    • cd到项目目录下

    cd my-project

    yarn startnpm start

    之后浏览器会自动打开页面,或者手动输入http://localhost:3000 即可访问
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    react项目结构
    在这里插入图片描述
    README:项目的说明文件
    一般看一个陌生的项目先从README入手,里面会详细注明项目需要安装的依赖以及所运行的环境等

    package.json: node包文件,包括项目的一些介绍(如名字、版本号、依赖的第三方包等等)

    node_modules : 项目依赖的第三方包

    public文件夹:

    • index.html:浏览器自动打开的HTML页面
    • favico.ico:项目图标
    • mainfest.json: wepack打包优化相关

    src文件夹:所有代码

    index.js

    //导入核心模块
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // 全局样式
    import './index.css';
    
    // 入口组件(组件的首字母必须大写)
    import App from './App';
    ReactDOM.render(<App />, document.getElementById('root'));
    

    在这里插入图片描述

    App.js:react组件

    // 必须导入React模块:JSX依赖于该模块
    import React from 'react';
    // 局部样式
    import './App.css';
    
    // 组件的定义
    function App() {
    	return (
    	<div>
    		测试
    	</div>
    	);
    }
    export default App;
    
    • index.js : 整个项目的入口文件,是渲染页面的地方,并且最终渲染的,相当于Vue中的main.js。
    • registerServiceWorker.js : 离线缓存
    • App.js:总组件
    • App.css:css文件

    yarn.lock:项目依赖的安装包

    .gitignore: 使用 git管理代码的时候,有些文件不希望传到git仓库中,可以定义在这里。

    展开全文
  • 一个简单的React项目,在IDEA创建的初始React项目基础上添加了一个简单的点击计数组件
  • 首先推荐安装 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
    就能启动你的项目了
    展开全文
  • 基于官方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,界面运行成功!!
    在这里插入图片描述

    展开全文
  • 快速创建一个react项目

    千次阅读 2019-03-07 16:18:30
    创建一个react项目有三种方式: 1.create-react-app 快速脚手架(简单,类似于 vue-cli 工具) 2.webpack一步一步构建 3. 第三方脚手架(generator-react-webpack,需要yeoman的支持) 这里主要介绍利用...
  • (vue项目首选),那么如何利用其创建一个react项目? 1.在集成终端打开输入命令行,安装react的脚手架create-react-app yarn global add create-react-app 2.创建命令项目 create-react-app d
  • 我的React项目模板 这是我的React应用程序的个人项目模板,我经常将其用作进一步配置的基础。 堆栈包括: 4创建高效(快速)的捆绑包。 7将ES2015 代码到ES5。 为CSS模块增加功能和。 地快速测试您的所有代码。...
  • React—webstorm新建react项目 1、在webstorm中选择一个文件夹,输入指令: sudo npx create-react-app 文件名 例如:sudo npx create-react-app aa(windows应该不需要加上sudo) // 下载速度很慢。。。 完成之后是...
  • 如何创建一个 react 项目

    千次阅读 2020-12-17 17:54:56
    构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐)。 generator-react-webpack 脚手架搭建 react 项目。 webpack 一步一步构建 react 项目。 、create-react-app 脚手架快速...
  • 如何创建一个react项目

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

    2018-06-01 15:15:30
    1.下载node 2.安装dva 框架 npm install dva-cli -g 3.创建dva项目 dva new myapp 4.进入项目目录 cd myapp 5.启动项目 npm start
  • 创建一个项目,首先要选择合适的编辑器(我选择的是VS Code)以及配置环境。 首先需要安装node.js,直接搜索并在官网下载安装包。 node.js官网:https://nodejs.org/en/ 选择适合的版本后下载下来(...
  • React-从0到1搭建一个React项目(一)

    千次阅读 2019-06-05 15:02:33
    React-从0到1搭建一个React项目(二) Demo地址: github地址:https://github.com/miguoer/react-sample 架构介绍 项目整体架构分层如下图: 从上到下分为组件层、容器层、动作层和数据层。组件层全部都是...
  • 对于前端开发来说,掌握 webpack 必不可少,面试中也是逢面必问。本文主要介绍不使用脚手架从零搭建一个 React 项目,其核心就是如何安装配置 webpack。
  • 文章目录、安装node二、配置淘宝镜像三、配置 vscode(win10)四、全局安装脚手架五、创建项目 、安装node 请在官网下载安装:https://nodejs.org/zh-cn/ vscode 中 点击 ( ctrl + `) 调出终端 输入指令node -v...
  • 1、npm init my-app 2、npm start该项目就发布了 初始化: 1、在index.js文档中删除import app的语句 2、删除app的js和css
  • 由于create-react-app命令预先安装和配置了webpack和babel,同时也初始化了npm(可以通过npm init来初始化,初始化完会有一个package.json文件,专门来说明你的项目的一些基本信息和可以设置npm自定义命令),所以有...
  • init项目 1.创建项目文件夹并进入 mkdir react-project cd react-project 2.初始化npm 输入npm init ,按照提示填写项目基本信息: webpack 1.安装webpack(webpack4.X) npminstall--save-dev webpack ...
  • 创建项目 1、新建一个文件夹,vsc打开...4、项目根目录新建两个文件夹dist src,并在src新建index.html和一个index.js 5、终端输入cnpm i webpack -D回车;再输入cnpm i webpack -g:多一个node_modules文件夹; ...
  • react项目创建流程

    2018-12-20 21:40:52
    react 项目搭建 系统: windows 1.安装 node node 下载地址.一路 next 如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径. 查看是否安装成功,打开终端 node -v npm -v 2.安装 vscode...
  • 使用react很长时间,写搭建项目的文档,用于新项目的快速启动。 本项目使用的技术栈: create-react-app react-router ant-design react-redux 、使用create-react-app创建项目 npx create-react-app my-...
  • (1)由于npm库最先是Node.js项目使⽤的包管理⼯工具,后来流行成为所有的前端JavaScript库的 包管理理工具。所以下载安装npm,直接进入到Node.js官网上下载安装。 在这里插入代码片https://nodejs.org/en/ 操作:下载...
  • 从创建 react项目到所需要的插件,做一个基本的整合 前置 - 先全局安装react 脚手架工具包 命令: npm i -g create-react-app 1. 创建 react 项目 用脚手架创建项目 命令: create-react-app 项目名称 直接使用 ...
  • 官网https://nodejs.org/en/download/下载最新的稳定版本,下载安装完以后在cmd界面输入node -v 可以直接查看版本,安装node时会自带一个npm的包管理工具,在命令行通过 npm -v查看。 国内使用npm很慢,可以使用...
  • 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,...
  • 距离上次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。 然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在...
  • 1、新建目录——&gt;在dos窗口进入到目录路径下,输入npm ...完成后1-1目录下会生成一个package.json的配置文件,里面即是包的初始化信息 安装必要的组件react-dom 和babelify npm install --save react react-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,073
精华内容 6,829
关键字:

新建一个react项目