Getting Started with React

​If you are new to front-end development, or if your experience is limited, beefing up on React is a good place to start before jumping into a Jutro project.

JavaScript and ES6+ concepts

Anyone who wants to be productive with Jutro, our React-based stack needs to be up to speed on modern JavaScript, including many of the latest features of ES6 and beyond. This blog provides an outline learning plan using some of our favorite tools here at Guidewire. This plan is how we onboard our own developers before they get started with Jutro.

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 using an editor, your browser, and its developer tools. We recommend Chrome Dev Tools.

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

  • let/const
  • Classes
  • Fat arrows
  • Template strings
  • Destructuring
  • Spread
  • Default parameters
  • ‘import’ module loader
  • Sets & Maps (WeakMaps)
  • Array operators => (map, reduce, filter, forEach, every, some)
  • Object.assign()
  • Object.keys()
  • Promises
  • ES7 Decorators

Node and the Development Environment

Learn about the code management systems for React UIs.

Node.js
  • We use Node.js for package management and for 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 don’t use Yarn yet, but we know it’s there.
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: Tool that generates developer documentation from source code comments. It works specifically with React and ES6+.

React and Friends

React Basics

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

Articles

Simple React Patterns

Friends of React

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.

React Router

Get familiar with React Router.

Ways to stay up to date

Get updates for Guidewire developers delivered right to your inbox.
Get updates for Guidewire developers delivered right to your inbox.

Featured Resources

Guide
Get started with the Guidewire Payments API with this QuickStart guide written by our Engineers for Guidewire developers.
Article
How to reuse complex fragments across metadata files with the codeless component feature of Guidewire Jutro.

Featured Blogs

Blog
Welcome to the new Guidewire developer blog. Start here to learn about new skills, features, and tools to help you master your projects.
Blog
Sr. Director of Product Management, Chris Vavra unveils new and future capabilities that make Guidewire integration projects simpler, faster, and easier.

Featured Guides

Use Case
Want to build beautiful and engaging digital experiences for Guidewire? This page has everything you need to get started.