Learn how React works and what you can do with it. Get started with writing and running React code.

React for Front-End Developers

Learn how React works and what you can do with it. Get started with writing and running React code. Get familiar with the intricacies of React. Start making use of the full extent of its capabilities.

The Road to React: The one with Hooks

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.

Fundamentals of React

React Legacy

Styling in React

React Maintenance

Fun Challenges

Map, Reduce & Filter in React