React入门:从零搭建一个React项目
一、初始化项目
- 新建文件夹,文件名firstreact 文件夹名称不要用react,node这类关键字,后面使用插件时会发生错误。
init项目环境,项目信息可默认或自行修改
mkdir firstreact cd firstreact npm init
二、安装webpack
- 新建gitignore文件,用于忽略安装的包文件,文件内容: node_modules
安装webpack, 注意:我此处安装的webpack版本是4.28.4,webpack4和webpack2, webpack3的一些配置不同,具体参考webpack文档webpack中文文档
npm i --save-dev webpack
三、配置webpack环境
- 新建文件夹,文件名:src
src目录下新建文件hello.js,文件内容:
module.exports = function () {var element = document.createElement('h1');element.innerHTML = 'Hello React';return element; };
src目录下新建文件index.js,文件内容:
var hello = require('./hello.js');document.body.appendChild(hello());
新建文件webpack.config.js,一个最基础的webpack配置如下:
const webpack = require('webpack'); const path = require('path'); var config = { entry: [ './src/index.js' ], // 打包入口文件output: {path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } // 打包输出文件 }; module.exports = config;
执行webpack。执行完成后,根目录下会新增一个dist文件夹,文件夹下是打包出来的js文件bundle.js
webpack
安装html-webpack-plugin,该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。
npm i --save-dev html-webpack-plugin
html-webpack-plugin配置,webpack.config.js内容如下
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = { entry: [ './src/index.js' ], // 打包入口文件output: {path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },// 打包输出文件plugins: [new HtmlwebpackPlugin({ title: 'Hello React', })] };module.exports = config;
再次执行webpack,此时dist目录下生成了一个新文件index.html
webpack
安装webpack-dev-server和webpack-cli,提供一个简单的 web 服务器,并且能够实时重新加载。
npm install --save-dev webpack-dev-server webpack-cli
修改webpack.config
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包输出文件plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),] }; module.exports = config;
配置webpack启动的快方式,此处webpack4在启动服务是要求设置mode,告知 webpack 使用相应模式的内置优化。未设置会报一个警告。mode选项支持“development”“production”“none”,具体信息请阅文档 修改package.json文件:
············"scripts": {"start": "webpack-dev-server --mode=development --port 3000 --hot","build": "webpack --mode=production"} ···········
启动服务,服务启动后打开浏览器访问http://localhost:3000/
npm run dev
三、优化开发环境
css编译和js编译。现在开发时一般css都会使用扩展css语法,如less或sass,这时就需要在项目中安装css编译插件。此处以less为例。es6和es7语法也需要babel编译。
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包输出文件module: {rules: [{test: /\.less$/,use: [{ loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'less-loader' }]},{test: /\.js$/,exclude: /node_modules/,use: [{ loader: 'babel-loader' }]}]},plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),]
安装:
npm i --save-dev less css-loader style-loader less-loader npm i --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
修改webpack.config.js
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包输出文件module: {rules: [{test: /\.less$/,use: [{ loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'less-loader' }]},{test: /\.js$/,exclude: /node_modules/,use: [{ loader: 'babel-loader' }]}]},plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),] }; module.exports = config;
根目录下新建.babelrc文件,配置文件内容如下
{"presets": ["@babel/preset-env","@babel/preset-react"] }
在src目录下新建文件index.less,文件内容如下
body{h1{color: green;} }
修改src目录下的index.js文件:
import hello from './hello.js'; import './index.less';document.body.appendChild(hello());
再次启动服务
npm run start
目前为止完成了一个最基础的项目结构,后面需要使用其他框架的话再此基础上修改。在这过程中因各个插件工具的版本不同可能会发生不同错误,遇到错误时,请查询相关文档。
四、在项目中使用React
安装react。
npm i --save-dev react react-dom
修改src目录下index.js,文件内容如下:
import React from 'react'; import ReactDOM from 'react-dom';import './index.less';class APP extends React.Component {render() {return (<h1>Hello React</h1>)} }ReactDOM.render(<APP/>, document.getElementById('content'));
在src目录下新建index.html,在html增加挂载节点content。 文件内容如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title><%= htmlWebpackPlugin.options.title %></title> </head> <body><div id="content"></div> </body> </html>
- 对应修改webpack.config.js文件,为htmlWebpackPlugin修改template
············plugins: [new HtmlwebpackPlugin({title: 'Hello React',template: './src/index.html'}),]············
目录结构为:
│ .babelrc
│ .gitignore
│ package.json
│ webpack.config.js
│
└─srchello.jsindex.htmlindex.jsindex.less
React入门:从零搭建一个React项目相关推荐
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- 从零搭建一个基于React+Nextjs的SSR网站(四):如何搭建服务器并部署Nextjs项目
个人博客源码:https://github.com/shaotianyu/blog-front PS: 如果你有疑惑,可以给我留言,咱们一起解决它. 从零搭建一个基于React+Nextjs的SSR网 ...
- 如何搭建一个react项目?
使用react很长时间,写个搭建项目的文档,用于新项目的快速启动. 本项目使用的技术栈: create-react-app react-router ant-design react-redux 一. ...
- React-从0到1搭建一个React项目(一)
文章目录 架构介绍 第三方组件库 项目准备 环境准备 使用create-react-app初始化项目 创建项目目录结构 安装第三方库 利用工作之余的时间学习了react,今年一回来,部门要在公众号上面 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 【停车场车辆管理系统】从零搭建——前端react搭建
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
- webuploader 怎么在react中_另辟蹊径搭建阅读React源码调试环境支持所有React版本细分文件断点调试...
引言(为什么写这篇文章) 若要高效阅读和理解React源码,搭建调试环境是必不可少的一步.而常规方法:使用react.development.js和react-dom.development.js调试 ...
- 【华为云技术分享】从零搭建一个灰度发布环境
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- 从零搭建一个 Spring Boot 开发环境!Spring Boot+Mybatis+Swagger2 环境搭建
从零搭建一个 Spring Boot 开发环境!Spring Boot+Mybatis+Swagger2 环境搭建 本文简介 为什么使用Spring Boot 搭建怎样一个环境 开发环境 导入快速启动 ...
最新文章
- 在AWS控制台里创建key Pair
- 跨站请求伪造(CSRF/XSRF)
- mysql为字段值添加或者去除前缀、后缀(查询字段拼值)
- 论文浅尝 | BERT:Pre-training of Deep Bidirectional Transformers
- 跑酷游戏的一些bug总结(滥用FixedUpdate的坑)
- 简述linux命令的,简述linux系统以及一些简单的命令
- win11定时关机命令
- 《华为基本法》-笔记
- 使用DOSBox自动进入debug模式
- 重装系统,只需一行命令,一键激活win10家庭版。清理电脑缓存垃圾。
- foxmail信纸设置html,教你如何设置Foxmail信纸花样?
- 提升测试效率都有哪些具体手段?
- Kotlin实现的一个小小的RecyclerView列表界面及点击事件的简单处理
- 【HDLBits刷题】Dff8r
- Java语言每日一练—第11天:最优选择2
- 大数据就业前景如何?马云曾经说过大数据是未来顶峰时代应验了
- VC :在对话框中绘图
- 美国股市入门一:基本概念介绍
- CSS:focus-visible伪类真的太6了!
- Android-WIFI笔记整理(二)