react--学习笔记8(react脚手架和简单练习) 小灰灰 2022-11-27 07:20 165阅读 0赞 # react应用(基于react脚手架): # **1.使用create-react-app创建react应用** ** react脚手架** 1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1. 包含了所有需要的配置 2. 指定好了所有的依赖 3. 可以直接安装/编译/运行一个简单效果 2. react提供了一个用于创建react项目的脚手架库: create-react-app 3. 项目的整体技术架构为: react + webpack + es6 + eslint 4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 **3.1.2. 创建项目并启动** npm install -g create-react-app create-react-app hello-react cd hello-react npm start **拓展:** 1.安装node.js和npm: 可自行到node官网下载,下载node完成后,npm也会自行下载完成。 2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70][] 3.安装好的npm的源默认是国外的源,会因为网络原因导致执行npm操作有延时,我们可以切换npm的源为淘宝的源镜像。 执行 npm config set registry https://registry.npm.taobao.org。切换完成后,可通过 npm config get registry 查看。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 1][] 4.安装react脚手架,cmd执行 npm i -g create-react-app (-g为全局下载) ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 2][] 5.安装好 node 和 react脚手架后就可以创建项目啦,cmd切换至指定路径,执行 create-react-app rproject (rproject为自定义项目名),最后出现 happy hacking说明创建成功。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 3][] 6.如果出现以下报错,是因为网络原因,导致 npm读取代理服务器失败,解决办法为1查看网络状况,2将npm源路径切换到淘宝镜像。参照第三步。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 4][] 7.项目创建成功后,我们可在对应的路径下看到项目文件。打开文件可以看到文件结构。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 5][] 8.启动项目。在项目所在路径下cmd执行 npm start。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 6][] 9.启动成功后会自动打开浏览器,并出现react图标,说明项目启动成功。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 7][] **3.1.3. react脚手架项目结构** ReactNews |--node\_modules---第三方依赖模块文件夹 |--public *|--* *index.html**-----------------主页面* |--scripts *|--* *build.js**-------------------bui**ld**打包引用配置* *|--* *start.js**-------------------**start**运行引用配置* |--src\---\---------源码文件夹 *|--components--**----**-----------react组件* *|--**index.js**-----**----**----------应用入口js* |--.gitignore\------git版本管制忽略的配置 |--package.json\----应用包配置文件 package.json----dependendies:运行时依赖 package.json----devdependencies:开发时依赖 package.json----name、version:标识,依赖,运行打包 |--README.md\-------应用描述说明的readme文件 **实现一个简单的练习:** 步骤: 1.按照上面的步骤下载好手脚架 2.将App.css、App.js、index.js、index.css、serviceWorker.js、setupTest.js等都删除 3.自己新建一个index.jsx入口,并且写内容 import React, { Component } from 'react' import ReactDOM from 'react-dom' import App from './componnets/app' import './index.less' ReactDOM.render(<App />, document.getElementById('root')) 4.在src下新建文件夹components,在建立app.js, import React, { Component } from 'react' import logo from '../logo.svg' export default class App extends Component{ render(){ return( <div> <img className="image" src={logo} alt="logo" /> <h3 className="title">React第一节课</h3> </div> ) } } 5.新建index.css .image{ width: 200px; height: 200px; } .title{ font-size: 20px; color: red; } ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][] 拓展: 在idea中建立模板: 1.在setting下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3][] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70]: /images/20221124/33c1ac500bdb4d55bd0cd798fe58e571.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 1]: /images/20221124/bdda7980d98a463598a078ecc83e1ab9.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 2]: /images/20221124/e5ab3dac22f14c27b666a297435aa1c0.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 3]: /images/20221124/cd0290b78b2d4c25b5cfb1eccaa0a55e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 4]: /images/20221124/12b0da548b464d8385006ba5a4746f0d.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 5]: /images/20221124/3513264a640349d796d423a91034769e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 6]: /images/20221124/8a21ba6abea3402fb84c80cb7e669f17.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 7]: /images/20221124/8f9f46ee112b42be82cf9235e2ba44c8.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221124/ac390d51d6704582b9ab24760d269ca6.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221124/89125f3d7ca54d86b8cd7ecfcc0df3e2.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2]: /images/20221124/ec8f3f9459c14c65905381c4f687105a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3]: /images/20221124/2214ff9c538745db8ecc6874b0ce1470.png
还没有评论,来说两句吧...