react的安装使用

react的重要思想是通过组件来开发应用，而组件就是能够完成某个特定功能而独立、可复用的代码。

react是可以像JQuery那样直接下载引入使用，也可以直接引用官网提供的CDN的地址：

另一个方法就是通过npm使用react，先安装node.js，虽然react开发中不依赖node.js。但是在开发过程中我们会用到很多的工具需要node支持。安装了node就安装了npm，开发过程中会用到很多现有的安装包，这时npm就起了很大作用。react是依赖于庞大的技术栈，例如转译JavaScript就需要依赖Babel，模块打包就用到了webpack,定制build用到了grunt等等技术，这些都是需要写配置文件的。Feacbook提供了一个快速开发React应用的工具，create-react-app。可以创建一个已完成基本配置的应用，快速进入开发（现在想体验一下React的魅力所在，快速进入开发React应用。后续再仔细学一下配置文件～_~）

安装create-react-app命令：

npm install -g create-react-app

执行该命令后，电脑便create-react-app的命令。现在就可以使用create-react-app命令创建一个目录了。

执行命令：

create-react-app project

在当前目录下就成功创建了project的目录，在目录中会自动下载一个应用的框架。create-react-app命令结束后执行以下命令：

cd project

npm start

这时会启动开发模式的服务器，同时浏览器自动开打开地址为：localhost:3000的网页

下次启动该项目时，直接切换到该项目所在目录执行命令：npm start 即可。

所创建应用的入口文件 src/index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import Click from './Click';//导入Click组件

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Click />, document.getElementById('root'));

registerServiceWorker();

渲染的是一个为 Click的组件，其中的import是ES6（EcmaScript 6）语法引入文件模块的方式，虽然有些浏览器尚未支持ES6，但是create-react-app已经把ES语法的JavaScript代码转译为所有浏览器都支持的ES5了。

转载于:https://www.cnblogs.com/duxingdexin/p/9545694.html

react的安装使用相关推荐

Vue及React脚手架安装
React npm i -g create-react-app create-react-app project React路由安装 yarn add react-router-dom Vue cnp ...
解决react在安装antd之后出现Module not found: Can't resolve './locale' in。。。的问题
React在安装antd之后出现Can't resolve './locale'in...问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在momen ...
react入门--------安装react
创建一个单页面应用 Create React App是开始构建新的React单页应用程序的最佳方式. 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的 ...
React：安装配置使用scss
目录前言: 1.暴露隐藏的webpack配置: 2.安装sass的相关包: 3.项目中新建一些scss文件: 4.在config文件夹中找到webpack.config.js文件,进行配置: 5.测 ...
react slick安装后引入css样式报错
使用react-slick是为了在使用react hook的同时更加方便的实现轮播图. 因为看到antd组件库的走马灯太简单,不好复制,所以自以为找到了cv的好途径. 但,我不知道的是react-sl ...
【React脚手架安装】用yarn命令：yarn create react-app myapp 显示错误：error Command failed.
目录问题解决办法问题安装React脚手架时使用yarn create react-app my app命令显示如下错误. engguilideMacBook-Pro:textApp zengg ...
react native 安装watchman flow
安装watchman-自动监听文件内容变化,刷新数据 brew install watchman 1 如果提示没有安装brew /usr/bin/ruby -e "$(curl -fsSL ...
react手脚架安装
第一步环境有 nodejs npm 全局安装环境变量 npm 修改全局安装路径查看当前环境npm config ls修改全局安装路径npm config set prefix "D:\P ...
React 脚手架安装
我是表哥Harker,表妹我来咯~ 历经千辛万苦来到了web开发阶段的最后一个部分,React脚手架的使用,时代在进步,现在的web开发不是以前那种用html+css写一个网页就行了,现在是高端型,写 ...

react的安装使用

react的安装使用相关推荐

最新文章

热门文章