`
haiyupeter
  • 浏览: 425878 次
  • 性别: 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,一切正常运行
分享到:
评论

相关推荐

    最简单的脚手架工具搭建的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拆分成独立、可重用的部分,每个...

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

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

    快速搭建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的介绍及环境搭建(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组件化开发、数据获取、状态管理、路由配置以及响应式设计等多个关键知识点。实践过程中,不断学习和优化,你的前端技能将得到...

Global site tag (gtag.js) - Google Analytics