react脚手架_react脚手架create-react-app安装与使用

create-react-app是用于搭建react项目的脚手架。它的优势在于省略了很多涉及配置的地方，能够更加容易上手。

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前端的同学提供参考。

特殊说明：以上资料由开课吧提供！