`
haiyupeter
  • 浏览: 427576 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

搭建基础react

 
阅读更多
基于上一篇《项目中使用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，一切正常运行
分享到：
| 项目中使用webpack5
评论
发表评论

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

相关推荐

    最简单的脚手架工具搭建的react实现路由和状态机demo

    在React开发中，脚手架工具（如`create-react-app`）可以帮助我们快速构建一个基础的项目结构，省去了配置构建工具、设置开发服务器等繁琐步骤。本项目"最简单的脚手架工具搭建的react实现路由和状态机demo"正是基于...

    react-一步一步搭建一个react项目环境

    在本文中，我们将深入探讨如何一步一步地搭建一个React项目环境，包括使用React和Webpack的基础配置。React是一个流行的JavaScript库，用于构建用户界面，而Webpack是一个模块打包器，它能够管理和优化项目的依赖...

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

    这些依赖项是 React 项目的基础组件。 * 安装React：使用npm install --save react命令安装React。 * 安装React Dom：使用npm install --save react-dom命令安装React Dom，用于处理virtual DOM。 * 安装Webpack：...

    从零搭建一个 React & npm 组件库.pdf

    React & npm 组件库搭建指南 React & npm 组件库搭建是前端开发中的一个重要话题。随着前端技术的日益复杂，组件库的需求也在不断增加。那么，从零搭建一个 React & npm 组件库需要哪些步骤？如何解决组件间的依赖...

    React基础概念与环境搭建+React组件与生命周期+状态管理与Redux集成+React路由与导航等全套教程

    React基础概念与环境搭建 React组件与生命周期 状态管理与Redux集成 React路由与导航 React与RESTfulAPI交互 React中的表单与状态控制 React高级主题：Hooks React性能优化与懒加载 React中的错误边界与异常处理 ...

    NPM React从零开始搭建

    在IT行业中，构建Web应用程序的过程中，JavaScript库和框架如React起着至关重要的作用。本教程将引导你从零开始，利用NPM(Node Package Manager)，在Node.js环境中...但这个基础配置已经足够启动你的React开发之旅。

    react框架搭建源码

    在本项目中，我们基于React、MobX状态管理和Ant Design UI库搭建了一个基础的项目框架，非常适合新手入门学习。 首先，让我们深入了解React的核心概念。React通过组件化的方式将UI拆分成独立、可重用的部分，每个...

    快速搭建ReactNative项目的一个starter

    这个“快速搭建React Native项目的一个starter”提供了一个基础的项目模板，旨在帮助开发者快速启动他们的React Native应用开发。 一、React Native基础知识 React Native的核心理念是“Learn once, write anywhere...

    umi基础框架（React+umi+Ts）

    标题 "umi基础框架（React+umi+Ts）" 指的是使用umi作为基础架构，结合React和TypeScript来构建...`umi_admin-master`压缩包则提供了这样一个应用的基础代码结构和配置，便于开发者快速搭建和开发企业级后台管理系统。

    react环境搭建

    React环境的搭建是开发工作的重要第一步，因为这将决定你的项目能否顺利进行。本项目已经为你提供了一个预配置好的React环境，集成了Redux和其他必要模块，可以直接使用。 首先，我们来了解一下`npm install`这个...

    React Native 快速搭建商城项目基础结构帖子附件代码

    在“React Native 快速搭建商城项目基础结构帖子附件代码”中，我们可能涉及到以下几个关键知识点： 1. **React Native基础知识**：React Native的核心概念包括组件化、JSX语法、状态管理和生命周期方法。组件是...

    React搭建文档.docx

    在本文档中，我们将探讨如何简单地搭建一个React项目，包括React的基本使用方式和通过Create React App创建项目的步骤。 首先，React可以通过两种主要方式引入到项目中。一种是直接在HTML文件中使用`&lt;script&gt;`标签...

    React零基础自学手册.pdf

    ### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**：一种用于构建用户界面的JavaScript库，特别适用于构建单页应用(SPA)。 - **特点**：虚拟DOM、组件化设计、单向数据流。 #...

    基于React、Dva、ECharts、DataV的框架大数据可视化（大屏展示）模板

    在这个模板中，React作为基础框架，负责处理视图层的渲染和交互。 Dva是基于React和Redux的状态管理框架，它集成了Redux、Redux-Saga、React-Router等库，使得状态管理和异步逻辑更加简洁。在大数据可视化场景下，...

    React的介绍及环境搭建（22分13秒）

    React是Facebook开源的一个JavaScript库，专门用于构建用户界面，尤其是单页应用（SPA）。它采用组件化开发方式，使得UI的构建变得...通过学习，你可以掌握React开发的基础技能，为进一步深入学习和实践打下坚实基础。

    react-React简单入门demo

    React是Facebook推出的一款开源JavaScript库，用于构建用户界面...这个入门示例是一个很好的起点，通过实践它，你可以对React的基础有更深入的理解，并为进一步学习React的高级特性，如Redux、React Router等奠定基础。

    React 简单demo

    在这个"React简单demo"中，我们将深入探讨如何使用`create-react-app`工具创建一个基础的React项目，并集成路由配置，这对于初学者来说是一个很好的实践起点。 首先，`create-react-app`是一个官方提供的脚手架工具...

    React集成Cesium示例代码

    2. **JavaScript/ECMAScript**: 作为React的基础，JavaScript是实现项目逻辑和交互的主要语言。ECMAScript（通常指ES6及以上版本）引入了类、箭头函数、模板字符串等新特性，使得JavaScript更适用于构建现代Web应用...

    基于react框架搭建网易新闻Web App

    以上就是使用React框架搭建网易新闻Web App的基本步骤。通过这个项目，你可以掌握React组件化开发、数据获取、状态管理、路由配置以及响应式设计等多个关键知识点。实践过程中，不断学习和优化，你的前端技能将得到...

Magicbox
Global site tag (gtag.js) - Google Analytics