精华内容
下载资源
问答
  • 1.在D盘新建一个英文名文件夹 2.打开文件夹,在框内输入cmd,在弹出的命令提示符窗口依次输入以下内容 npx create-react-app my-app cd my-app npm start

    1.在D盘新建一个英文名文件夹
    2.打开文件夹,在框内输入cmd,在弹出的命令提示符窗口依次输入以下内容在这里插入图片描述
    npx create-react-app my-app
    在这里插入图片描述
    cd my-app
    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开发社区公众号】

    展开全文
  • 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仓库中,可以定义在这里。

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

    Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的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 安装做一个简单的总结 1 npm install -g create-react-app // 构建 React 开发环境 2 create-react-app 项目名 // 新建项目 3 cd 项目名 // 进入项目 ,为启动项目做铺垫 4 npm start // ...
  • 通过WebStorm新建一个React Native项目

    千次阅读 2017-10-02 21:51:55
    RN项目的开发使用WebStorm开发...2.New Project 下有三选项说明如下:  2.1 Location:项目的保存位置和项目名称,本实例的项目名称为RNDemo  2.2 Node Interpreter:node解释器,输入Node安装目录中的Node.ext  2
  • 今天新建一个react native项目,结果运行报错,错误如下 ![图片说明](https://img-ask.csdn.net/upload/201903/21/1553160751_57188.png) 新建项目,,,除了配置其他都没改过
  • 1.前言前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打包运行一些列...
  • 搭建一个react项目

    2019-10-02 12:48:09
    搭建react整体框架 ...2、npm create react-app 项目名称 如 npm create react-app huihuidemo / yarn create react-app huihuidemo 3、cd 项目名称 如 cd huihuidemo 4、npm run start 5、安装antd cn...
  • React—webstorm新建react项目 1、在webstorm中选择一个文件夹,输入指令: sudo npx create-react-app 文件名 例如:sudo npx create-react-app aa(windows应该不需要加上sudo) // 下载速度很慢。。。 完成之后是...
  • webpack搭建react项目前言:现在比较火的前端框架有react和vue。对应的框架都有相应的脚手架可以快速搭建项目。这些脚手架使用的一个重要打包模块就是webpack。虽然脚手架使用方便,但是脚手架也有其弊端,比如就是...
  • 首先,搭建一个react项目,需要搭建开发环境。 1.安装node.js,并配置环境变量。 参考Node.js安装及环境配置之Windows篇 2.新建一个项目 我是在D盘中新建项目的,所以打开d盘,按住shift跟ctrl,鼠标右击,选择 ...
  • 搭建第一个React项目

    2021-01-22 21:06:13
    1.创建项目之后,把 src目录删掉,然后自己新建一个src目录,在src的根目录里面创建index.js和App.js。 2.在src 目录里面新建一个 view文件夹用来存放页面,router文件夹用来配置路由。 3.在router文件夹中新建一...
  • 一、如何使用 git 在 GitHub 上创建一个项目新建一个项目首先,在github上注册自己的账号,然后登录后,可以看到如下界面,是你的主页。点击右边的➕号,选择第一个选项填写项目信息此时我们正在创建一个项目。转跳...
  • 首先推荐安装 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/ 选择适合的版本后下载下来(...
  • 从0搭建一个react项目

    2020-07-05 23:01:43
    删除src文件下的文件,保留index.js并新建一个APP.js App.js import React from 'react' class App extends React.Component{ render () { return <h1>Hello, React!</h1> } } export default App...
  • 1、新建目录——&gt;在dos窗口进入到目录路径下,输入npm ...完成后1-1目录下会生成一个package.json的配置文件,里面即是包的初始化信息 安装必要的组件react-dom 和babelify npm install --save react react-...
  • 一、核心步骤 1. 使用 npm install create-react-app 命令...1. 新建一个文件夹 react; 2. 按住shift,右键选择“在此处打开 PowerShell 窗口”(也可以通过 win+R 命令一层层进入到该目录下,或者直接用编辑器打...
  • 、初始化项目 新建文件夹,文件名firstreact 文件夹名称不要用react,node这类关键字,后面使用插件时会发生错误。 init项目环境,项目信息可默认或自行修改 mkdir firstreact cd firstreact npm init 二、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 763
精华内容 305
关键字:

新建一个react项目