好资源导航 » 文章资讯 » react基本安装与测试示例

react基本安装与测试示例

2023-07-26 14:58:04 75

本文实例讲述了react基本安装与测试。分享给大家供大家参考，具体如下：

语法特点：

声明式编码：只在意结果不在意过程

组件化编码：html,css,js的集合

单向数据流：vue也是单向数据流，有一个双向绑定功能。

支持服务器端编写

高效：先生成一个虚拟DOM，然后在DOM中操作，再一次性返回到真实界面

首先安装好node.js和npm

安装Webpack：npminstall-gwebpack

安装对应的loader:npminstallbabel-loader--save-de

安装react

$npminstall-gcreate-react-app
$create-react-app
$create-react-appreact-dom
$cdreact-dom
$npmstart

安装babel

$npminstallbabel-g

babel-min.js包安装

引入node-modules/babel-standalone/babel-min.js

npminstallbabel-standalone--save

测试:





hello

constres=

helloworld!

//虚拟domjsx ReactDOM.render(res,document.getElementById('app')) //jsx语法规则 conststr='helloworld' constres=

{str}

//虚拟dom[jsx]jsx里要解析js代码，js代码必须写在{}里,遇到<>开头的代码以标签解析，html同名的转换html元素。 ReactDOM.render(res,document.getElementById('app')) //列表foreach letlis=[]; letnames=['张一','李二','王三','赵四']; names.forEach((name,key)=>{ lis.push({name}) }); constvul=

{lis} ; //列表map letnames=['张一','李二','王三','赵四']; constvul=

{name} }) }

ReactDOM.render(vul,document.getElementById('app')) //原生js创建jsx varmsg='hello'; varres=React.createElement('h1',{id:'myDiv'},msg); ReactDOM.render(res,document.getElementById('app'))

希望本文所述对大家react程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com