React入门/初学者

最新推荐文章于 2024-09-13 15:06:03 发布

没用的阿吉X

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量251

点赞数

文章标签： reactjs 前端

本文链接：https://blog.csdn.net/mxjthl/article/details/105409057

版权

React

React是一个用于用户界面地JAVASCRIPT库

React主要用于构建UI，很多人认为React是MVC中地V视图

React起源于Facebook的内部项目，用来架设Ins谈gram的网站，并于2013年开源

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

React特点

1.声明式设计-React采用声明范式，可以轻松描述应用

2.高效-React通过对DOM的模拟，最大限度地减少与DOM的交互

3.灵活-React可以与已知的库或框架很好的配合

4.JSX-JSX是JavaScript语法的扩展,React开发不一定使用JSX，建议使用

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

6.单向响应的数据流-React实现了单向的数据流，从而减少了重复代码，因此比传统数据绑定更简单

React 安装

1.React可以下载直接使用

点击React官网前往下载最新版

2.使用CDN库

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>//React核心库
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>//提供与DOM相关的功能
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

React实例

如果需要使用JSX，则<script>的type属性需要设置为text/babel

<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
//将h1标题插入到example节点中
    document.getElementById('example')
);
</script>
 
</body>

通过 npm 使用 React

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

也可以使用cnpm命令工具代替默认的npm(较快)点击查看淘宝镜像

cnpm install [name]

使用create-react-app快速构建React开发环境

create-react-app是来自Facebook，通过该命令我们无需配置就能快速构建react环境

createa-react-app自动创建的项目是基于Webpack +Es6

创建项目

cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

完成之后在浏览器打开localhost:3000运行结果如下:

没用的阿吉X

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