学好React的必经之路

2023-10-19 23:59
文章标签 react 学好 必经之路

本文主要是介绍学好React的必经之路,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

起源

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了

react综述

解释:react构建用户界面的javascri库
特点:
1.虚拟dom节点
2…单向数据引流
3.组件开发思维
公司: facebook

安装

安装脚手架 npm i -gcreate-react-app
创建项目 creact-react-app 项目名称

脚手架命令

运行项目
切换到项目目录 npm run start
打包项目 num run build
暴露配置文件 npm run eject

目录结构

在这里插入图片描述

src结构

在这里插入图片描述

jsx语法

在这里插入图片描述

import "./App.css";const arr = [<p>你好react</p>, <p>哈哈哈哈哈哈</p>, <p>开始吧</p>];
const str = {fontSize: "50px",color: "red",
};function App() {return (<div><h1 className="mycl">你好react</h1>{arr}{/* <p style={str}>你好大大拐</p> */}</div>);
}
export default App;

渲染

const str = "你好react";
const msg = "还是<b>html</b>好用";const scc = 80;
let flag = true;
function App() {return (<div><h1>03条件渲染 (三元运算符,&&)</h1><p>{scc >= 60 ? "及格" : "再学一遍"}</p>{flag && <p>芝麻开门</p>}<h1>模板语法</h1><p>01文本渲染</p><p>{str}</p><p>{2 + 3}</p><p>{str.split("").reverse().join("")}</p><p>2 html渲染</p><p dangerouslySetInnerHTML={{ __html: msg }}></p><p dangerouslySetInnerHTML={{ __html: msg }}></p></div>);
}export default App;

事件

function App() {function sya(str) {alert("你好啊" + str);}return (<div><h1>事件</h1><p>react 事件与js事件一致,需要驼峰写法</p><buttononClick={() => {alert("我好中意你");}}>{" "}按钮</button><button onClick={sya}>按钮</button><button onClick={sya.bind(this, "沙雕")}>按钮</button><buttononClick={() => {sya("西巴");}}>按钮</button></div>);
}
export default App;

函数类

function App() {function sya(str) {alert("你好啊" + str);}return (<div><h1>事件</h1><p>react 事件与js事件一致,需要驼峰写法</p><buttononClick={() => {alert("我好中意你");}}>{" "}按钮</button><button onClick={sya}>按钮</button><button onClick={sya.bind(this, "沙雕")}>按钮</button><buttononClick={() => {sya("西巴");}}>按钮</button></div>);
}
export default App;

这篇关于学好React的必经之路的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/243221

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证

1.通过props实现父组件像子组件传值 、方法、甚至整个父组件 传递整个父组件则   [变量名]={this} import Header from "./Header"render(){return(<Header msg={"我是props传递的数据"}/>)} import React,{Component} from "react";class Header extends

react笔记 8-21 约束性 表单

1、约束性组件和非约束性组件 非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件<input type="text

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注

react笔记 8-16 JSX语法 定义数据 数据绑定

1、jsx语法 和vue一样  只能有一个根标签 一行代码写法 return <div>hello world</div> 多行代码返回必须加括号 return (<div><div>hello world</div><div>aaaaaaa</div></div>) 2、定义数据 数据绑定 constructor(){super()this.state={na

2021-8-14 react笔记-2 创建组件 基本用法

1、目录解析 public中的index.html为入口文件 src目录中文件很乱,先整理文件夹。 新建components 放组件 新建assets放资源   ->/images      ->/css 把乱的文件放进去  修改App.js 根组件和index.js入口文件中的引入路径 2、新建组件 在components文件夹中新建[Name].js文件 //组件名首字母大写

2021-08-14 react笔记-1 安装、环境搭建、创建项目

1、环境 1、安装nodejs 2.安装react脚手架工具 //  cnpm install -g create-react-app 全局安装 2、创建项目 create-react-app [项目名称] 3、运行项目 npm strat  //cd到项目文件夹    进入这个页面  代表运行成功  4、打包 npm run build