首页手记 Create-React-App项目实战：新手入门教程

Create-React-App项目实战：新手入门教程

标签：

React

概述

本文详细介绍了如何使用Create-React-App项目实战，从创建项目到基础组件开发，再到样式和资源引用、路由配置以及项目打包和部署的全过程。通过本文，读者可以快速掌握使用Create-React-App进行React应用开发的各项技能。

Create-React-App简介

什么是Create-React-App

Create-React-App是一个由Facebook团队提供的脚手架工具，用于快速搭建React应用。它自动处理构建配置，使得开发者可以专注于编写应用逻辑，而无需处理复杂的构建配置。Create-React-App内置了现代Web开发所需的技术栈，如Webpack、Babel等，同时也提供了热重载、代码分割等特性，使得开发过程更加高效。

Create-React-App的优势

零配置：无需手动配置复杂的构建工具，如Webpack和Babel。
快速启动：可以通过一条命令快速创建和启动一个新的React项目。
热重载：在开发过程中，修改代码后浏览器会自动刷新，无需手动刷新页面。
集成测试：内置了Jest测试框架，使得测试变得简单直接。
支持ES6+语法：使用最新版本的JavaScript，无需额外配置。
环境隔离：支持不同环境的构建配置，如生产环境和开发环境。
插件机制：可以通过插件扩展功能，如添加TypeScript支持。
优化性能：自动处理代码分割、缓存等优化，提升应用性能。

如何安装Create-React-App

安装Create-React-App需要Node.js环境，确保已经安装了Node.js。安装步骤如下：

全局安装create-react-app命令：
```
npm install -g create-react-app
```
或者使用npx命令（适用于Node.js版本>=12.13.0）：
```
npx create-react-app my-app
```
进入项目目录：
```
cd my-app
```
启动开发服务器：
```
npm start
```

在命令行输入以上命令后，Create-React-App会生成一个基本的React项目，并启动一个本地开发服务器。浏览器会自动打开http://localhost:3000/，显示默认的欢迎页面。

创建第一个项目

使用Create-React-App快速搭建项目

使用Create-React-App创建一个新的React项目，可以快速启动一个基本的开发环境。以下是创建项目的详细步骤：

安装create-react-app：
```
npx create-react-app my-first-app
```
进入项目目录：
```
cd my-first-app
```
启动开发服务器：
```
npm start
```

开发服务器启动后，浏览器会自动打开http://localhost:3000/，显示默认的React应用界面。

项目目录结构解析

Create-React-App生成的项目目录结构如下：

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

.gitignore：Git的忽略文件，指定哪些文件不提交到版本控制系统。
README.md：项目的读取文件，通常包含项目的描述、安装和使用说明。
package.json：项目配置文件，包含依赖包、脚本和其他项目元数据。
public/：静态资源目录，包括favicon.ico、index.html和manifest.json等。
src/：源代码目录，包括React组件、样式文件、入口文件等。
yarn.lock：依赖包锁定文件，用于确保依赖包的版本一致性。

启动开发服务器

启动开发服务器可以使用以下命令：

npm start

运行上述命令后，Create-React-App会启动一个本地开发服务器，默认监听端口3000。浏览器会自动打开http://localhost:3000/，显示默认的React应用。开发过程中，代码的修改会自动同步到浏览器，无需手动刷新页面。

基础组件开发

创建和使用React组件

在React中，组件是构成应用的基本单元。组件可以被看作是可重用的、独立的功能块。下面是如何创建和使用一个简单的React组件：

创建一个新的组件文件MyComponent.js：

// src/MyComponent.js
import React from 'react';

function MyComponent() {
 return <h1>Hello, MyComponent!</h1>;
}

export default MyComponent;

在App.js中引入并使用该组件：

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

function App() {
 return (
   <div className="App">
     <MyComponent />
   </div>
 );
}

export default App;

通过上述代码，我们创建了一个名为MyComponent的React组件，并在App组件中引入并使用了它。

组件的props属性传递

在React中，可以通过属性（props）向组件传递数据。下面是如何传递和使用属性：

修改MyComponent组件，使其可以通过属性接收并显示数据：

// src/MyComponent.js
import React from 'react';

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

export default MyComponent;

在App.js中传递属性给MyComponent：

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

function App() {
 return (
   <div className="App">
     <MyComponent name="John Doe" />
   </div>
 );
}

export default App;

通过上述代码，我们为MyComponent组件传递了一个名为name的属性，并在组件内部使用props对象访问它。

简单状态管理

