React环境配置和基本使用

最新推荐文章于 2024-06-23 16:27:10 发布

fareise

最新推荐文章于 2024-06-23 16:27:10 发布

阅读量1w

点赞数 3

分类专栏： javascript 前端开发常用技巧经验记录文章标签： React javascript Web前端 express npm

本文链接：https://blog.csdn.net/fareise/article/details/52422842

版权

javascript 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

前端开发常用技巧经验记录

64 篇文章 59 订阅

订阅专栏

1.准备：配置好Node环境，并且安装npm工具

2.安装依赖包

npm install babel -g
npm install webpack -g
npm install webpack-dev-server -g

上面这三个依赖包都需要安装到全局，因为需要使用它们的命令行工具。其中babel是一个可以将ES6代码转换成ES5代码，这样我们就可以在编写代码的时候使用ES6的一些新特性了。webpack工具是一个代码构建工具，webpack-dev-server是一个小型的Express服务器。

3.创建一个项目目录：reactTest。通过命令行进入reactTest目录下，执行npm init命令。该命令可以帮助我们创建一个package.json文件。

4.安装react的必要模块

在命令行执行如下语句：

npm install react --save
npm install react-dom --save

使用--save可以直接将安装的模块写入到package.json文件中的dependencies字段下，自动添加依赖。

5.安装babel相关的插件

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

6.创建文件

在reactTest目录下创建需要的文件，文件名称及其作用如下：

index.html：要展示的界面，存放html结构

App.jsx：使用jsx来构建React组件

main.js：主要的逻辑js文件，实现如渲染组件等功能

webpack.config.js：webpack配置文件

7.编辑wbepack.config.js，代码及注释如下：

var config = {
   entry: './main.js',   //设置入口文件
   output: {
      path:'./',
      filename: 'index.js',  //设置导出文件为index.js
   },
   devServer: {
      inline: true,
      port: 7777   //设定使用webpack-dev-server工具的服务器端口
   },
   module: {
      loaders: [ {   //引入babel模块处理ES6代码
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
}
module.exports = config;  //导出config文件

8.编写其他文件内容形成一个最简单的React应用

(1)在App.jsx中定义组件

import React from 'react';  //引入react组件
class App extends React.Component {  //定义组件，也可以用React.createClass方法创建组件
   render() {
      return (
         <div>
            Hello World
         </div>
      );
   }
}
export default App;   //将App组件导出

(2)在main.js中渲染组件

import React from 'react';  //导入react相关模块
import ReactDOM from 'react-dom';
import App from './App.jsx';  //导入App组件所在的模块文件
ReactDOM.render(<App />, document.getElementById('app'))  //使用组件并渲染到界面

(3)在index.html中引入文件并构建HTML结构

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>
</html>

注意这里引入index.js文件，这个是利用webpack构建后的文件

9.运行：使用webpack-dev-server，在命令行中进入当前项目目录，输入命令webpack-dev-server，访问localhost:7777即可。至此成功构建出一个简单的React应用

fareise

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
6
评论
React环境配置和基本使用

1.准备：配置好Node环境，并且安装npm工具2.安装依赖包npm install babel -gnpm install webpack -gnpm install webpack-dev-server -g上面这三个依赖包都需要安装到全局，因为需要使用它们的命令行工具。其中babel是一个可以将ES6代码转换成ES5代码，这样我们就可以在编写代码的时候使用ES6的一些新特性了。webpa
复制链接

扫一扫

专栏目录