jsx | 易学教程

“Uncaught TypeError: React.createClass is not a function” in Render.js file (electron app)

阅读更多关于 “Uncaught TypeError: React.createClass is not a function” in Render.js file (electron app)

问题 I'm new to react.js and I am trying to get this code to replace one line in an html file inside an electron app with whatever is in return inside the MainInterface variable This is my Render.js File var React = require('react'); var ReactDOM = require('react-dom'); var $ = jQuery = require('jquery'); var bootstrap = require('bootstrap'); //var createReactClass = require('create-react-class'); var MainInterface = React.createClass({ render: function() { return( <h1>SUCCESSSSSSSSSSS</h1> ); }/

react + webpack安装配置

阅读更多关于 react + webpack安装配置

使用CDN库方式 <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> react.min.js React核心库 react-dom.min.js 提供DOM相关的功能 browser.min.js 用于将JSX语法转为javascript语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react

基于webpack接入React包安装

阅读更多关于基于webpack接入React包安装

在使用babel的项目中接入React 框架很简单，只需要加入React所依赖的Presets babel-preset-react. 安装react, react-dom, webpack 在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。 npm install react react-dom --save-dev npm install webpack --save-dev index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> /* react DOM*/ </div> <script src="bundle.js"></script> </body> </html> index.js import React, { Component } from 'react'; import { render } from 'react-dom'; render( <div>Hello React!</div>, document.getElementById('app') ); webpack-config.js

What is the best way to have variable attributes in JSX?

阅读更多关于 What is the best way to have variable attributes in JSX?

问题 Hopefully my question is clear, I'm mainly looking for a way to dynamically attach attributes to a JSX input. <input type="text" {variableAttribute}={anotherVariable} /> Is something like this possible without overriding the way JSX compiles to JS to regular HTML? 回答1: You can initialize an object with a computed property name, and then use JSX Spread Attributes to convert it to attribute: const DemoComponent = ({ variablePropName, variablePropValue }) => { const variableAttribute = {

React JSX error : Unclosed regular expression

阅读更多关于 React JSX error : Unclosed regular expression

问题 Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic: This error was also showing error like: 1. Unclosed regular expression How to solve this? 回答1: I tried several options like creating a .eslintrc file or .jshintrc file. But it turned out that in my Visual Studio Code IDE, there was third party

How to pass actions down to the components in redux

阅读更多关于 How to pass actions down to the components in redux

I want to fire an action down in my component. This is a presentation component and need not be redux aware. Router implementation is done using react-router-redux. main.js: let store = createStore(rootReducer) const history = syncHistoryWithStore(hashHistory, store) class RenderClass extends Component { render() { return ( <Provider store={store}> <Router history={history}> <Route path="/" component={MainLayout}> <Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route> <Route name="personalInformation" path="/personalInformation/:employeeId"

React native Airbnb Markers: Markers successfully disappear, but do not re-appear

阅读更多关于 React native Airbnb Markers: Markers successfully disappear, but do not re-appear

I am currently building an app with react-native and am using the Airbnb maps plugin to dynamically display markers. My markers are downloaded from the firebase database successfully, and the array that is downloaded always shows the correct contents. I have the full code here just in case https://codepen.io/yeni/pen/Kqyrxv?editors=0010 :) Whenever I change the cur_user property of a marker to 1 , it is successfully not shown on the map. However, when I change cur_user back to 0 , the marker is not display (which would be the desired behavior). My code looks as follows: //Store file

ReactJs入门教程-精华版

阅读更多关于 ReactJs入门教程-精华版

一、ReactJS简介　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 ReactJS官网地址：http://facebook.github.io/react/ Github地址：https://github.com/facebook/react 二、对ReactJS的认识及ReactJS的优点首先，对于React，有一些认识误区，这里先总结一下： React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式； React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component； React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作

error 'document' is not defined : eslint / React

阅读更多关于 error 'document' is not defined : eslint / React

问题 I'm building a React app, with create-react-app. I got the following error when running ESLint: 8:3 error 'document' is not defined no-undef. My app runs without error, but I got this ESLint error in 2 files. See one of those .jsx files and my ESLint configuration. index.jsx: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root'), ); eslintrc.js: module.exports = { "extends": "airbnb

Using styled components with props and typescript

阅读更多关于 Using styled components with props and typescript

问题 I'm trying to integrate typescript into our project and so far I stumbled upon one issue with styled-components library Consider this component import * as React from "react"; import styled from "styled-components/native"; import { TouchableOpacity } from "react-native"; // -- types ----------------------------------------------------------------- // export interface Props { onPress: any; src: any; width: string; height: string; } // -- styling ------------------------------------------------