react创建新项目 使用creat-react-app快速新建一个react项目

react

Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。

React 教程

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。


React 特点

  • 1.声明式设计 −React采用声明范式,可以轻松描述应用。

  • 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

  • 3.灵活 −React可以与已知的库或框架很好地配合。

  • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

  • 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

由于react-app" title="create-react-app">create-react-app命令预先安装和配置了webpack和babel,同时也初始化了npm(可以通过npm init来初始化,初始化完会有一个package.json文件,专门来说明你的项目的一些基本信息和可以设置npm自定义命令),所以有几个自定义npm命令:

一、如何安装

1、首先确保已经安装 node.js,可以到node.js官网 https://nodejs.org/en/ 下载安装包,下载好后傻瓜式一步安装到位。

2、按照如下步骤进行安装,推荐使用gitBush命令行工具

(1)npm install -g create-react-app      全局安装

(2)create-react-app reactproject       新建并对react项目进行命名(注:项目名称不能有大写)

(3)cd reactproject                             通过命令进入文件夹内部,准备运行项目

(4)npm start                                     运行项目

3、通过以上命令就可以快速构建一个react项目,此时在地址栏中输入  http://localhost:3000/ 就能看到我们的项目了

此时看到的项目结构如下

4、可以看到项目中,没有webpack的相关配置,因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置,可以使用命令 npm run eject把webpack文件暴露出来,这个操作是不可逆的。

此时我们的项目中就会有webpack的相关配置了

--------------------- 项目启动效果图

------------------------------推荐案例

react-douban 仿豆瓣电影app项目

A React.js project 一个基于React.js仿豆瓣电影项目,使用react-router、webpack、redux等技术, 数据来源 https://api.douban.com/ 包含左右滑动,上拉加载更多等功能

https://github.com/chenshaomei/react-douban

使用NodeJs+MongoDB+React+ES6+jQuey+Webpack搭建的豆瓣电影音乐网站

https://github.com/Loogeek/douban-React

基于 React 的 超高仿 SPA 版豆瓣电影

https://github.com/fi3ework/react-douban-movie

更多前端学习资料,请关注【H5开发社区公众号】

以上是 react创建新项目 使用creat-react-app快速新建一个react项目 的全部内容, 来源链接: utcz.com/z/383537.html

回到顶部