Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

esprima.tar.gz

test

After teaching React extensively (33.000+ students), be it online for a larger audience or on-site for companies transitioning to web development and React, I always come to the conclusion that React is all about JavaScript. Most of it boils down to JavaScript ES6 and beyond features and syntax, but also ternary operators, shorthand versions in the language, the 'this' object, JavaScript built-in functions (map, reduce, filter) or more general concepts such as composability, reusability, immutability or higher-order functions. While you don’t need necessarily to master all of these before starting with React, they will come up while practicing it and so to learn them will put you at a great advantage. 

This course is my attempt to give you comprehensive JavaScript skills that will make your React journey smooth and straight-forward.

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

Map, Reduce & Filter in React