搭建基础react - 海宇的博客 - ITeye博客

`

haiyupeter

浏览: 418596 次
性别:
来自: 广州

最近访客更多访客>>

chenyanfei

Jaakko

justplayoop1

zhaobin87

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

xiaomuxingren：你好，请问update-alternatives --inst ...
JDK8安装及jenkins安装
wahahachuang8：我觉得这种东西自己开发太麻烦了，就别自己捣鼓了，找个第三方，方 ...
HTML5 WebSocket
晨曦的朝阳：刚好有需求，学习一下！
MySql主从配置
mfkvfn：这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题
fwyhf： require('./monitor/module_liste ...
NodeJS Server 进程自动重启

搭建基础react

博客分类：

JS基础

阅读更多

基于上一篇《项目中使用webpack》，构建react的基本运行环境非常简单。

1、继续添加依赖
cnpm install babel-preset-react --save-dev //react解析规则
cnpm install react --save-dev
cnpm install react-dom --save-dev

2、在query中加入react
用于辅助react相关的解析

module: {
		loaders: [{
				test: path.join(__dirname, 'es6'),
				loader: 'babel-loader',
				query: {
					presets: ['react', 'es2015']
				}
			}
		]
	}

3、编写组件
Component1.js

import React from 'react';

class Component1 extends React.Component {
	render() {
		return (
			<div>Hello World</div>
		)
	}
}

export default Component1;

4、编写业务逻辑
main2.js

import React from 'react';
import ReactDom from 'react-dom';
import Component1 from './Component1.jsx';

ReactDom.render(
	<Component1/>,
	document.getElementById('content')
);

5、页面引用

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test es6</title>
</head>
<body>
	<div id="content"></div>
	<script src="bundle.js"></script>
</body>
</html>

6、运行起来
webpack，一切正常运行

分享到：

JDK8安装及jenkins安装 | 项目中使用webpack5

2017-11-26 17:55
浏览 608
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

react框架搭建源码: 根据react+mobx+antd搭建的项目，新手学习react可用，配套文字说明请另行下载

React Native 快速搭建商城项目基础结构帖子附件代码: React Native 快速搭建商城项目基础结构帖子附件代码，下载此代码配合帖子流程，可以在搭建React Native 商城项目或者其他项目搭建的时候快速建成！

【JavaScript源代码】从头写React-like框架的工程搭建实现.docx: 因此我想在 Build your own React 的基础上，对代码进行拆分，搭建起自己的框架工程，然后完善教程中没完成的其他功能，代码在 rac 中。　工程搭建　技术栈上我选择用 TypeScript 开发，Rollup 打包, 都是平时用的...

react基础Day01-React概述&脚手架搭建&JSX&组件.md: react基础Day01-React概述&脚手架搭建&JSX&组件.md

react 入门基础技术总结分享文档.txt: react基础技术总结文档项目搭建组件适合刚接触react的开发

react 入门，项目搭建: react 入门，使用webpack 等基础包搭建项目

听晴明老师从头讲React Native: 【录播】React JSX基础(13分钟) 【录播】初识React组件化开发(43分钟) 【资料】React基础一课件(zip，1.1MB) 04 React基础二【录播】组件的生命周期(24分钟) 【录播】组件间通信(31分钟) 【资料】React基础二课件...

东方耀手把手教React Native实战开发: 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React Native实战之flexbox布局(伸缩属性) 第5讲5、手把手教React Native实战之盒子模型BoxApp 第6讲6、手把手教React Native实战之JSX入门...

react最新教程（包含初级-中级-高级）: 第一章:React基础 1.react基础 2. JSX语法 3. 如何给组件添加样式 4. 如何添加自定义组件 5. 创建无状态组件 6. 学习render方法 7. 组件的属性 8. 组件的状态 9. 理解react中的this 10. 使用...

react-仿腾讯天气脚手架createreactapp: 基于create-react-app1.x，基础项目集成搭建，包含路由，其中一个页面仿腾讯天气，基于react方向主流技术栈实现，脚手架create-react-app，全部技术栈：react mobx antd react-router4.x axios webpack3.x。

reactHookApp:使用hook搭建的react的脚手架: Hooks 由react hooks + react router + redux + react-redux编写使用方法 npm install // 或者yarn install npm run dev // 本地开发 ...在此基础上增加了less的支持和autoprefixer 支持code spliting 参考文档

react redux 开发实例: 第一部分是基础篇，介绍React 与Redux 的基础知识；第二部分是进阶篇，通过精彩的官方示例学习React 与Redux；第三部分是拓展篇，主要学习一些优秀的第三方拓展；第四部分是实战篇，将会带领读者一步步搭建大型Web ...

react-router: 这是一个react-router搭建的实例，下载后npm install 安装下依赖模块，然后npm run server启动。此外https://blog.csdn.net/qq_40621718/article/details/79979897有详细的搭建步骤也可以留邮箱。

react-with-tailwindcss-from-scratch:从零搭建 WebpackReactTailwindcss 项目 | React with Tailwindcss from scratch: 现在让我们从一个空文件夹开始，一步一步搭建起使用 Webpack 、React 和 Tailwindcss 框架的基础项目。在这个过程中，说明每个工具的作用，加深对现代前端工具链的理解。一、准备具备 JS、CSS 基础了解打包概念 ...

【JavaScript源代码】手把手教你从零开始react+antd搭建项目.docx: 这次将从最基础的项目搭建开始讲起，做一个基于react和antd的后台管理系统。我会一步步进行下去，所以看完本文你哪怕不了解react，应该也会使用react做一个简单的项目。话不多少，直接开始。完整项目请前往GitHub...

基于React+Echarts搭建数据可视化系统.doc: ，本文就数据可视化的国内外现状、发展前景以及数据可视化的底层原理、流行可视化类库以及本疫情可视化系统实现具备的理论基础进行了全方位分析。然后结合系统的Web前端需求、系统功能需求等进行了需求分析。项目...

详解使用WebPack搭建React开发环境: 第一步、基础环境初始化项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架入口文件(src/index.js) import React from 'react' import {render} from '...

最新React架构全套高质量视频课程: 第一章:React基础 1.react基础 2. JSX语法 3. 如何给组件添加样式 4. 如何添加自定义组件 5. 创建无状态组件 6. 学习render方法 7. 组件的属性 8. 组件的状态 9. 理解react中的this 10. 使用refs操作DOM元素 11. 子...

react-cli-firstEdit:Webpack5 搭建 react 脚手架: Webpack5 搭建 react 脚手架 Webpack 5 对 Node.js 的版本要求至少是 10.13.0 (LTS) 项目初始化 mkdir webpack5-demo cd webpack5-demo npm init -y 安装基础的依赖文件刚刚开始需要安转的包，我直接贴出来吧，可以...

Global site tag (gtag.js) - Google Analytics