汪海
react教程(零)安装
来源:张玉     发布时间: 2019-08-20      浏览次数:322

字号:

安装

在最初的阶段,可以使用在线编辑的网站来学习React基本的语法。从 Hello World 开始,可以在Codepen,或者codesandbox上进行编写。当然,也可以使用npm或者yarn来安装依赖,本地进行开发。这里先讲解通过create-react-app来创建一个React项目,后面会详细讲解如何用webpack创建一个react项目。

create-react-app

详细文档可以去github查看https://github.com/facebook/create-react-app。

Node和Npm

首先安装Node.js,这个直接在Node官网下载安装包即可。建议下载长期支持版,bug会较少。安装完毕后,在终端或者cmd里输入

npm -v

如果要使用npx,确保npm的版本大于5.2。如果npm版本较低,使用

npm i -g npm

更新npm到最新版,就可以使用npx了。有关npx的详细信息,可以查看这篇文章。如果使用yarn,也可以自行去yarn官网下载安装。

create-react-app

官方介绍了3种创建一个react-app的方法。1.npx

npx create-react-app my-app

2.npm init xxx your-app

npm init react-app my-app

npm init相当于一次npx的命令封装,具体解释可以看一下这篇npm文档-init|npm。需要注意的是,这个方法需要更高版本的npm,6+。3.yarn

yarn create react-app my-app

我个人比较建议使用yarn来管理npm依赖,速度更快,上手也很简单。此处yarn的版本要求0.25+。

cd my-app

等到依赖安装完毕,进入到新创建的my-app目录里。

├── node_modules├── 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│   └── registerServiceWorker.js└── yarn.lock

create-react-app只安装了最少能运行一个react-app的依赖,例子也很简单,现在我们运行一下。

yarn start

运行成功后,就可以在http://localhost:3000看到这个例子了。

webpack

现在前端开发常用的构建工具是webpack。接下来介绍用webpack构建一个简单的react-app。

新建目录

首先新建一个目录。

mkdir webpack-react-appcd webpack-react-appnpm init -y

这时,目录里会有一个package.json。接下来,我们新建一个HTML文件,存放到dist目录,作为一个载体。

mkdir distcd disttouch index.html

它的代码如下

<!DOCTYPE html><html> <head> <title>webpack react app</title> </head> <body> <div id="app"></div> <script src="/main.js"></script> </body></html>

这里的id,默认为app,在具体编写时,可以修改。main.js也是webpack自己生成的,可以修改。

安装webpack

接下来安装webpack的一些依赖。

yarn add -D webpack webpack-dev-server webpack-cli

安装完毕以后,在package.json配置一下启动命令。

..."scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", ...},...

--mode 用来配置模式,可以区别是构建还是开发模式,如果是构建发布,就把一些开发时的提示等插件去掉。--config 指向webpack的配置文件,默认为同目录下的 webpack.config.js

配置webpack

接下来我们来创建 webpack.config.js

touch webpack.config.js

它的基本代码如下:

module.exports = { entry: "./src/index.js", //webpack的入口文件 output: { //输出目录配置 path: __dirname + "/dist", publicPath: "/", filename: "main.js" }, devServer: { //开发时服务器的配置 contentBase: "./dist" }};

根据习惯, src/index.js 是我们默认的入口。打包结束以后,生成一个 main.js 到dist目录下。配置了DevSever之后,我们可以在浏览器里访问到dist下的文件。接下来需要编写 src/index.js

console.log("webpack test");

终端运行

yarn start

打开http://localhost:8080查看控制台输出。正常输出了webpack test。接下来要引入react。

安装babel

react用到了jsx语法,需要使用babel来转义一遍,才能被浏览器正常读取。安装babel和依赖

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

新建babel配置文件

touch .babelrc

配置如下:

{ "presets": [ "react", ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ]}

具体的 babel-preset-env 配置可以查看babel文档-babel-preset-env配置。安装完毕以后,新的 webpack.config.js 配置为

module.exports = { ... module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] } ] }, resolve: { extensions: ["*", ".js", ".jsx"] }, ...};

接着就可以安装react依赖了。

yarn add -D react react-dom

index.js 重写一下。

import React from "react";import ReactDOM from "react-dom";const title = "Hello World!";ReactDOM.render(<div>{title}</div>,document.getElementById("app"));

运行一下

yarn start

ok,一个简单的react-app就创建成功了。下一篇,将会讲解react的基本概念和语法。谢谢阅读。

  • 相关内容: