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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部