在React中，状态（state）用于存储组件的内部数据。下面是如何管理组件的状态：

创建一个带有状态的组件StatefulComponent：

// src/StatefulComponent.js
import React, { useState } from 'react';

function StatefulComponent() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

export default StatefulComponent;

在App.js中引入并使用StatefulComponent：

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

function App() {
 return (
   <div className="App">
     <StatefulComponent />
   </div>
 );
}

export default App;

通过上述代码，我们创建了一个带有状态count的组件StatefulComponent。当点击按钮时，状态会增加，并在页面上显示当前的点击次数。

样式和资源引用

引入外部CSS和JavaScript库

在React项目中，可以引入外部的CSS和JavaScript库来增强应用的样式和功能。下面是如何引入这两个资源：

安装外部库（以Bootstrap为例）：
```
npm install bootstrap
```

在index.js中引入Bootstrap样式：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';  // 引入Bootstrap样式

ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 document.getElementById('root')
);

在App.js中使用Bootstrap类名：

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

function App() {
 return (
   <div className="App">
     <h1 className="text-success">Hello, Bootstrap!</h1>
   </div>
 );
}

export default App;

通过上述代码，我们成功引入了Bootstrap库，并在页面中使用了其样式。

使用内联样式

内联样式允许在组件中直接定义样式。下面是如何使用内联样式：

// src/InlineStyleExample.js
import React from 'react';

function InlineStyleExample() {
  return (
    <div style={{ backgroundColor: 'lightblue', padding: '10px', borderRadius: '5px' }}>
      <h1 style={{ color: 'blue' }}>Inline Styles Example</h1>
    </div>
  );
}

export default InlineStyleExample;

在上述代码中，我们使用style属性为组件及其子元素定义了内联样式。

引入图片和字体

在React项目中，可以引入图片和字体资源。下面是如何引入这些资源：

将图片文件放入public目录下，例如public/example.jpg。

在组件中引入图片资源：

// src/ImageViewer.js
import React from 'react';
import exampleImage from '../public/example.jpg';  // 相对路径引用

function ImageViewer() {
 return (
   <div>
     <img src={exampleImage} alt="Example" />
   </div>
 );
}

export default ImageViewer;

引入字体文件（以Font Awesome为例）：
```
npm install font-awesome
```

在index.js中引入Font Awesome样式：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'font-awesome/css/font-awesome.min.css';  // 引入Font Awesome样式

ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 document.getElementById('root')
);

在组件中使用Font Awesome图标：

// src/FontIconExample.js
import React from 'react';

function FontIconExample() {
 return (
   <div>
     <i className="fa fa-github"></i>
     <i className="fa fa-codepen"></i>
   </div>
 );
}

export default FontIconExample;

通过上述代码，我们成功引入了图片和字体资源，并在页面中正确显示了它们。

路由配置

使用React Router进行路由配置

React Router是一个流行的路由库，用于处理单页面应用中的路由。下面是如何使用React Router进行路由配置：

安装React Router：
```
npm install react-router-dom
```

在App.js中引入并配置路由：

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

function App() {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route component={NotFound} />
     </Switch>
   </Router>
 );
}

export default App;

创建路由组件：

// src/Home.js
import React from 'react';

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

export default Home;

// src/About.js
import React from 'react';

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

export default About;

// src/NotFound.js
import React from 'react';

function NotFound() {
 return <h2>Page Not Found</h2>;
}

export default NotFound;

通过上述配置，我们成功设置了一个基本的路由系统，支持不同页面的导航和切换。

创建和导航页面

在React Router中，可以通过链接组件<Link>导航到不同的页面：

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

通过上述代码，我们在导航栏中添加了链接，用户可以通过点击链接导航到不同的页面。

路由参数和查询参数

在React Router中，可以通过URL参数和查询参数传递数据。下面是如何使用这些特性的示例：

使用URL参数：

// src/RouteParamsExample.js
import React from 'react';
import { useParams } from 'react-router-dom';

function RouteParamsExample() {
 let { id } = useParams();
 return <h1>Route Params Example: {id}</h1>;
}

export default RouteParamsExample;

在App.js中配置路由：

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

function App() {
 return (
   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
           <li>
             <Link to="/params/123">Params Example</Link>
           </li>
         </ul>
       </nav>

       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
         <Route path="/params/:id" component={RouteParamsExample} />
         <Route component={NotFound} />
       </Switch>
     </div>
   </Router>
 );
}

export default App;

通过上述代码，当用户访问/params/123时，RouteParamsExample组件会接收到id参数并显示它。

