欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

react教程（零）安装

程序员文章站 2022-06-27 14:31:06
react教程（零）—— 安装 react项目的基本配置，使用create-react-app和webpack构建react-app。主要介绍如何新建一个react-app，并对webpack如何创建react-app做了详细介绍。 ......

安装

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

create-react-app

详细文档可以去github查看。

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，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-app
cd webpack-react-app
npm init -y

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

mkdir dist
cd dist
touch 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

打开查看控制台输出。
正常输出了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 配置可以查看。
安装完毕以后，新的 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的基本概念和语法。
谢谢阅读。

上一篇： 网易云很多歌曲都要版权？要VIP？在Python面前没有限制这一问题

下一篇： 家族生意

推荐阅读