React环境配置和基本使用
2016-09-03 13:53
603 查看
1.准备:配置好Node环境,并且安装npm工具2.安装依赖包
4.安装react的必要模块
在命令行执行如下语句:
App.jsx:使用jsx来构建React组件
main.js:主要的逻辑js文件,实现如渲染组件等功能
webpack.config.js:webpack配置文件
7.编辑wbepack.config.js,代码及注释如下:
npm install babel -g npm install webpack -g npm install webpack-dev-server -g上面这三个依赖包都需要安装到全局,因为需要使用它们的命令行工具。其中babel是一个可以将ES6代码转换成ES5代码,这样我们就可以在编写代码的时候使用ES6的一些新特性了。webpack工具是一个代码构建工具,webpack-dev-server是一个小型的Express服务器。3.创建一个项目目录:reactTest。通过命令行进入reactTest目录下,执行npm init命令。该命令可以帮助我们创建一个package.json文件。
4.安装react的必要模块
在命令行执行如下语句:
npm install react --save npm install react-dom --save使用--save可以直接将安装的模块写入到package.json文件中的dependencies字段下,自动添加依赖。5.安装babel相关的插件
npm install babel-core npm install babel-loader npm install babel-preset-react npm install babel-preset-es20156.创建文件在reactTest目录下创建需要的文件,文件名称及其作用如下:index.html:要展示的界面,存放html结构
App.jsx:使用jsx来构建React组件
main.js:主要的逻辑js文件,实现如渲染组件等功能
webpack.config.js:webpack配置文件
7.编辑wbepack.config.js,代码及注释如下:
var config = { entry: './main.js', //设置入口文件 output: { path:'./', filename: 'index.js', //设置导出文件为index.js }, devServer: { inline: true, port: 7777 //设定使用webpack-dev-server工具的服务器端口 }, module: { loaders: [ { //引入babel模块处理ES6代码 test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } } module.exports = config; //导出config文件8.编写其他文件内容形成一个最简单的React应用(1)在App.jsx中定义组件
import React from 'react'; //引入react组件 class App extends React.Component { //定义组件,也可以用React.createClass方法创建组件 render() { return ( <div> Hello World </div> ); } } export default App; //将App组件导出(2)在main.js中渲染组件
import React from 'react'; //导入react相关模块 import ReactDOM from 'react-dom'; import App from './App.jsx'; //导入App组件所在的模块文件 ReactDOM.render(<App />, document.getElementById('app')) //使用组件并渲染到界面(3)在index.html中引入文件并构建HTML结构
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>注意这里引入index.js文件,这个是利用webpack构建后的文件9.运行:使用webpack-dev-server,在命令行中进入当前项目目录,输入命令webpack-dev-server,访问localhost:7777即可。至此成功构建出一个简单的React应用
相关文章推荐
- VC环境下使用HALCON图像处理库的配置与基本操作
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
- solr环境搭建&基本使用 - 程序灵感 solr服务与tomcat整合 solr使用配置步骤 solr使用 推荐分词工具 一.Solr服务与tomcat整合 1、solr
- 整合一下深度学习caffe环境配置和基本使用例程(CPU+GPU)
- Windows下Linux 环境 Cygwin安装及配置 基本工具使用
- (0037) React-Native开发之环境配置步骤和安装使用
- 关于IDEA的基本环境配置以及快速使用(git拉载程序,Jdk安装,tomcat部署,应用程序打包运行)
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- Java学习之路0714(一)(markDown标签的简单使用,Java环境配置、Java基本数据类型))
- Hadoop基本使用(一)环境配置-单机版
- fedora使用日记一:基本环境配置
- Mac环境下Android Studio配置Git以及最基本使用
- React学习笔记--环境的基本配置!
- Windows下Linux 环境 Cygwin安装及配置 基本工具使用
- Git详解之环境配置和基本命令使用
- picasso-基本使用及环境配置
- Virtualenv介绍、基本使用及在Pycharm下配置环境
- 5React 环境配置与调试技巧1使用npm配置
- ReactNative环境配置(不使用Chocolatey)
- vss开发环境基本配置与使用(图解)