配置React开发环境教程
这是一篇新手向文章,主要是记录一下使用过程,希望能给予别人一些帮助和提示 用 Yarn 做包管理 教程是基于macOS的,Nodejs得提前安装好。我的Nodejs和npm的版本如下 node -v v6.9.2 npm -v 3.10.9 Yarn安装和配置我们在 macOS 下可以通过 brew update brew install yarn Yarn 下载的包或者模块都是跟npm一个源的,因为某些原因,下载速度非常慢,难受,所以我们得换源 Yarn 换源和npm的源是一致的,都是共享 npm set registry https://registry.npm.taobao.org npm set disturl https://npm.taobao.org/dist npm cache clean 通过查看 vim ~/.npmrc 项目初始化打开你的终端,新建文件夹然后进入该文件夹,用 mkdir react-demo cd react-demo yarn init
vim package.json { "name": "react-demo","version": "1.0.0","main": "index.js","license": "MIT" } webpack安装和配置yarn add webpack webpack-dev-server path 安装完毕,你会发现当前目录多了个 现在,我们已经安装好webpack了,我们需要一个配置文件用来执行,如下 touch webpack.config.js 然后更新该文件内容为如下 const path = require('path'); module.exports = { entry: './client/index.js',output: { path: path.resolve('dist'),filename: 'index_bundle.js' },module: { loaders: [ { test: /.js$/,loader: 'babel-loader',exclude: /node_modules/ },{ test: /.jsx$/,exclude: /node_modules/ } ] } } 从配置文件内容可以看出,为了让webpack运行,我们需要一个入口 为了能让JSX代码或者是ES6的代码也能正常在浏览器运行,我们需要 更多的 Babel安装和配置yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev 在webpack配置过程中,我们用到了
安装完毕,我们还需要去配置Babel,新建一个文件为 touch .babelrc 然后更新该文件内容为如下 { "presets":[ "es2015","react" ] } webpack中的loader的 配置入口文件现在我们的目录结构如下 |-- node_modules |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock 我们需要创建新的文件夹,同时在新文件夹内新建 mkdir client cd client touch index.js touch index.html 然后我们更新一下 console.log('Hello world!') 同样地,我们也要更新一下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React App Setup</title> </head> <body> <div id="root"> </div> </body> </html>
同时我们还需要 cd .. yarn add html-webpack-plugin 安装完成后,打开 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: './client/index.html',filename: 'index.html',inject: 'body' }) module.exports = { ... module: { loaders: [ ... ] },plugins: [HtmlWebpackPluginConfig] } 我们引入 为了可以运行它,我们需要配置 "scripts": { "start": "webpack-dev-server" }, 然后我们就可以运行了 yarn start 终端出现如下内容 Project is running at http://localhost:8080/ 我们打开浏览器,输入http://localhost:8080/,在开发者工具的 react安装与配置yarn add react react-dom 然后进入 cd client mkdir components cd components touch App.jsx cd ../.. 现在我们项目目录结构如下 |-- node_modules |-- client |-- components |-- App.jsx |-- index.html |-- index.js |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock 然后我们更新一下 import React from 'react'; export default class App extends React.Component { render() { return ( <div style={{textAlign: 'center'}}> <h1>Hello World Again</h1> </div>); } } 我们还需要修改一下我们的入口文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.jsx'; ReactDOM.render(<App />,document.getElementById('root')); 然后在终端输入 刷新 至此,通过 Yarn 包管理,配置webpack和Babel,去搭建编写react组件的开发环境的新手向教程就此完毕 欢迎访问我的博客~ https://www.linpx.com/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- xml – 在Android中定义RelativeLayout视图的Z顺
- vue分类页开发--axios数据获取,localstorage数据
- 黑马第五天之Sax解析XML文档和Dom4J解析XML文档
- Ajax提高篇(4)在请求和响应中使用 XML(2)
- Flash反编译软件(Action Script Viewer)ASV2012/
- c – Steamworks检查用户是否已登录
- Ludia,Postgresql
- 13.13 sqlite3 -- DB-API 2.0 SQLite数据库接口[
- c – 包含来自包含文件的最佳做法
- vb CreateObject("Scripting.FileSystemObje