Zum Hauptinhalt springen

Get started with React

If you are new to front end, or is your experience limited, this is a good place to start.

JavaScript and ES6+ concepts​

Anyone who wants to be productive with our React-based stack, needs to be up to speed on modern JavaScript, including many of the latest features of ES6 and beyond. This page provides an outline learning plan.

10 JavaScript concepts banner

For pointers to get you started, check out this article.

Use Code Pen to experiment and learn​

One of the best ways to learn is by doing. Code Pen offers a great environment to do that, where you can see the results of your code instantly.

Try code pen.

You can also try things using an editor, your browser, and its developer tools. We recommend Chrome Dev Tools.

Pluralsight courses​

Guidewire has an arrangement with Pluralsight, ask your manager for more information.

JavaScript tutorial​

See https://github.com/lukehoban/es6features for an excellent primer on ES6. Pay special attention to these concepts:

Node and the development environment​

Learn about the code management systems for React UIs.

Node.js​

  • We use Node.js for package management and keeping dependencies up to date. For basic concepts, read Getting Started with Node.
  • Node Version Manager (nvm) is great for keeping Node up to date and for switching between versions.
  • Node Package Manager (npm) is used to manage dependencies and other project settings.
  • Yarn is an alternative to npm. Facebook invented Yarn when their projects became too complex for npm. We have also adopted Yarn for Jutro development (but not for consumer apps yet).

Other essential development tools​

  • Webpack: The leading module bundler package that we use to bundle our JavaScript, CSS, etc. into a small set of assets to be sent to the browser. It also provides support for transpiling our ES6/7 JavaScript (using Babel) into ES5 and our SCSS files into CSS.
  • Babel: The leading transpiler that "dumbs down" modern code (JavaScript, JSX, etc.) into syntax that older browsers can understand.
  • ESLint: An open source, pluggable linting utility for JavaScript and JSX. We use it to ensure that our code conforms to a consistent standard, which makes our customers happy.
  • ESDoc: To generate developer documentation from source code comments. This tool works specifically with React and ES6+.

React basics​

You need some React basics, but you do not have to study all of the materials here.

Start with the free materials on the React website, or take the Pluralsight course. Later, when you want to review, try different sources to broaden your perspective.

React can't miss​

Now that you have the basics of React, make sure you did not miss the following concepts:

Debugging React​

Debugging a web application may be a little difficult sometimes, because you need to use a browser in the mix. We recommend this short article that provides a quick overview. Once you have that, we recommend this article which provides a little more technical detail and tips.

You may also like:

Testing​

We have an entire primer on Jutro testing for you.

React and friends​

This is a sample of important topics that tend to go with React. While the typical app developer will not need extensive knowledge in these areas, it's always good to know they exist.

Ways to stay up to date​