使用查询参数：

// src/QueryParamsExample.js
import React from 'react';
import { useLocation } from 'react-router-dom';

function QueryParamsExample() {
 let location = useLocation();
 let { search } = location;
 let query = new URLSearchParams(search);
 let name = query.get('name');
 return <h1>Query Params Example: {name}</h1>;
}

export default QueryParamsExample;

在App.js中配置路由：

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
import RouteParamsExample from './RouteParamsExample';
import QueryParamsExample from './QueryParamsExample';

function App() {
 return (
   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
           <li>
             <Link to="/params/123">Params Example</Link>
           </li>
           <li>
             <Link to="?name=John">Query Example</Link>
           </li>
         </ul>
       </nav>

       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
         <Route path="/params/:id" component={RouteParamsExample} />
         <Route path="/?" component={QueryParamsExample} />
         <Route component={NotFound} />
       </Switch>
     </div>
   </Router>
 );
}

export default App;

通过上述代码，当用户访问/?name=John时，QueryParamsExample组件会接收到查询参数并显示它。

项目打包与部署

如何构建和打包项目

构建和打包项目可以使用npm run build命令。这个命令会将项目构建为生产环境版本，并生成一个build目录，里面包含了所有必要的静态文件。

构建项目：
```
npm run build
```
查看生成的文件：
构建完成后，会在项目根目录生成一个build目录，里面包含了构建后的静态文件，如index.html、main.js、main.css等。

部署到GitHub Pages或其他服务器

部署到GitHub Pages：

创建GitHub仓库，并将项目代码推送到仓库。

在项目根目录创建一个.github/workflows目录，并在该目录下创建一个main.yml文件，定义GitHub Actions工作流：

# .github/workflows/main.yml
name: Build and Deploy to GitHub Pages

on:
push:
 branches:
   - master
   - main

jobs:
build-and-deploy:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout code
   uses: actions/checkout@v2

 - name: Install dependencies
   run: npm ci

 - name: Build project
   run: npm run build

 - name: Deploy to GitHub Pages
   uses: peaceiris/actions-gh-pages@v3
   with:
     token: ${{ secrets.GITHUB_TOKEN }}
     build-dir: ./build
     cname: example.com  # 可选，自定义域名
     branch: gh-pages
     commit_message: 'Deploy to GitHub Pages'

部署到其他服务器：
- 将项目构建后的文件上传到服务器。
- 配置服务器的Web服务器（如Apache或Nginx）以正确提供静态文件。
- 确保服务器的域名和端口配置正确。
- 示例配置如下（以Nginx为例）：
```
server {
listen 80;
server_name example.com;

location / {
 root /path/to/build;
 try_files $uri /index.html;
}
}
```

常见部署问题解决

404 错误：
确保服务器配置正确，并且根目录指向了build目录或其中的index.html文件。

server {
 listen 80;
 server_name example.com;

 location / {
   root /path/to/build;
   try_files $uri /index.html;
 }
}

跨域问题：
如果项目中包含API请求，确保服务器允许跨域请求。可以在服务器配置中添加跨域处理。

server {
 listen 80;
 server_name example.com;

 location / {
   root /path/to/build;
   try_files $uri /index.html;
 }

 location /api/ {
   add_header 'Access-Control-Allow-Origin' '*';
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
   if ($request_method = 'OPTIONS') {
     add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
     add_header 'Access-Control-Max-Age' 1728000;
     add_header 'Content-Type' 'text/plain charset=UTF-8';
     add_header 'Content-Length' 0;
     return 204;
   }
 }
}

缓存问题：
确保浏览器和服务器上的缓存配置正确。可以在HTTP响应头部添加缓存控制信息。

server {
 listen 80;
 server_name example.com;

 location / {
   root /path/to/build;
   try_files $uri /index.html;
   add_header Cache-Control "public, max-age=31536000";
 }
}

通过上述步骤，可以解决常见的部署问题，确保项目能够正确运行。

以上是Create-React-App项目的实战教程，涵盖了从项目创建、组件开发、样式和资源引用、路由配置到项目打包与部署的各个方面。希望这些内容能帮助新手快速入门React开发。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕容森

手记
篇

粉丝

183

获赞与收藏

649

关注作者，订阅最新文章

相关文章推荐

官方 React 快速上手脚手架 create-react-app

快速安装create-react-app脚手架

【备战春招】第1天 React零基础入门到实战，完成企业级项目简书网站开发——React初探篇

React 入门实例教程

react-native 练手实战项目高仿知乎日报APP

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空