React+webpack
webPack + React
步骤:
1. 创建文件夹
src 源代码目录
main.js 打包的入口文件
App.js 项目的根组件
import React,{Component} from 'react'
class App extends Component {
render(){
return <div>
<h1>hello ggg</h1>
</div>
}
}
export default App
JSX是允许在js代码中写html标签
但目前浏览器是不支持JSX,需要借助babel进行转换
3. main.js导入根组件
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />,document.getElementById('root'))
4. webpack.config.dev
安装包
配置loader
在项目`根目录`创建.babelrc,写好预设(presets)
yarn add babel-core babel-loader babel-preset-env babel-preset-react --dev
plugins:html-webpack-plugin webpack webpack-dev-server
github上面找怎么写
代码:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './template.html',
filename: 'index.html'
})
]
}
脚手架
参考:https://doc.react-china.org/docs/installation.html
步骤:
1、安装全局包
cnpm install -g create-react-app
2、生成项目并且会自动安装包(yarn安装)
create-react-app my-app
3、运行项目
npm start
热重载
参考:
https://github.com/gaearon/react-hot-loader
步骤:
1、安装
yarn add react-hot-loader --dev
2、Add react-hot-loader/babel to your .babelrc
3、Enable Hot Module Replacement in Webpack
参考:https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr
webpack配置中:
const webpack = require('webpack');
entry: [
'babel-polyfill', //装此包
'react-hot-loader/patch',
'./src/main.js'
],
output: {
publicPath: '/'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new HtmlWebpackPlugin({
template: './template.html',
filename: 'index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
package.json的scripts里面--hotOnly
4、main.js
import { AppContainer } from 'react-hot-loader'
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root'),
)
}
render(App)
// Webpack Hot Module Replacement API
if (module.hot) {
module.hot.accept('./App', () => { render(App) })
}
5、更改.babelrc中的内容
{
"presets":[["env",{ "modules": false }],"react"],
"plugins": ["react-hot-loader/babel"]
}
注意点:
热重载只在开发阶段使用
脚手架的热重载参考:https://github.com/gaearon/react-hot-loader
React对我们css、less、sass的处理
1、直接在标签里面通过style来写
1.1 <h2 style={{color:'red'}}>Hello My Girl</h2>
1.2、把样式单独放在一个对象中,在写style时候,就是用该样式对象即可
注释:{/* xxxx */}
2、通过外部样式
import 'xxx.css/yyy.less/yyy.sass'
<h2 className="titleStyle">dwd</h2>
注意:要有对应的loader来加载
注意事项:
在JSX中,属性名称后面的值,就是两种情况,一种是字符串,一种`{}`
React核心之组件
状态:数据
组件的数据来源于两部分
其一来自父组件
其二是自己内部拥有的数据
无状态组件
特点:自己内部不能拥有数据,数据来源于父组件,父组件给它传了什么数据,它就只能使用什么样的数据
语法:
只需要导入react,不用导入component
function 组件的函数名称(props){
return jsx语法
}
export default 组件的函数名称
传值:
传值方(App.js) 在使用子组件的时候,通过属性名称=值的方式传递,跟Vue、Angular一模一样
<NoStateComponent name="jack" age={18}></NoStateComponent>
接收方(NoStateComponent.js)
通过函数的props参数来接收,但是接收到的值是只读的
props是一个对象
注意点:
父组件给子组件传递的值,子组件只能展示,不能直接修改
应用场景:
纯粹的展示父组件的值
有状态组件
特点:自己即可从父组件中获取数据,也可以自己内部拥有数据
语法:
需要导react和component
class 组件名称(首字母大写) extends Component{
constructor(props){
super(props)
this.state = {
name:"小芳",
sex:"女",
movieList:[props.name]
}
}
//如果父组件不给传值,设置默认值,es7语法所以要改预设babel-preset-stage-0
static defaultProps = {
initCount :3000
}
render(){
return jsx
}
}
prop-types:
可以用来检测父组件传递过来的值类型
//设置默认规则
import PropTypes from 'prop-types'
static propTypes = {
initCount:PropTypes.number
}
注意点:
1、有状态组件中,如果要拥有自己内部的数据,在constructor(){}中,设置this.state = { 属性名称:值,xxx:yyy}
2、有状态组件使用父组件传递过来的值,通过 this.props.xxx的方式去获取
3、事件处理比较变态,在注册事件的时候,要这样写 onClick = {()=>{this.函数名称()}}
注意:可能有坑 http://www.jianshu.com/p/ed325ed164d2
4、如果要更改我们自己state的值,得通过 this.setState({}) 这样的方式来改
生命周期钩子
参考:https://doc.react-china.org/docs/state-and-lifecycle.html
getDefaultProps - getInitialState - componentWillMount - render - componentDidMount - 运行 - 三部分(props,status,unmount)
Ant Desgin
IE9+
集成在项目中:
1. 安装
yarn add antd --save
2. 用插件按需加载
使用 babel-plugin-import(推荐)
安装:
yarn add babel-plugin-import --dev
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
3. 使用
使用哪个组件,就直接使用 import {组件} from 'antd'
React中如何集成路由
地址:https://reacttraining.com/react-router/
核心概念
Router:容器的作用,包裹需要导航的所有代码,Router整个项目中只需要写一次,一般写在App.js
Link:触发路由
Route:路由占位 + 设置路由规则,写在页面中动态变化的地方
步骤:
集成:
安装包 react-router-dom
使用:
App.js中使用
注意:
1、react-router-dom中,默认路由是模糊匹配的
包
1. 包名:react、react-dom
应用场景:在搭建项目时,写App.js中的代码
安装方式:yarn add react react-dom --save
2. 包名:babel-core babel-loader babel-preset-env babel-preset-react
应用场景:构建项目时,写webpack.config.dev.js的时候用到
安装方式:yarn add babel-core babel-loader babel-preset-env babel-preset-react --dev
注意:babel-preset-env 转换的是我们所写的es6代码
babel-preset-react 转换的是react中jsx的语法
3. 包名:html-webpack-plugin webpack webpack-dev-server
应用场景:开发阶段使用它,生成index.html
安装方式:yarn add html-webpack-plugin webpack webpack-dev-server --dev
4. 包名:react-hot-loader、babel-polyfill
应用场景:在实现热重载的时候,使用
安装方式:yarn add react-hot-loader babel-polyfill --dev
5. 包名:style-loader css-loader less-loader less sass-loader node-sass
应用场景:在加载样式的时候,使用
安装方式:yarn add style-loader css-loader less-loader less --dev
注意:
node-sass 要是用cnpm
1. 包名:antd
应用场景:当我们项目需要集成antd
安装方式: yarn add antd --save
2. 包名:babel-plugin-import
应用场景:在按需导入ant design的插件的时候
安装方式:yarn add babel-plugin-import --dev
3. 包名:url-loader
应用场景:在根组件中,使用我们的logo的图像需要用到
安装方式:yarn add url-loader --save-dev
4. 包名:react-router-dom
应用场景:在我们项目中使用路由的时候
安装方式:yarn add react-router-dom --save
React+webpack的更多相关文章
- 部署React+webpack工程的步骤
# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...
- scss + react + webpack + es6
scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...
- react +webpack 配置px2rem
项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- NodeJS + React + Webpack + Echarts
最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1. 在react里封装echarts组件,并调用后端API. (参考的 ...
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- 如何在react&webpack中引入图片?
在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...
- react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...
- React + webpack 快速搭建开发环境
因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...
- React + webpack 环境配置
安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码 ...
随机推荐
- python tips:dict的key顺序
python3.6+版本中,dict的键值保持插入有序. t = list(range(10)) b = t[:] d = dict(zip(t, b)) print(list(d.items())) ...
- kipmi0进程单核CPU100%的解决办法
top查看服务器进程,发现有个kipmi0的进程竟然CPU的单核占用高达100%,而且居高不下. 于是上网搜了搜大家的说法了给出的链接,大概意思是一个固件问题,可以通过修改文件来解决. 专业的解释地址 ...
- VCSA服务重启命令
Sphere Web Client界面的服务分别是: vmware-mbcs vmware-netdumper vmware-rbd-watchdog 分别执行命令确认,首先执行命令: service ...
- Django 模型层(标签、过滤器、模板的继承与导入)
过滤器/自定义过滤器 模板语法中的过滤器类似于python中的内置方法,在我们把数据从后端通过rander传入到前端html文件中之后,在前端我们可以通过模板语法,对传入的数据再进行以通骚操作. 首先 ...
- PAT_A1148#Werewolf - Simple Version
Source: PAT 1148 Werewolf - Simple Version (20 分) Description: Werewolf(狼人杀) is a game in which the ...
- jupyter notebook主目录修改
转自http://blog.csdn.net/c437yuyang/article/details/54836303 1.打开 cmd 输入命令 jupyter notebook --generate ...
- 5.win上安装ES
安装步骤如下: 1.安装JDK 至少1.8.0_73以上版本,使用 java -version 这个命令进行查看java的版本 2.下载和解压缩Elasticsearch安装包, 解压后目录结构: 3 ...
- Intro.js 分步向导插件使用方法
简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...
- node源码详解(五)
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource5 本博客同步在https://cnodejs.o ...
- [bzoj3389][Usaco2004Dec]Cleaning Shifts安排值班_最短路
Cleaning Shifts bzoj-3389 Usaco-2004Dec 题目大意:每天有n个时间段,每个时间段都必须安排一个奶牛值班.有m个奶牛,每个奶牛只有一个空闲时间s[i]~e[i],求 ...