从零开始搭建一个react项目开发_react项目搭建

108 浏览量更新于2023-05-11 评论 3 收藏 144KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

从零开始搭建一个从零开始搭建一个react项目开发项目开发

主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了从零开始搭建一个react项目开发，分享给大家，具体如下：

1、、npm init 生成生成 package.json 文件文件.

2、安装各种需要的依赖、安装各种需要的依赖:

npm install

--save react - 安装React.

npm install

--save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装react-native。

npm install

--save-dev webpack - 安装Webpack, 现在最流行的模块打包工具.

npm install

--save-dev webpack-dev-server - webpack官网出的一个小型express服务器，主要特性是支持热加载.

npm install

--save-dev babel-core - 安装Babel, 可以把ES6转换为ES5，注意Babel最新的V6版本分为babel-cli和babel-core两个模块，这里只需要用babel-cor即可。

安装其他的babel依赖（babel真心是一个全家桶，具体的介绍去官网看吧..我后面再总结，这里反正全装上就是了）:

npm install

--save babel-polyfill - Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environment

npm install

--save-dev babel-loader - webpack中需要用到的loader.

npm install

--save babel-runtime - Babel transform runtime 插件的依赖.

npm install

--save-dev babel-plugin-transform-runtime - Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.

npm install

--save-dev babel-preset-es2015 - Babel preset for all es2015 plugins.

npm install

--save-dev babel-preset-react - Strip flow types and transform JSX into createElement calls.

npm install

--save-dev babel-preset-stage-2 - All you need to use stage 2 (and greater) plugins (experimental javascript).

3、打开、打开 package.json 然后添加下面的然后添加下面的scripts:

"scripts": {

"start": "webpack-dev-server --hot --inline --colors --content-base ./build",

"build": "webpack --progress --colors"

}

命令行输入 npm start 将要启动webpack dev server.

命令行输入 npm build 将会进行生产环境打包.

4、启动、启动webpack

Webpack是我们的打包工具，在我们的开发环境中具体很重要的作用，具有很多非常便捷的特性，尤其是热加载hot reloading. webpack.config.js 是如下所示的webpack的配置文件. 随着app的不断变

化，配置文件也会不断的更新，这里我们就用默认的webpack.config.js来命名这个配置文件，假如你用别的名字比如webpack.config.prod.js那么上面的脚本build就需要相应的改变指定相应的配置文件名

字："build": "webpack webpack.config.prod.js --progress --colors"

var webpack = require('webpack');

module.exports = {

entry: './src/app.js',

output: {

path: __dirname + '/build',

filename: "bundle.js"

module: {

rules: [{

test: /\.js$/,

exclude: /node_modules/,

loader: 'babel-loader',

query: {

plugins: ['transform-runtime'],

presets: ['es2015', 'react', 'stage-2']

}

}, {

test: /\.css$/,

loader: "style-loader!css-loader"

}]

}

};

OK,我们项目的基本配置终于完成了，是时候开始写Reac代码了.

React 基础基础 - 建立你的第一个建立你的第一个Component

在上面的项目的基本配置基础上，我们开始书写React的第一个组件来熟悉React的写法与组件思想。

首先我们在项目根目录中新建一个 index.html 文件。在这个基础工程中, 我们使用bootstrap的样式，直接引入一个cdn即可. 然后添加一个html标签 <div id="app"></div>，我们的app就会注入到这个div

中。最后再引入 <script src="bundle.js"></script>，这是最后打包生成的js代码。

以下是完整的代码:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

建立一个新的文件夹 src. 我们app的大部分代码都将放在这个文件夹里面。在 src中建立 app.js，作为React App的根组件，其他所有的组件都会注入到这个跟组件中。

首先我们需要导入react，现在都已经用ES6的语法， import React from 'react'; ，然后我们要引入react-dom. 这里面有react中最重要的一个虚拟dom的概念.引入代码：import ReactDOM

from 'react-dom';

现在需要引入的依赖都已经完毕我们可以写第一个组件了：

class App extends React.Component {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38725119

粉丝: 4
资源: 952

会员权益专享

从零开始搭建一个react项目开发

评论0

会员权益专享

最新资源

从零开始搭建一个react项目开发

评论0

怎样构建一个react项目

react项目搭建

从零开始学习搭建React脚手架项目

从0开始react搭建开发

如何从零搭建一个react + TS的完整项目

如何搭建一个react antd项目

简单搭建一个React语言的h5项目框架

vite搭建react项目

react项目搭建实战

react推荐的项目搭建

用vite搭建react项目

react搭建开发环境

react 项目从0到1搭建

创建一个react项目

react 搭建h5项目

如何创建一个react项目

vscode 如何新建一个react 项目

react native从零搭建框架

vite初始化react项目并搭建开发环境

react hook项目从0到1搭建

会员权益专享

最新资源