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

首先，安装更新npm和nodejs版本 : 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

> [email protected] 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项目可能需要等候好几分钟已经生成了，启动和运行后的结果如下图所示:

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

4.后续的编辑打包

//编译打包
npm run build //webpack编译打包项目

因为脚手架封装了webpack并默认未开放出来配置文件，需要生成webpack的相关配置文件

//生成webpack的配置文件
npm run eject

运行上述后，生成webpack配置文件，和vue或者ng有些不同。

通常需要修改的webpack配置就是配置代理了。

通过配置代理将本地的请求代理到远端服务器，方便开发。

react与vue的webpack配置稍有不同，代理配置需要在package.json中配置。

至此，一个初步的react项目才算搭建完成。

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

乐意黎

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

猜你喜欢