React
React — Is a JavaScript library for building user interfaces.
It is maintained by Facebook and a community of individual developers and companies.
Can be used as a base in the development of single-page or mobile applications.
Create React App
Add React to a Website
React Without JSX
//with JSX
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
//without JSX
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.
Related concepts
React
→
- JSX
- Core Data
- PouchDB
- React Native Databases: Local React Native Databases
- Firebase
- React Native: React Native Databases
- React Native Databases: Server-side React Native Databases
- AsyncStorage
- React Native
- AsyncStorage: Usage with state manager
- Writing JavaScript: Using React
- React: Create React App
- React: Add React to a Website
- Components
- Add React to a Website: Step 1: Add a DOM Container to the HTML
- Add React to a Website: Step 3: Create a React Component
- React Elements
- React Elements: Rendering an Element into the DOM
- Handling Events: Passing Arguments to Event Handlers
- Components: Conditional Rendering
- Key
- Controlled Components
- The textarea Tag
- The file input Tag
- Context
- React.createContext
- Context.Provider
- Class.contextType
- Context.Consumer
- Error Boundaries
- React.lazy
- Fragments
- Fragments: Keyed Fragments
- Higher-Order Component
- Portals: Event Bubbling
- React Without ES6
- Components: Autobinding
- React: React Without JSX
- Web Components: Using Web Components in React
- Web Components: Using React in your Web Components
- React Without ES6: Mixins in React without ES6
- Ref
- Ref: Creating Refs
- Ref: Callback Refs
- Render Prop
- Render Prop: Using Render Props with React.PureComponent
- Flow Type Checker
- Flow type checker with React: Stripping Flow Syntax from the Compiled Code
- TypeScript: Type Definitions
- TypeScript with React: Using TypeScript with Create React App
- StrictMode: Identifying unsafe lifecycles
- StrictMode: Warning about deprecated findDOMNode usage
- The Diffing Algorithm
- The Diffing Algorithm: Elements Of Different Types
- The Diffing Algorithm: DOM Elements Of The Same Type
- The Diffing Algorithm: Component Elements Of The Same Type
- The Diffing Algorithm: Recursing On Children
- The Diffing Algorithm: Keys
- React Top-Level API
- React.PureComponent
- React.memo
- React Top-Level API: React.createElement()
- React Top-Level API: React.cloneElement()
- React Top-Level API: React.createFactory()
- React Top-Level API: React.isValidElement()
- React.Children
- React.Children: React.Children.map
- React.Children: React.Children.forEach
- React.Children: React.Children.count
- React.Children: React.Children.only
- React.Children: React.Children.toArray
- React Top-Level API: React.createRef
- React.forwardRef
- ReactDOM
- ReactDOM: render()
- ReactDOM: hydrate()
- ReactDOM: unmountComponentAtNode()
- ReactDOMServer: renderToString()
- ReactDOMServer: renderToStaticMarkup()
- ReactDOMServer: renderToNodeStream()
- ReactDOMServer: renderToStaticNodeStream()
- React DOM Elements
- React DOM Elements: dangerouslySetInnerHTML
- React DOM Elements: htmlFor
- React DOM Elements: suppressHydrationWarning
- TypeScript with React
- ReactTestUtils
- Shallow Rendering
- ReactTestUtils: Simulate
- ReactTestUtils: renderIntoDocument()
- ReactTestUtils: mockComponent()
- ReactTestUtils: isElement()
- ReactTestUtils: isElementOfType()
- Touchables
- Flow type checker with React
- Test Renderer
- Test Renderer: TestRenderer.create()
- Test Renderer: testRenderer.update()
- Working With JavaScript: React in Laravel
- Code Splitting
- PropTypes
- StrictMode