第一天--React基础使用

最新推荐文章于 2024-07-18 09:44:02 发布

原创最新推荐文章于 2024-07-18 09:44:02 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

React Native学习记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍React的基础知识，包括搭建React环境、使用JSX语法以及创建基本的React组件。

React基础:

一:模板套路:

(1)桌面上新建文件夹,Hello React

(2)必须在文件夹下添加build文件夹,这个文件夹里面是js文件

把文件夹添加到开发工具中,新建index.html

在其中添加模板代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title></title>
	<!--react.js是React的核心库-->
	<script src="./build/react.js" charset="utf-8"></script>
	<!--react-dom.js的作用是提供与DOM相关的功能-->
	<script src="./build/react-dom.js" charset="utf-8"></script>
	<!--browser.min.js的作用是将JSX语法转换成javaScript语法-->
	<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
  <!--React渲染的模板内容会从插入到这个DOM节点中,作为一个容器-->
  <div id="container">
  	
  </div>
</body>
<!--在React开发中,使用JSX,跟JavaScript不兼容,在hi用JSX
的地方,要送和值type:text/babel-->
<!--babel是一个转换编辑器,ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">
	
	<!--在此处编写React代码-->
	
</script>
</html>

下面写一个Demo:

//需求:渲染一行标题,显示"Hello React"

ReactDOM.render()

React的最基本方法:用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中

3个参数

第一个:模板的渲染内容(HTML形式)

第二个:这段模板需要插入的DOM节点(本程序中,是id为container的div节点)

第三个:渲染后的回调,一般不用

ReactDOM.render{
    <h1>Hello React</h1>,
    document.getElementById("container")
};

二:JSX语法:

JSX入门:

JSX不是一门新的语言,是个语法.

//1,JSX必须借助React环境运行

//2,JSX标签其实是HTML标签,只不过我们在JavaScript中写这些标签的时候,不用使用""括起来.

//可以向XML一样书写

eg:

ReactDOM.render{
    <h1>
       Hello React
    </h1>,
    document.getElementById("container")
};

//3,转换:JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行的,最终会转化成JavaScript代码在浏览器上运行.

eg:

ReactDOM.render{
   React.createElement("h1",null,"Hello React"),
   document.getElementById("container")
};

//4,在JSX运行JavaScript代码.

//使用{}括起来 {表达式}

eg:

var text = "蓝鸥";
ReactDOM.render{
    <h1>{text}</h1>,
    document.getElementById("container")
};

三:组件<基本定义部分>:

新建工程:Component(组件),把build,和index.html模板放进去

创建一个组件类,用于输出Hello React

1,React中创建的组件类以大写字母开头,驼峰命名

2,在React中使用React.createClass方法创建一个组件类

3,核心代码:每个组建类都必须实现自己的render方法,输出定义好的组件模板,返回值:null,false,组件模板

4,注意:组件类只能包含一个顶层标签

eg:

var HelloMessage = React.createClass({
   render:function(){
      return <h1>Hello Reader</h1>
}
});
/*在下面进行渲染这个组件类*/
React.render{
 /*在模板中插入<HelloMessage />会自动生成一个实例*/
  <HelloMessage />,
  document.getElementById("container")
};