[乐意黎原创] React学习--安装React，并创建工程目录

小咪咪 2022-02-17 03:09 248阅读 0赞

首先，安装更新npm和nodejs版本 : [https://blog.csdn.net/aerchi/article/details/89383901][https_blog.csdn.net_aerchi_article_details_89383901]  
  
脚手架, 就是提供一个约定好的工具(框架). 按照约定来写自己的业务代码, 通过脚手架把约定的代码编译成真正能够执行的业务代码.

使用脚手架 react的脚手架其实非常多, 其中官方推荐的脚手架有下面这些:

Create React App - An officially supported way to start a client-side React project with no configuration  
Next.js - Framework for server-rendered or statically-exported React apps  
Gatsby - Blazing-fast static site generator for React  
nwb - A toolkit for React apps, libraries and other npm modules for the web  
razzle - Create server-rendered universal JavaScript applications with no configuration  
Neutrino - Create and build modern JavaScript applications with zero initial configuration

我们选用create-react-app这个官方最为推荐的脚手架, 因为用这个相对来说更容易入门, 并且遇到问题都有解决方案.  
  
1. 安装react 并创建工程目录: E:/phpcms/React/demo-app

//安装 React app
    npm install -g create-react-app
    
    //demo-app: 表示在当前路径
    create-react-app E:/phpcms/React/demo-app
    
    
    Success! Created demo-app at E:\phpcms\react\demo-app
    Inside that directory, you can run several commands:
    
      npm start
        Starts the development server.
    
      npm run build
        Bundles the app into static files for production.
    
      npm test
        Starts the test runner.
    
      npm run eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can’t go back!
    
    We suggest that you begin by typing:
    
      cd E:\phpcms\react\demo-app
      npm start
    
    Happy hacking!

2. 启动

//进入E盘
    C:\Users\aerchi>e:
    //进入工程目录
    E:>cd e:\phpcms\react\demo-app
    //启动服务
    e:\PHPCMS\react\demo-app>npm start
    
    > demo-app@0.1.0 start e:\PHPCMS\react\demo-app
    > react-scripts start
    
    Compiled successfully!
    
    You can now view demo-app in the browser.
    
      Local:            http://localhost:3000/
      On Your Network:  http://192.168.128.0.9:3000/
    
    Note that the development build is not optimized.
    To create a production build, use npm run build.

react项目可能需要等候好几分钟已经生成了，启动和运行后的结果如下图所示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

3.  运行后，浏览器的显示.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1][]

4.后续的编辑打包

//编译打包
    npm run build //webpack编译打包项目
    
    因为脚手架封装了webpack并默认未开放出来配置文件，需要生成webpack的相关配置文件
    
    //生成webpack的配置文件
    npm run eject
    
    运行上述后，生成webpack配置文件，和vue或者ng有些不同。
    
    通常需要修改的webpack配置就是配置代理了。
    
    通过配置代理将本地的请求代理到远端服务器，方便开发。
    
    react与vue的webpack配置稍有不同，代理配置需要在package.json中配置。
    
    至此，一个初步的react项目才算搭建完成。

--------------------

5. 打开工作目录，如下图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2][]

--------------------

乐意黎

[https_blog.csdn.net_aerchi_article_details_89383901]: https://blog.csdn.net/aerchi/article/details/89383901
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220217/f09b30e5cb15493599277b8d0b688767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20220217/8b34735077334d5292b143ed044e5a54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: /images/20220217/b883ec25f5bd415a9a84e15ac3237151.png