1、脚手架创建启动

切换到想创项目的目录，使用命令：create-react-app hello-react
进入项目文件夹：cd 文件名
启动项目：yarn start

2、脚手架项目结构

public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo 图logo512.png ------- logo 图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹App.css -------- App 组件的样式App.js --------- App 组件App.test.js ---- 用于给 App 做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo 图reportWebVitals.js--- 页面性能分析文件(需要 web-vitals 库的支持)setupTests.js---- 组件单元测试的文件(需要 jest-dom 库的支持)

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想视口，用于做移动端网页的适配 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) --><meta name="theme-color" content="red" /><metaname="description"content="Web site created using create-react-app"/><!-- 用于指定网页添加到手机主屏幕后的图标 --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳时的配置文件 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><!-- 若llq不支持js则展示标签中的内容 --><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>

3、hello react

//index.js
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App组件
import App from './App.jsx'//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))

//App.jsx
//是不同的暴露方式，{ Component }不是结构赋值，是单独暴露方式
import React, { Component } from 'react'
import Hello from './components/Hello/Hello.jsx'
//暴露App组件
export default class app extends Component {render() {return (<div><Hello/>   </div>)}
}

//Hello.jsx
import React, { Component } from 'react'
import '../Hello/Hello.css'export default class Hello extends Component {render() {return (<div><h2 className="title">Hello,react</h2></div>)}
}

//index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><div id="root"></div></body>
</html>

//Hello.css
.title{background-color:orange;
}

样式模块化暴露

//Hello.jsx
import React, { Component } from 'react'
import hello from './Hello.module.css'export default class Hello extends Component {render() {return (<div><h2 className={hello.title}>Hello,react</h2></div>)}
}

//Hello.module.css
.title{background-color:orange;
}

4、React ajax

React 本身只关注于界面, 并不包含发送 ajax 请求的代码
前端应用需要通过 ajax 请求与后台进行交互(json 数据)
react 应用中需要集成第三方 ajax 库(或自己封装)

React脚手架开发相关推荐

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
React 开发环境的搭建（React脚手架）
1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServer-) 下载好了所有相关的依赖可以直接运行一个简 ...
React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...
React入门---react脚手架
React是Facebook研发的一款前端框架(MVC框架:侧重于view层操作),目前在行业内广泛使用.为了让框架的体积变得更轻量级,设计者们把其定义为"渐进式"框架,也就是: ...
React项目开发中的数据管理
原文链接:https://blog.csdn.net/hl582567508/article/details/76982756 redux中文文档:http://cn.redux.js.org/ Re ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
React脚手架学习笔记
一.前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方模块的依赖: 比如项目发 ...
【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件使用 create-react-app ...

React脚手架开发

1、脚手架创建启动

2、脚手架项目结构

3、hello react

4、React ajax

React脚手架开发相关推荐

最新文章

热门文章