你的第一个React App (一 ) - 项目初始化

TalkPython

发布于 2020-09-10 15:12:08

8600

发布于 2020-09-10 15:12:08

文章被收录于专栏：TalkPython

开始使用React的最佳方式是投入其中。在这篇文章中，我将带您经历一个简单的开发过程，创建一个用于跟踪待办事项的应用程序。

准备开发环境

需要为React的开发做一些准备。在接下来的部分中，我将解释如何设置和准备创建您的第一个项目。首先我们来搭建开发环境。

安装NodeJS (版本：12.xx.xx)，从Node官网下载安装，进行安装。
安装create- react-app (npm install --global create-react-app)
安装一个编辑器（Visual Studio Code，Sublime Text）总之选一个你熟悉的。

创建React项目

我们通过命令行创建和管理项目。打开一个新的命令提示符，导航到一个存放项目的位置，运行以下命令来创建新的项目。

$ npx create-react-app todos

一切正常的情况下，将会在目录下看到todos这个项目。进入到todos目录下，添加bootstrap css框架。

$ npm install bootstrap

安装完成后，编辑src目录下的index.js文件，将我们安装的bootstrap框架引入，具体如下：

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.css'; #这个就是安装的bootstrap框架

ReactDOM.render(<App />, 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: http://bit.ly/CRA-PWA serviceWorker.unregister();

接下来，通过下方的命令，来运行项目。

$ npm start

项目运行成功后，你将看到如下内容：

Compiled successfully!

You can now view todo in the browser.

Local: http://localhost:3000/

On Your Network: http://your local ip:3000/ 
Note that the development build is not optimized. To create a production build, use npm run build.

此时，你通过浏览器访问http://localhost:3000/，即可看到React项目最初的样子。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-02，如有侵权请联系 cloudcommunity@tencent.com 删除

react