Create React App 教程

姜海恩Gaiety

于 2024-08-31 08:10:59 发布

阅读量818

点赞数 13

本文链接：https://blog.csdn.net/gitblog_00747/article/details/141737522

版权

Create React App 教程

awesome-create-react-appAwesome list of Create React App articles / tutorials / videos and FAQ项目地址:https://gitcode.com/gh_mirrors/aw/awesome-create-react-app

1、项目介绍

awesome-create-react-app 是一个收集关于 Create React App 的文章、教程、视频和常见问题的精选列表。Create React App 是一个用于学习和构建单页 React 应用程序的官方支持的方式。它提供了一个零配置的开发环境，使开发者能够快速开始构建 React 应用。

2、项目快速启动

安装 Create React App

首先，你需要安装 Create React App 工具链。你可以使用 npm 或 yarn 进行安装：

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

或者使用 yarn：

yarn create react-app my-app
cd my-app
yarn start

项目结构

安装完成后，你的项目结构应该如下：

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

运行项目

在项目根目录下运行以下命令启动开发服务器：

npm start

或者使用 yarn：

yarn start

这将启动开发服务器并在浏览器中打开你的应用。

3、应用案例和最佳实践

使用 React Router

在 Create React App 中使用 React Router 进行路由管理：

npm install react-router-dom

然后在 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';

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

export default App;

使用 Redux

在 Create React App 中使用 Redux 进行状态管理：

npm install redux react-redux

然后在 src/index.js 中配置 Redux：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);