create-react-app是用于搭建react项目的脚手架。它的优势在于省略了很多涉及配置的地方,能够更加容易上手。
![00c6d39a9ba7ba414d76ece55ba89159.png](https://i-blog.csdnimg.cn/blog_migrate/7b7d8792bf51634c4399ada8201201e4.jpeg)
Web前端教程
1.安装与使用:
通过 npm、yarn、npx都可以
1> 安装
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
2> 使用
安装完成以后,即可使用create-react-app命令
create-react-app 项目名称
或者通过npx的方式
npx cerate-react-app 项目名称
2.项目目录结构说明:
运行命令以后,就会在运行命令所在的目录下面创建一个以项目名称为名的目录:
my-app/
README.md //主要是项目的说明文件,在里面写一些关于本项目的说明
node_modules/ //里面放的是项目依赖的第三方的包,这些包不是我们自己写的,是脚手架工具要实现自己的功能,需要依赖外部的一些第三方的包文件来实现
package.json //脚手架自动生成的一个文件,是一个node的文件,里面有一些项目的脚手架的版本,以及一些npm的命令
public/
index.html //项目首页的html模板
favicon.ico //图标
src/ //src里面放的是项目所有的源代码
App.css
App.js
App.test.js //自动化测试的文件
index.css
index.js //项目的入口文件
logo.svg
3.命令脚本:
create-react-app同时也提供了其它一些命令来帮助我们进行开发
1> npm start
启动一个内置的本地WebServer,根目录映射到 ’./public’目录,默认端口:3000
2> npm test
运行 Jest 测试
3> npm run build
打包应用(准备上线)
四、组件之状态与通信
在React.js中,定义一个组件的最简单的方式就是 函数
1> 函数式组件:
function Kaikeba() {
return (
开课吧!
);
}
ReactDOM.render(
,
document.getElementById('app')
);
// 函数的名称就是组件的名称,必须是首字母大写
// 函数的返回值就是组件要渲染的内容
2> 类组件:
class Miaov extends React.Component {
render() {
return (
妙味!
);
}
}
// 组件类必须继承 React.Component
// 组件类必须有 render方法
// render 方法的返回值就是组件要渲染的内容
// 类的名称(组件的名称),也必须是首字母大写
3> 组件复用 - 数据传入
使用组件的时候通过 标签属性 -property的方式传入数据,在组件内部通过构造函数参数(如果是函数组件,则通过函数参数)来接收传入的数据
// 使用表达式
ReactDOM.render(
,
document.getElementById('app')
);
4> 接收参数 -props
函数式组件:通过函数的第一个参数来接收;
类式组件:通过类的 props 属性接收;
无论是函数式组件还是类式组件,都会把传入的参数封装成一个对象
// 函数式组件:
// 函数创建的组件是无状态组件,没有state,没有生命周期方法,它是一种只负责展示的纯组件
function 组件名称(参数) {
// 参数的结构为:
参数 = {
属性名称1: "值1",
属性名称二: 表达式二的值
}
return
组件结构}
// 类式组件
class 组件名称 extends React.Component {
constructor(参数) {
super(参数);
this.props = {
属性名称1: "值1",
属性名称2: 表达式二的值
}
}
render() {
return
组件结构}
}
// 在类式组件中,需要注意:
// 1.当子类重写 constructor,则必须调用父类 super
// 2.把接收到的参数传入父类构造函数,父类构造函数中会创建一个对象属性:props 类存储传入的参数数据
5> 通过参数动态渲染组件结构
class FriendList extends React.Component {
constructor(props) {
super(props);
}
render() {
let {datas} = this.props;
return (
{Object.keys(datas).map((key, index) => (
{datas[key].title}
{datas[key].list.map((list, index) => (
{list}
)}
))}
);
}
}
6> 子组件提取
组件与类一样,是一个不断提取的过程,当我们发现某个部分可复用或者结构复杂的时候,我们可以对它再次进行提取
class FriendGroup extends React.Component {
constructor(props) {
super(props);
}
render() {
let {data} = this.props;
return (
{data.title}
{data.list.map((list, index) => {
{list}
})}
);
}
}
class FriendList extends React.Component {
constructor(props) {
super(props);
}
render() {
let {datas} = this.props;
return (
{Object.keys(datas).map((key, index) => (
))}
);
}
}
以上是酷仔今日整理的“Web前端教程:react脚手架create-react-app安装与使用”一文,希望为正在学习Web前端的同学提供参考。
特殊说明:以上资料由开课吧提供!