React 0基础学习路线（2）—初识Create-react-app与开发环境详述

本文链接：https://blog.csdn.net/u013946061/article/details/107016487

文章目录

重点大纲提炼
Create-react-app介绍与开发环境详述
- 介绍

重点大纲提炼

脚手架
- create-react-app
- create-react-app <要创建的app应用>
- package.json
  - npm start：启动本地应用(web)
  - npm run build：生成应用最终代码（生成的代码会被同步到正式的服务器中）

Create-react-app介绍与开发环境详述

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了，开箱即用

安装与使用

通过 npm、yarn、npx 都可以

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

推荐mac上iTerm工具增加终端的很多功能！windows下推荐Cmder，本人强烈推荐Win10应用商店的Terminal。

项目目录结构说明

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

my-app/
  README.md （markdown说明文件）
  node_modules/   （安装的基础库、依赖库）
  package.json
  public/
    index.html  （整个应用的入口页面）
    favicon.ico
  src/  <重点>（开发目录：开发代码放在这里）
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

\test\public\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

package.json 提供了一系列编译命令（npm xxx 如：npm start）

start启动本地开发环境，会在本地临时启动一个服务器

build项目开发完成以后，项目上线到服务器端（不可能把源代码扔进去），通过babel webpack 打包好的代码，最终扔给服务器。

test测试应用

npm start

启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

这种情况下是开发模式，即本地开发的环境，开发完成之后需要项目上线。src目录下的代码是需要交给服务器的，而服务器运行的环境并不一定是本地的dev-server（基于node的服务器），而线上跑的可能是Nginx，或者Apache等一些其他的服务器软件。而通过打包命令，即build，把它打包成浏览器能运行的，可以直接跑的，即丢在任何地方都可以运行。

npm test

运行 Jest 测试

npm run build

打包应用（准备上线）

发现这里多引入了js的一个打包后的入口文件：<script src="/static/js/2.5eb979f8.chunk.js"></script>

但在原来的index.html文件中是不存在的。而index.html只是一个临时的模板文件，打包的时候，会自动把它作为项目页面，并把打包好js自动创建script标签引入进来。

src目录（开发阶段）：

index.js 入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

这里App函数其实就是一个组件（return一个jsx结构），我们发现它导出去的是一个函数，然后在index.js中直接当标签使用的！也没有去调用函数。这是怎么做到的呢？这其实就是JSX在执行过程中，如果发现它是一个函数或者是一个类的话，它会先执行该函数或类中的render方法，把它的返回值写在标签中，这是一种标签化的使用方法，也称组件化。我们后面的代码基本都是基于组件化进行开发的。

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

（后续待补充）