一、React简介
1、React是Facebook开发的一款JS库。
2、React一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jquery、Backbone等。
3、它可以在浏览器端运行,也可以通过nodejs在服务端渲染。
4、React的思想非常独特,性能出众,可以写出重复代码少,逻辑清晰的前端代码。
5、React的语法是jsx,通过使用这种语法,可以在react代码中直接混合使用js和html来编写代码,这样代码的逻辑就非常清晰,当然也意味着,需要将jsx代码编译成普通的javascript代码,才能在浏览器中运行,这个过程根据实际项目情况,可以选择多种不同的思路,或者在服务器端通过webpack进行编译。
1、 声明式设计 -React采用声明范式,可以轻松描述应用。
2、以组件的方式开发
3、使用特殊的jsx(JavaScript XML)语法
4.、高效 -React通过对DOM的模拟使用了虚拟DOM,最大限度地减少与DOM的交互
TypeScript
<div>
{ this.state.s.title }
<ul>
{
this.state.list.map((item,index)=>{
return <li key={ index } > { item } </li>
})
}
</ul>
</div>
JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。
React的优点有哪些:单向数据流、兼容性好、速度快!
二、项目结构
TypeScript
├─ myreactapp
├─ README.md
├─ package-lock.json
├─ package.json
├─ public
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ logo192.png
│ ├─ logo512.png
│ ├─ manifest.json
│ └─ robots.txt
└─ src
├─ App.css
├─ App.js
├─ App.test.js
├─ index.css
├─ index.js
├─ logo.svg
├─ reportWebVitals.js
└─ setupTests.js