Learn the fundamentals of JavaScript to make the React journey smooth.

Android Development with Ionic and React

Most of React comes down to JavaScript ES6 and its features and syntax. The fundamentals also include ternary operators, shorthand versions in the language, objects such as “this”, and JavaScript’s built-in functions (map, reduce, filter). It also includes general concepts such as composability, reusability, immutability, or higher-order functions. While we don’t necessarily need to master all these before starting with React, they will come up while practicing it, and learning these concepts will benefit us. 
This module will give us comprehensive JavaScript skills that will make our React journey smooth and straightforward.

JavaScript Fundamentals Before Learning React

What’s the best approach for​ teaching the JSX syntax for React newcomers? Usually, I start out with defining a variable in the `render()` method and using it as JavaScript in HTML in the return block.



import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


import React from 'react';

export default class App extends React.Component {
  render() {
  var greeting = 'Welcome to React';
    return (
      <div>
        <h1>{greeting}</h1>
      </div>
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

You only have to use the curly braces to get your JavaScript in HTML. Going from rendering a string to a complex object isn’t any different.



import React from 'react';

export default class App extends React.Component {
  render() {
    var user = { name: 'Robin' };
    return (
      <div>
        <h1>{user.name}</h1>
      </div>
    );
  }
}


Usually, the next question then is: How to render a list of items? That’s one of the best parts about explaining React in my opinion. There is no React specific API such as a custom attribute on an HTML tag which enables you to render multiple items in React. You can use plain JavaScript for iterating over the list of items and returning HTML for each item.



In this lesson,  we'll demonstrate how the map, reduce, and filter methods are used in JavaScript and applied in React.

Getting Started

Variables, Operators & Expressions

Functions

Classes

Modules

React

Appendix

Conclusion