React (software): Difference between revisions

Revision as of 01:39, 18 June 2017

Revision as of 01:43, 18 June 2017

Line 43:

=== JSX ===

React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents.<ref>{{Cite web|title = JSX in Depth |url = https://facebook.github.io/react/docs/jsx-in-depth.html|accessdate = 2015-11-17}}</ref> This is a React-specific grammar extension to JavaScript like now defunct [[E4X]]. HTML syntax is processed into JavaScript calls of the React framework. Developers may also write in pure JavaScript. JSX is similar to another extension syntax created by Facebook for PHP, [[XHP]]. JSX looks like regular HTML. An example of JSX code -:

<syntaxhighlight>

import React from 'react';

Line 65 ⟶ 64:

Even though it is similar to HTML, there are certain aspects you need to keep in mind when working with JSX.

'';Nested Elements''elements

If you want to return more elements, you will need to wrap it in a single container element like the <code><nowiki><div></nowiki></code> element shown above.

'';Attributes''

If you want to return more elements you will need to wrap it in a single container element like the <div> element shown above.

You can add your own custom attributes in addition to HTML attributes. The custom attributes need to be added with '<code>data-'</code> prefix.

''Attributes''

You can add your own custom attributes in addition to HTML attributes. The custom attributes need to be added with 'data-' prefix

''Javascript Expressions''

Javascript expressions can be used inside JSX with curly brackets {}

'';Javascript Expressions''expressions

Javascript expressions can be used inside JSX with curly brackets <code>{}</code>:

<syntaxhighlight>

import React from 'react';

Line 93 ⟶ 88:

</syntaxhighlight>

The example above will render "11".

''Ternary Operators''

We cannot use if else statements inside JSX but we can use ternary expressions instead.

In example below browser will render 'true' because i is equal to 1.

;Ternary operators

We cannot use if elseif–else statements inside JSX but we can use ternary expressions instead.

In example below browser will render '"true'" because <code>i</code> is equal to 1.

<syntaxhighlight>

import React from 'react';

class App extends React.Component {

render() {

var i = 1;

return (

Line 116 ⟶ 109:

export default App;

</syntaxhighlight>

{{sect-stub | JSX syntax is very different thanfrom normal JavaScript, some examples should be provided, or a new article created with in-depth technical detail on how it works, how it compiles, etc... | small = yes | date= May 2017}}

=== Architecture beyond HTML ===