Create React App 教程

32 0 0

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')


);

4、典型生态项目

React Router

React Router 是一个用于 React 的路由库，它允许你通过 URL 来管理应用的状态。

Redux

Redux 是一个用于 JavaScript 应用的状态管理库，它可以帮助你管理应用的全局状态。

Material-UI

Material-UI 是一个实现了 Google 的 Material Design 的 React 组件库，它提供了丰富的 UI 组件。

Next.js

Next.js 是一个用于生产环境的 React 框架，它提供了服务器渲染、静态站点生成等功能。

Gatsby

Gatsby 是一个基于 React 的静态站点生成器，它可以帮助你构建快速、现代的网站。

通过这些生态项目，你可以扩展和增强你的 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

# 随笔