zoukankan      html  css  js  c++  java
  • 使用create-react-app脚手架搭建React开发环境

    1、React简介

    React起源于Facebook的内部项目,因为该公司对市场上所有JavaScript MVC框架都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,于是就在2013年5月开源了。

    2、脚手架环境搭建

    第一步:安装node.js

    node.js下载网址: https://nodejs.org/zh-cn/download/

    第二步:安装React脚手架

    cnpm install -g create-react-app
    

    更换国内镜像

    npm config set registry https://registry.npm.taobao.org
    -- 配置后可通过下面方式来验证是否成功
    npm config get registry
    -- 如果显示出上述地址的话就是更换成功
    

    第三步:创建项目

    create-react-app todolist
    

    进入项目目录 cd todolist

    第四步:启动项目

    npm start
    

    3、项目目录说明

    node_modules ===> npm 下载的相关依赖
    package.json ===> node包文件 包括项目的一些介绍 以及 相关文件版本

    public文件夹:

    ​    index.html ===> 项目的首页

    ​    favico.ico ===> 项目图标

    ​    mainfest.json ===> 定义网页快捷方式

    src 文件夹:

    ​    index.js ===> 整个项目的入口文件
    ​    registerServiceWorker.js ===> 离线缓存

    代码工程精简

    src 目录下仅保存 App.jsindex.js 文件

    index.js 是入口文件,精简代码如下:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    App.js 文件精简代码如下:

    import React from 'react';
    
    function App() {
      return (
        <div>
          hello React...
        </div>
      );
    }
    
    export default App;
    
  • 相关阅读:
    Linux 共享库
    使用Visual Studio(VS)开发Qt程序代码提示功能的实现(转)
    ZOJ 3469 Food Delivery(区间DP)
    POJ 2955 Brackets (区间DP)
    HDU 3555 Bomb(数位DP)
    HDU 2089 不要62(数位DP)
    UESTC 1307 windy数(数位DP)
    HDU 4352 XHXJ's LIS(数位DP)
    POJ 3252 Round Numbers(数位DP)
    HDU 2476 String painter (区间DP)
  • 原文地址:https://www.cnblogs.com/jpwz/p/12411387.html
Copyright © 2011-2022 走看看