react
内推锦鲤
前端工程师
展开
-
reactx学习笔记1--JSX介绍
const element = <h1>hello, world</h1> javascript的一种扩展语法 const name = 'josh perez'; const element = <h1>hello,{name}</h1> //用花括号把havascript表达式嵌入到JSX中 ReactDOM.render原创 2018-07-09 18:24:39 · 1766 阅读 · 0 评论 -
react学习笔记2--元素渲染
元素是react应用中最小的构建块 元素不同于组件 要渲染一个react元素到一个DOM节点,把他们传递给ReactDOM.render()方法 const element = <h1>hello,world</h1>; ReactDOM.render(element,document.getElementById('root')); react元素是不可突变的...原创 2018-07-09 18:27:57 · 126 阅读 · 0 评论 -
react学习笔记3--组件和属性
组件可以接收任意的输入(成为“props)并返回react元素 函数式组件和类组件,最简单的定义组件的方法是定义一个JavaScript函数 function welcome(props) { return &lt;h1&gt;hello,{props.name}&lt;/h1&gt;; } 这就是一个react组件,接收一个props参数,返回一个react元素 也可以用一个...原创 2018-07-09 18:28:46 · 128 阅读 · 0 评论 -
react学习笔记4--状态和生命周期
学习使用clock组件使代码可复用,从封装时钟开始: function Clock(props) { return( <div> <h1>hello,world</h1> <h2>it is {props.date.toLocaleTimeString()}</h2&...原创 2018-07-09 19:17:26 · 162 阅读 · 0 评论 -
react学习笔记5--处理事件
react元素处理事件和DOM元素非常相似,但是有语法上的差别 react事件以驼峰式命名,而不是小写 //html <button onclick="activateLasers()"> activate Lasers </button> //react <button onClick={activateLasers}> acti...原创 2018-07-10 09:14:49 · 128 阅读 · 0 评论 -
react学习笔记6--条件渲染
function UserGreeting(props) { return <h1>welcome back</h1>; } function GuestGreeting(props) { return <h1>pls. sign up</h1>; } function Greeting(props) { const isL...原创 2018-07-10 09:57:57 · 189 阅读 · 0 评论 -
react学习笔记7--列表和键
渲染复杂组件 const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getEl...原创 2018-07-10 11:01:41 · 144 阅读 · 0 评论 -
react学习笔记8--表单
react处理表单的正确方法是利用控制组件 在html中表单元素通常保持自己的状态并根据用户输入进行更新,而在react中,可变状态一般保存在组件的state属性中,并且只能通过setState()更新 使react的state成为单一数据源原则,渲染表单的react组件,可以控制用户输入之后的行为 class NameForm extends React.Component {...原创 2018-07-10 11:43:08 · 138 阅读 · 0 评论 -
react学习笔记9--状态提升
通常情况下,同一个数据的变化需要几个不同的组件来反映,提升共享的状态到他们最近的祖先组件中。 function BoilingVerdict(props) { if(props.celsius >= 100) { return <p>the water would boil.</p> } else { return...原创 2018-07-10 14:35:29 · 156 阅读 · 0 评论