前端react基础基础学习 (一)

1.安装

npm i -g create-react-app

2.创建项目骨架

create-react-app

react 组件创建方式

1.箭头函数的方式

/ 第一种创建react组件的方式，箭头函数, 调用的时候，可以直接使用xml语法 <App 在这里通过属性和值的方式来传递参数，如: id={123} />

const App = (props) => {// 注意这里如果是多行，必须用 小括号 小括号 小括号return (<div id="app"><h1>Hello {props.id} {props.name}</h1>{dateEle}</div>)
}

2.class的方式

第二种创建react组件的方式，使用es6的class, 继承 React.Component

// 在调用的时候，实际上就不再使用函数式的来执行函数，而是new了一个实例出来，所以在获取参数的时候，需要使用this.props.xxxx

class App extends React.Component {render() {const {id,name} = this.propsreturn (<div id="app"><h1>hello {id} {name}</h1></div>)}
}

3.插值

<div data-id={id} >{/* 在jsx的语法中，如果想要再插入js, 就需要加{} */}<h1>你好，{name}, {125 * 2}</h1></div>

4.引入用improt 导出用export

目录结构

子组件放在components目录下，每个组件就是一个文件夹，在下方创建js；

在components下创建一个index.js 用来导出所有组件，

export { default as Header } from './Header'
export { default as List } from './List'
export { default as MyInput } from './MyInput'

引入时，

import {Header,Todolist,Todoitem
} from './components'

时，

import {Header,Todolist,Todoitem
} from './components'

前端react基础基础学习 (一)相关推荐

前端React框架基础语法
一.ReactDOM.render()方法 ReactDOM.render()方法是React框架中最最最基础的方法,这个方法的作用是将模板转化为HTML的语法,然后插入到指定的 DOM 节点中. & ...
React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点是React最重要的一个特性放进内存最小更新的视图,差异部分更新 diff算法 ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
零基础怎么学习web前端开发
零基础怎么学习web前端开发?web前端在移动互联网行业的运用是非常广泛的,而且web前端开发技术所涵盖的知识有很多,具体要怎么学习,来看看小编下面的详细介绍吧. 零基础怎么学习web前端开发?对零基 ...
零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...
android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
一个真正0基础小白学习前端开发的心路历程
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
java webpack web项目_零基础如何学习web前端，入门教程分享
前端作为互联网时代直接触达用户的窗口,大到我们每天浏览到的网站,小到一次点击按钮的页面,前端无处不在.并且在产品的众多开发环节之中,最能让用户直观感受到的就是前端开发.因而前端行业的广阔发展前景也吸引 ...
零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...

前端react基础基础学习 (一)

前端react基础基础学习 (一)

前端react基础基础学习 (一)相关推荐

最新文章

热门文章