react学习-快速起步

本文介绍了三种快速写react代码的方式，并介绍了JSX的使用方法，你可以通过本文介绍的内容快速上手写react代码。

概述

react是一个用于构建用户页面的javascript库，相比vue来说，它的口号要低调一些：它是一个库，而vue是一个框架。

vue是一个渐进式javascript框架

React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了 完整的 M 和 C 的功能。

React 起源于 Facebook 的内部项目，后又用来架设 Instagram 的网站，并于 2013 年5月开源。

特点
官网上说明的三个特点：

• 声明式 。你需要描述UI是什么样，就跟写HTML一样，例如，如下：

const jsx=<div><h1>{count}</h1></div>

• 组件式。组件化开发。
• 一次学习，随处编写（学习了React就可以跨平台ios,andrid的开发）

随意找个地方写代码

新建一个空目录，自已取好名字。假设目录名为demo。

1. 初始化项目。
   进入到demo目录下，通过npm init --yes来创建一个package.json文件。
2. 安装依赖

npm i react react-dom 

3. 在demo下创建文件01.html

<div id="app"></div>
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script>
    // React.createElement(要创建的React元素，属性, 子节点1，子节点2....)
    // ReactDOM.render(要渲染的React元素, DOM对象) 
    const p = React.createElement('p', null, 'p标签')
    const div = React.createElement('div', { className: 'test' }, 'hello React', p)
ReactDOM.render(div, app)
</script>

4. 通过浏览器打开01.html查看效果。

最后的结构如下：

通过脚手架创建项目来写代码

命令npx create-react-app my-app 。
create-react-app是一个类似于vue-cli的脚手架工具，它会花一段时间来帮你创建一个完整的项目。

在云上写代码

你可以在这个https://stackblitz.com/网站上写代码，使用github帐号授权登陆后，你创建的项目，写的代码将会保存在你的github上。

写页面的正确方式JSX

采用React.CreateElement()的方式创建页面不直观，更推荐采用JSX来写页面。

1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3. create-react-app 脚手架中已经默认有该配置，无需手动配置。

注意: JSX是React.createElement方法的语法糖

验证效果：

• 在https://react.docschina.org/ 中可以观察JSX的切换效果
  
• 在https://www.babeljs.cn/repl中写jsx查看编译效果
  

使用注意

1. React元素的有些属性名使用小驼峰命名法。特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
2. 声明的jsx元素，只能有一个根元素。
3. 推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。

  // 使用小括号包裹 JSX 
  const dv = ( 
    <div>Helo JSX</div> 
  ) 

在JSX中使用js表达式

嵌入 JS 表达式

• 数据存储在JS中
• 语法：{ JavaScript表达式 }

注意：语法中是单大括号，不是双大括号！

  const name = 'Jack' 
  const div = ( 
    <div>你好，我叫：{name}</div> 
  ) 

使用注意

示例

const str = 'jsx'
function f() {
  return 2000
}
const span = <span>{[1,2,3]}-{str + 1200} - {f()} - {f() ? 'ok' : 'error'} - {<i>i</i>}</span>
const h1 = React.createElement('h1',null, 'h1的内容', span)
ReactDOM.render(
  h1,
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>,
  document.getElementById('root')
);

单大括号中可以使用任意的 JavaScript 表达式:

• 值
• 变量
• 函数调用
• 三元运算符
• 数组(基本类型，jsx)）
• JSX 自身也是 JS 表达式
• 注意：不能在{}中出现语句和对象（比如：if/for，{a:100} 等）

示例

const loadData = () => {
	if(isLoading) {
		return <div>loadin....</div>
	}
	return ()
}

jsx列表渲染

数组的map方法是有返回值的，其值也是数组。

const songs = [ 
  {id: 1, name: '野狼disco'}, 
  {id: 2, name: '像我这样的人'}, 
  {id: 3, name: '桥边姑娘'}, 
] 
const list = ( 
  <ul> 
    {songs.map(item => <li key={item.key}>{item.name}</li>)} 
  </ul> 
)
ReactDOM.render(
  list,
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>,
  document.getElementById('root')
);

注意：

• 如果要渲染一组数据，应该使用数组的 map() 方法
• 渲染列表时应该添加 key 属性，key 属性的值要保证唯一 ，尽量避免使用索引号作为 key !
• 原则：map() 遍历谁，就给谁添加 key 属性

JSX样式处理

行内样式-style

style属性{{属性:值}}

<h1 style={{ color: 'red', backgroundColor: '#eee' }}> 
  JSX的样式处理 
</h1> 

类名-className(推荐)

属性名小驼峰命名

<h1 className="title"> 
 JSX的样式处理 
</h1> 

(完)