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 are Components?
Components are simply the building blocks that make-up what a website looks like. For example, [Facebook's like button](https://www.npmjs.com/package/react-facebook) is a component. Let's try to code up a component.


import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div> This is a component </div>
    );
  }
}


import React from 'react'; // import the React library
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, // Use the component
  document.getElementById('root')
);


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

# Explanation:

*Line 1* of the index.js file imports the React library; this allows you to use all the functionality and features of React. Revisit the [modules](https://www.educative.io/courses/javascript-fundamentals-before-learning-react/modularity-import-export-in-react) chapter if you want a refresher on how this works.

*Line 3* of the app.js file creates a default export `App` class that inherits the `React.Component` class, again if any of these concepts are unclear, revisit the [class inheritance lesson](https://www.educative.io/courses/javascript-fundamentals-before-learning-react/class-inheritance).

*Line 4* is the `render()` function. That is what displays the content onto the screen. That’s why the render() method is mandatory in React class components: The React Component from the imported React package instructs you to use it for displaying something in the browser.
Furthermore, without extending from the React Component, you wouldn’t be able to use other [lifecycle methods](https://www.educative.io/courses/javascript-fundamentals-before-learning-react/react-component-syntax) including the `render()` method. For instance, there wouldn’t be a `componentDidMount()` lifecycle method, because the component would be an instance of a vanilla JavaScript class. And not only the lifecycle methods would go away, but React’s [state methods](https://www.educative.io/courses/javascript-fundamentals-before-learning-react/react-component-syntax) such as `this.setState()` for local state management wouldn’t be available as well. 

Right now, a simple 'This is a component' would get printed. Now to actually *use* your component, write the name of your component in tags as on *line 8* of the index.js file, yep, this is just like HTML! This makes your components reusable anywhere on your website.

However, as you have seen, using a JavaScript class is beneficial for extending the general class with your specialized behavior. Thus you can introduce your own class methods or properties. For example, in the following, we add a `getGreeting()` method as on *line 4* in the app.js file and render it with the `this` notation on *line 11*. Also notice that the `render()` function only returns *one* JSX/HTML element which is usually the `<div> ... </div>` element. Everything has to be nested within it. If you try to return more than one element, you'll get an error.

All React websites are made up of components and this lesson gives an overview of how a basic React component is made.

Getting Started

Variables, Operators & Expressions

Functions

Classes

Modules

React

Appendix

Conclusion

React Class Components

What are Components?

Explanation: