首页手记 Create-React-App课程：初学者全面指南

Create-React-App课程：初学者全面指南

标签：

React.JS

概述

Create-React-App课程介绍了如何快速创建和管理React应用，涵盖从安装到部署的全过程。文章详细说明了Create-React-App的优点、安装步骤、项目结构以及组件和状态管理的基本概念。此外，还介绍了如何利用该工具进行路由配置和资源加载优化，并提供了多种托管服务的部署指南。

Create-React-App简介

什么是Create-React-App

Create-React-App是由Facebook维护的一个工具，用于帮助开发者快速创建React应用。它提供了一个开箱即用的开发环境，内置了常用的开发工具和最佳实践，使得初学者和有经验的开发者都能轻松上手。

Create-React-App的优点

开箱即用：无需配置复杂的工具链，节省了配置时间。
快速启动：使用命令行工具可以快速生成项目文件和结构。
自动配置：内置了开发服务器、热重载、代码分割和代码压缩等特性。
社区支持：由于是官方维护，因此有广泛的社区支持和文档。
灵活性：项目结构简单且可扩展，可以轻松集成其他库和工具。

如何安装和使用Create-React-App

要安装Create-React-App，首先需要确保已安装Node.js和npm。以下是在命令行中安装并创建新项目的步骤：

安装Node.js和npm

# 检查是否已安装Node.js
node -v

# 检查是否已安装npm
npm -v

如果没有安装，可以从Node.js官方网站下载最新版本的Node.js，安装过程会自动安装npm。

安装Create-React-App CLI

npm install -g create-react-app

创建新项目

npx create-react-app my-app
cd my-app
npm start

注意：npx是npm 5.2.0及以上版本自带的命令，用于临时运行全局安装的命令。如果使用的是较旧版本的npm，可以替换为npm install -g create-react-app后再运行create-react-app。

安装Create-React-App CLI代码示例

npm install -g create-react-app

创建新项目代码示例

npx create-react-app my-app
cd my-app
npm start

创建第一个项目

使用Create-React-App创建新项目

通过Create-React-App创建的应用默认包括了开发所必需的配置和文件。以下是如何创建一个新项目并运行它的步骤。

安装Create-React-App

npx create-react-app my-app

cd my-app

启动开发服务器

npm start

开发服务器启动后，可以在浏览器中访问http://localhost:3000来查看应用。

创建新项目代码示例

npx create-react-app my-app
cd my-app
npm start

项目文件结构介绍

创建项目后，文件夹结构如下：

my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── App.js
  │   ├── App.css
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   └── logo.svg
  ├── .gitignore
  ├── package.json
  └── README.md

node_modules：存放项目依赖的文件夹。
public：存放静态资源文件夹。
src：存放源代码文件夹。
- index.html：根HTML文件，包含应用的唯一标记。
- App.js：应用的主组件文件。
- App.css：应用的主样式文件。
- index.js：应用的入口文件。
package.json：存放项目元数据和依赖信息。
README.md：项目信息和说明。

项目文件结构代码示例

my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── App.js
  │   ├── App.css
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   └── logo.svg
  ├── .gitignore
  ├── package.json
  └── README.md

运行和调试应用

启动开发服务器后，npm start会在开发服务器启动后自动打开浏览器。为了调试应用，建议使用浏览器的开发者工具。

使用浏览器开发者工具

在浏览器中打开应用后，可以使用开发者工具进行调试。开发者工具提供了查看源代码、检查DOM元素、查看网络请求等功能。

热重载

当源文件发生变化时，开发服务器会自动重新加载应用，无需手动重启服务。

组件与状态管理

创建React组件

在React中，组件是可复用的代码块。组件分为两种类型：函数组件和类组件。

函数组件

// App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

类组件

// App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default App;

理解状态和属性

状态（State）：组件内部的数据，由组件自身控制，可以随着应用逻辑改变。
属性（Props）：组件从外部传入的数据，用来定制组件的行为和数据。

状态示例

// App.js
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="App">
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default App;

属性示例

// Greeting.js
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;

// App.js
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="World" />
    </div>
  );
}

export default App;

状态管理的基本概念

React组件的状态可以被分为局部状态和全局状态。局部状态由组件自身管理，而全局状态通常使用外部状态管理库来管理。

局部状态管理

// Counter.js
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  decrement = () => {
    this.setState((prevState) => ({
      count: prevState.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.decrement}>-</button>
        <span>{this.state.count}</span>
        <button onClick={this.increment}>+</button>
      </div>
    );
  }
}

export default Counter;

全局状态管理

全局状态管理通常使用Redux或其他状态管理库来实现。以下是一个简单的Redux示例：

安装Redux

npm install redux react-redux

创建Redux Store

// store.js
import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(rootReducer);

export default store;

使用Redux Store

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

样式和资源加载

如何在项目中使用CSS

在Create-React-App项目中，可以使用内联样式、CSS文件或CSS模块来管理样式。

内联样式

// App.js
import React from 'react';

function App() {
  return (
    <div style={{ color: 'red' }}>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

使用CSS文件

// App.css
.App {
  color: blue;
}

// App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

使用CSS模块

// App.module.css
.App {
  color: green;
}

// App.js
import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

引入第三方库和资源

引入第三方库和资源可以通过npm或yarn来安装，然后在项目中使用。

安装第三方库

npm install react-router-dom

使用第三方库

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/users" component={Users} />
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

优化资源加载

为了优化资源加载，可以使用代码分割和懒加载等技术。

代码分割

// App.js
import React from 'react';
import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Users = lazy(() => import('./Users'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

路由与导航

使用React Router进行路由配置

React Router是一个用于React应用的路由库，可以轻松实现单页面应用的路由配置。

安装React Router

npm install react-router-dom

配置路由

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

创建多页面应用

使用React Router可以轻松创建多页面应用，每个页面对应一个路由。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

路由参数和导航链接

路由参数可以通过match对象获取。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users/1">User 1</Link>
          </li>
          <li>
            <Link to="/users/2">User 2</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={User} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function User(props) {
  const { match } = props;
  const id = match.params.id;

  return <h2>User {id}</h2>;
}

export default App;

部署与发布

部署到GitHub Pages

要将应用部署到GitHub Pages，需要先在GitHub上创建一个仓库，并将应用代码推送到该仓库。

创建GitHub仓库
安装GitHub Pages插件

npm install gh-pages --save-dev

修改package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://username.github.io/repository",
  "dependencies": {
    ...
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

构建应用

npm run build

发布到GitHub Pages

npm run deploy

部署到Netlify和Vercel

要将应用部署到Netlify或Vercel，可以使用它们的Web界面或命令行工具进行部署。

创建Netlify账户
连接GitHub仓库
构建应用

npm run build

发布到Netlify

使用Netlify界面选择构建命令和部署目录。

发布应用到生产环境

在将应用发布到生产环境之前，需要确保代码已经通过测试，并且构建版本是稳定的。

构建应用

npm run build

确保代码通过测试

使用npm test或编写自动化测试脚本来确保代码的正确性。

部署到生产环境

根据目标平台的部署指南进行部署。

通过以上步骤，可以将React应用成功部署到GitHub Pages、Netlify或Vercel等托管服务，确保应用在生产环境中稳定运行。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

郎朗坤

手记
篇

粉丝

49

获赞与收藏

213

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18600 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Create-React-App课程：初学者全面指南

什么是Create-React-App

Create-React-App的优点

如何安装和使用Create-React-App

安装Create-React-App CLI代码示例

创建新项目代码示例

使用Create-React-App创建新项目

创建新项目代码示例

项目文件结构介绍

项目文件结构代码示例

运行和调试应用

创建React组件

函数组件

类组件

理解状态和属性

状态示例

属性示例

状态管理的基本概念

局部状态管理

全局状态管理

如何在项目中使用CSS

内联样式

使用CSS文件

使用CSS模块

引入第三方库和资源

优化资源加载

代码分割

使用React Router进行路由配置

创建多页面应用

路由参数和导航链接

部署到GitHub Pages

部署到Netlify和Vercel

发布应用到生产环境

阅读免费教程