Loop through arrays in ReactJs

.map is ES6 feature and used with array; it returns a new array with the results of calling a function for every array element.

'key' attribute is used to uniquely identify elements.

Example:

import React from 'react';

const names = ['John', 'Doe', 'Jenny', 'Marie'];

function App() {

  return (

    <div className="App">

      <ul>

          {names.map(function(name, index){

              return <li key={ index }>{name}</li>;

          })}

      </ul>

    </div>

  );

}

export default App;

Result:

ReactJS - JSX

JSX has a XML/Html like syntax that is why it is called JavaScript syntax extension or JavaScript XML.  

JSX is written into JS file and to convert JSX code into browser's understandable code, babel is required.  

JSX is the alternative of React.createElements.

JSX is not required to use but it’s recommended because it makes applications to work efficiently and code looks more elegant.

Example:

return (

    <div className="App">

       Boilerplate App

    </div>

  );

 And Babel will transform it into this:

React.createElement("div", 

         { className = ‘App’}, "Boilerplate App"

);

As JSX uses ES6 standards of JavaScript, Babel transpile ES6 code into ES5 JavaScript code at runtime so that all the browsers can run the application.

In render function, we specify the HTML output of React component. Because JSX is JavaScript so that we can’t use JavaScript reserve words such as “class” and “for”. We use “className” and “htmlFor” respectively.

To represent nested elements inside render function we need to wrap it with one top-level container element. 

For e.g:

 return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Boilerplate App

        </p>

      </header>

    </div>

  );                                           

Expressions in JSX

Expression in React is same as Angular, we write the expression inside curly braces { } and JSX returns the result of expression. Expression can be anything like variable, property or other JS validation.

For example:

const _element = <h1>Evaluate {9 + 5} expression with JSX</h1>;

Attributes in JSX

JSX tags also have attributes, tag names, and children. It uses camelCase naming convention for attributes such as className. We can add custom attributes in JSX by using ‘data-‘ prefix.

<p data-testattr="testValue">

    Boilerplate App

 </p>

Styling in JSX

Inline styling is achieved in JSX by using camelCase syntax. React automatically adds “px” after number value.

Example:

const myText = {

  paddingTop : 10,

  fontSize: 100,

  color: '#FF0000',

  border: '1px red solid'

}

function App() {

  return (

    <div className="App">

        <p style={myText}>

          Boilerplate App

        </p>

    </div>

  );

}

export default App;