React 新手随笔

一、HTML 模板

使用 React 的网页源码,结构大致如下。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>上面代码有两个地方需要注意。首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。上面命令可以将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。
时间: 2024-12-13 21:51:23

React 新手随笔的相关文章

react新手demo——TodoList

react-todolist.gif 一: 写在文章开头 今天我们就使用 react 来实现一个简易版的 todolist ,我们可以使用这个 demo 进行 list 的增删改差,实际效果如上图所示.大家可以clone下来查看:react-todolist 这篇文章我们就不使用 redux,因为这个 demo 本身比较简单,不需要通过 redux 来管理我们的状态. redux中也有非常有名的一句话叫做: "如果你不知道是否需要 Redux,那就是不需要它." 我们废话不多说,直接进

React学习随笔

一.在非create-react-app创建的项目,使用JSX需要注意的问题 1.1 入门的时候,要引入Babel,并将<script>标签加上type='text/babel'的属性. 1.2 将JSX引入项目,需要安装node.js, 第1步:运行npm init -y 第2步:运行npm install [email protected] [email protected] 安装完成后,运行 npx babel --watch src --out-dir . --presets reac

react新手报错日记

问题1  Uncaught TypeError: Super expression must either be null or a function, not undefined 如果碰到这个问题不要去百度了,先狠狠的打自己一顿起,因为你是单词写错了,出现这个问题百分之99.99是因为单词写错了,反正我是把Component写成了Compontent 后续更新

[转] React 最佳实践——那些 React 没告诉你但很重要的事

前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中文“ React 最佳实践”发现前两页几乎全都是同一篇国外文章的译文...所以我总结了下自己过去那个项目使用 React 踩过的一些坑,也整理了一些别人的观点,希望对部分 react 使用者有帮助. React 与 AJAX React只负责处理View这一层,它本身不涉及网络请求/AJAX,所以这

react 父组件向子组件传递函数

这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以写点东西了.(react 新手,仅仅参考) 1.react一开始我更理解为是一个各种代码片段,由于之前接触了一段时间meteor,感觉有点相似.在使用之前都要在app.js中将一总的父组件通过import导入,另外在route中的path中写入链接 例如:import createHistory f

http://www.html-js.com/article/2328

React.js编程思想 张小俊128 发布在使用React.js开发web应用2015年8月7日view:33385React 在文章任何区域双击击即可给文章添加[评注]!浮到评注点上可以查看详情. 隐藏标注 React.js编程思想 JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型.快速的Web应用的最好方式.这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色. 使用React.js的好处多多,但是其中

react native新手学习之路03真机调试

React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi环境下. 打开AwesomeApp/ios/AwesomeApp/AppDelegate.m修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. eg: jsCodeLocation = [NSURL URLWithString:@"

新手学习 React 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言. 为什么要引入 React 在写 React 的时候,你可能会写类似这样的代码: import React from 'react' function A() {

前端新手如何搭建webpack+react的开发环境

步骤: 首先保证有node 和 npm环境.运行node -v 和npm -v查看版本号来确定 注意: 初始化npm环境并安装插件: 没有项目:想在Window命令下创建项目 有项目:cd 到相应的项目 进入之后,运行npm init (初始化)按照步骤依次确认 yes 最终生成package.json文件. 所有使用npm做的依赖管理项目,根目录下都会有一个这个文件,该文件 描述了项目的基本信息以及一些第三方依赖插件 安装插件 使用 webpack 作为构建工具,需要安装相应插件,运行 npm