React-2-项目的创建

Create React App

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目

1.安装

npm安装 : npm i -g create-react-app
yarn安装 : yarn global add create-react-app

2.创建项目

安装完成以后，即可使用 create-react-app 项目名称(英文小写) 命令
npx创建项目：npx create-react-app 项目名称

3.启动项目

创建完成后,在项目目录下,npm start启动项目
启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

4.组件

对具有一定独立功能的数据和方法的封装,对外暴露接口,有利于代码功能的复用
组件分为函数组件和类式组件

5.事件

命名时,事件名首字母大写
不能通过返回false来阻止默认行为,必须使用preventDefault

事件中的this问题
class App extends Component{//类式组件中,定义constructor，一定要接受props,调用super()constructor(props){super(props)this.state = {nub:0,}}Fn(){console.log(this)   //this输出为undefined}fn=()=>{console.log(this)   //箭头函数才能找到this}render(){let {nub} = this.state;return (<div><p>{nub}</p><button onClick={this.fn}>+1</button></div>)}
}

React-2-项目的创建相关推荐

从零开始创建react+Django项目
环境准备 react项目的环境准备和配置参考(后面会需要修改react项目的一些配置,建议先了解): https://blog.csdn.net/sysukehan/article/details/1 ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
基于Node的Koa2项目从创建到打包到云服务器指南
一创建koa2项目二放到云服务器一创建koa2项目为了节省开发成本,本文采用koa-generator脚手架来创建koa2项目首先npm安装脚手架 $ npm install -g ko ...
React Native项目自动化打包发布
今天这篇文章的目的是在rn项目的构建,并不会涉及到rn框架或者使用的讲解,说起构建,特别是前端构建大家应该很快会想到webpack.Grunt. Gulp等.而这些工具在rn项目中就显得有些鸡肋.所以 ...
技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
从零学React Native之01创建第一个程序
上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Native项目了. 创建项目 ...
react前端项目_如何使用React前端设置Ruby on Rails项目
react前端项目 The author selected the Electronic Frontier Foundation to receive a donation as part of th ...
REACT实战项目从0到1搭建（仅供参考）
目录一.环境搭建 1.安装node.js 2.安装webpack 3.配置淘宝镜像(看个人需求) 4.安装create-react-app 5.创建项目 6.本地服务启动二.项目框架结构三.常用 ...