react 入门教程

最新推荐文章于 2024-09-13 15:06:03 发布

qq_42574821

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量652

点赞数 1

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_42574821/article/details/110118665

版权

这篇React入门教程介绍了如何创建React项目，搭建工作环境，编写第一个React程序，包括Hello, React!和无序列表的实现。接着详细讲解了React组件的创建、事件绑定和数据管理，并通过TodoList案例展示了组件化编程和代码优化。" 113581498,10544192,Stata图形格式与坐标轴选项详解,"['stata使用', '统计图形', '数据可视化', '图形定制']

摘要由CSDN通过智能技术生成

文章目录

前言
一、创建一个react项目
二、搭建React工作环境
二、第一个React程序：Hello，React！
- - 1.hello react
  - 2.利用react实现一个无序列表（demo）
三、React组件
案例 TodoList

前言

react 学习总结

一、创建一个react项目

创建一个react项目，首先先安装好node.js

npm install -g create-react-app  /*搭建一个全局的脚手架*/
create-react-app my-demo        /*创建项目 my-demo是项目名字*/
cd my-demo                      /*进入目录 然后启动*/
npm start

二、搭建React工作环境

React的核心库：react.development.js
React进行Dom操作的库：react-dom.development.js
将JSX语言转换为JavaScript语言：babel.min.js

== 如果我们将所有的React代码都书写在HTML文档中，则页面的启动不需要服务器。
如果我们将所有的React代码都书写在独立的js文件中，则页面的启动需要服务器。==

平时自己练习demo可以这样写：

 <script type="text/javascript" src="js/react.development.js"></script>
 <script type="text/javascript" src="js/react-dom.development.js"></script>
 <script type="text/javascript" src="js/babel.min.js"></script>
 <script type="text/babel" src="js/index.js"></script>

二、第一个React程序：Hello，React！

1.hello react

1. React的核心方法：

  ReactDOM.render(JSX代码,DOM Node)
  功能：将JSX代码生成的HTML节点放入指定的DOM节点中。

 ReactDOM.render(
	    <h1>Hello,React!</h1>,
	document.getElementById(“app”)
	    )

2. JSX代码必须具备一个根据节点。
3. JSX是HTML和JavaScript语言的混合
（1）HTML代码必须用 < > 扩住。
（2）JavaScript代码必须用 { } 扩住。
在HTML代码中嵌入的JavaScript代码必须是一个数组。

2.利用react实现一个无序列表（demo）

例：做一个数组，在页面中利用React技术将数组元素渲染为一个无序列表

 let list=[‘张三’,‘李四’,……];
    ReactDOM.render(
      <div>
         <ul>
          {
   
	          list.map(item=>{
   
	             return <li>{
   item}</li>
	          })
	       }
        </ul