React笔记（一）--第一个React代码

最新推荐文章于 2024-07-31 21:39:36 发布

erdouzhang

最新推荐文章于 2024-07-31 21:39:36 发布

阅读量1.3k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/erdouzhang/article/details/55511078

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇文章是怎么顺利运行第一个react代码。
最好的学习资源：阮一峰的React 入门实例教程
 react中文网
准备工作：node环境、全局安装bower、安装git
step1.

在桌面建项目文件夹
打开命令黑窗口，cd切换到项目文件夹内。

bower install react     安装react
bower install babel     安装jsx解释器

两个都安装好之后，在项目文件夹中会有一个bower_components文件夹包含react和babel文件夹。
用sublime打开项目文件夹→建index.html文件→在body里最下面引入三个js文件。

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/babel/browser.min.js"></script>

如果要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel即为：
<script type="text/babel">js代码</script>

react.js - React 的核心库，主要包含了React的相关方法的定义
react-dom.js - 提供与 DOM 相关的功能，是将我们定义的组件插入到html文档中
browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello React</title>
    <script  src="bower_components/react/react.js"></script>    
    <script  src="bower_components/react/react-dom.js"></script>
    <script  src="bower_components/babel/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>