本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记
如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令
rush:bash;">
npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js
create-react-app my-app //使用create-react-app创建,my-app为项目名称
cd my-app/ //进入my-app目录
npm start //运行项目
现在打开 http://localhost:3000/ 就能看到初始界面
我不大愿意使用官方自带这个脚手架,是因为它的webpack配置太复杂,我比较愚钝看不大懂,还望有大神能研究透彻分享一下。
要如何create-react-app内部的webpack配置文件解压出来?
rush:bash;">
npm run eject
源代码
每次看教程我都喜欢先把项目跑起来,然后再一句一句代码地去了解。如果你也是:
rush:bash;">
git clone https://github.com/lingjiawen/HelloReact.git
cd HelloReact/
npm install
npm run dev
一、创建项目结构
顺口提一下,我用的IDE是Sublime
在该文件夹内这样组织你的项目结构:
rush:plain;">
|--app //项目组件
|--components //组件结构
|---Hello.jsx
|--main.js //入口文件
|--build //项目build文件
|--index.html //索引html
|--.babelrc //babel转码工具配置文件
|--package.json //npm说明文件,可以理解为包管理文件
|--webpack.config.js //webpack配置文件
在build/index.html中拷贝以下代码: