jsx | 易学教程

React 学习记录(二)

阅读更多关于 React 学习记录(二)

JSX语法 jsx是应React的出现而出现的，由js和xml结合而成，遇"<"解析xml，遇"{"解析js,利用js来虚拟DOM，利用虚拟DOM Diff算法可以让用户毫无顾及的刷新页面。　　一、JSX注意要点　　　1.组件的首字母必须用大写，并且必须封闭，如：<Demo />或<Demo></Demo>；　　　2.已经构建好的组件内部无法使用if…else…语法，所以总结下来有两种if…else…的实现方式：　　　　2.1 改变组件的属性，可以根据条件使用三元运算符；　　　　2.2 根据不同情况加载不同的标签，则在构建组件的时候，通过在render方法内使用if…else…语法、调用方法的方式实现；　　 import React,{Component} from 'react' class DemoIf extends Component{ 　　constructor(props){ 　　　　super(); 　　　　this.state={ 　　　　　　name:props.name 　　　　} 　　} //构造函数　　render(){ 　　　　if(this.state.name=="cheny") 　　　　{ 　　　　　　return( 　　　　　　　　<div> 　　　　　　　　　　<h1>{3>8?"Hello KuGou":"Hello

&nbsp jsx not working

阅读更多关于 &nbsp jsx not working

I am using the &nbsp tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario: <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario: <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, }); omerts See: JSX In Depth Try: Select Scenario:{'\u00A0'} Or: <div dangerouslySetInnerHTML={{__html

Best way to build/compile/deploy ReactJS to production [closed]

阅读更多关于 Best way to build/compile/deploy ReactJS to production [closed]

I am new to reactJS, and am trying to understand what is the best way to deploy the code to production. As per the link below, I am building using babel as code below, but I was wondering if this is good, or are there any other best practices around deploying ReactJS to production: npm init -y npm install --save-dev babel-cli npm install --save-dev babel-preset-es2015 babel-preset-react babel --presets es2015,react --watch src/ --out-dir dist http://www.sitepoint.com/getting-started-react-jsx/ Here are my index.html and main.js files: index.html  <!DOCTYPE html> <html> <head

React基本概念

阅读更多关于 React基本概念

react起源于Facebook的内部项目（2013年5月开源） 1.特点： ①声明式设计：直接有返回值； ②高效； ③灵活； ④JSX*：是js语法的扩展，可以在js文件中书写html结构； ⑤单向响应的数据流：要改变state中的数据时，需要手动的使页面更新（利用this.setState，后面会介绍他的用法） ⑥组件：react中一切皆为组件之前的node.js是MVC框架，而Vue是MVVM框架（其实，如果没有Vuex那么Vue只是一个MV框架），而React则是一个不完整的MVC/MVVM框架； react中利用函数化/式编程：也就是说输入一个值，输出的结果是特定的；安装：cnpm install react react-dom -S（其中react用来书写jsx语法，react-dom用来解析jsx语法也就是渲染） import React from 'react'; import ReactDOM from 'react-dom'; import {HashRouter as Router ,Route} from "react-router-dom" ReactDOM.render( <Router> <Route path="/" component={App} /> </Router> document.getElementById('root'), ()

How can I attach to a stateless component's ref in React?

阅读更多关于 How can I attach to a stateless component's ref in React?

I am looking to create a stateless component who's input element can be validated by the parent component. In my example below, I am running into a problem where the input ref is never being assigned to the parent's private _emailAddress property. When handleSubmit is called, this._emailAddress is undefined . Is there something I'm missing, or is there a better way to do this? interface FormTestState { errors: string; } class FormTest extends React.Component<void, FormTestState> { componentWillMount() { this.setState({ errors: '' }); } render(): JSX.Element { return ( <main role='main'

Using async setState

阅读更多关于 Using async setState

I have function which dispatched an action. I would like to display a loader before and after the action. I know that react composing the object passed to setState . the question is how can I update the property in async way: handleChange(input) { this.setState({ load: true }) this.props.actions.getItemsFromThirtParty(input) this.setState({ load: false }) } Basically, it all worked great if I put this property as part of the application state (using Redux), but I really prefer to bring this property to the component-state only. Wrap the rest of your code in the callback of the first setState :

How to comment jsx code out in .js files in VSCode?

阅读更多关于 How to comment jsx code out in .js files in VSCode?

Unlike in webstorm, I'm unable to comment jsx code out in .js files in Visual Studio Code. You can comment out JSX by {/**/} Example : render() { return ( <div> <Component1 /> {/* <Component2 /> */} </div> ) } and then Component2 would be commented out Try to disable all plugins, because they can change editor's behaviour. For example if use Babel ES6/ES7 plugin, editor comments .jsx syntax by // instead of {/* . You see see the issue here . In Visual Studio code Hit Cmd + / if you are running on mac or place {/* Your Code */} Thank you. The keyboard commands... Ctrl + / - Windows & Linux Cmd

How to Call a Function inside a Render in React/Jsx

阅读更多关于 How to Call a Function inside a Render in React/Jsx

I want to call a function inside some embedded html. I tried the following but the function isn't called. Would this be the incorrect way of calling a function inside a render method? import React, { Component, PropTypes } from 'react'; export default class PatientTable extends Component { constructor(props) { super(props); this.state = { checking:false }; this.renderIcon = this.renderIcon.bind(this); } renderIcon(){ console.log("came here") return( <div>Function called</div> ) } render() { return ( <div className="patient-container"> {this.renderIcon} </div> ); } } To call the function you

How do I make an HTTP request in react-redux?

阅读更多关于 How do I make an HTTP request in react-redux?

I am just getting started with react and I'm a bit lost. I'm trying to make a login page and make a http post request. Right now I'm just trying to get any type of HTTP request working, so I'm using request bin and I found this basic action in the docs for an npm package ( https://www.npmjs.com/package/redux-react-fetch ): export function updateTicket(ticketId, type, value){ return { type: 'updateArticle', url: `http://requestb.in/1l9aqbo1`, body: { article_id: ticketId, title: 'New Title' }, then: 'updateTicketFinished' } } So, after writing an action, what do I do? How do I actually get my

Visual studio code changes format (React-JSX)

阅读更多关于 Visual studio code changes format (React-JSX)

I've the following snippet in my index.js class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } The code works, but every time I save (ctrl+s) visual studio format the jsx like that: class App extends Component { render() { return ( < div style = { styles.app } > Welcome to React! < /div> ) } } How can I solve this? thanks omer727 In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar. I'm publishing it here for future reference since I didn't find any documentation on this

订阅 jsx