---
title: "Getting Started with React"
url: "https://www.guidewire.com/de/resources/blog/developers/getting-started-with-react.md"
language: "de"
locale: "de"
---

# Getting Started with React

2020-11-12T00:00:00Z

## Getting Started with React

### Developers

![logo - React](https://edge.sitecorecloud.io/guidewiresodb06-guidewire0f2e-productioncd91-5186/media/images/resources/developer/developer-blog/dev-blog-logo-react.png)

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](https://codepen.io/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](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](https://nodejs.org/en/docs/guides/getting-started-guide/).
- [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm/blob/master/README.md) is great for keeping Node up to date and for switching between versions.
- [Node Package Manager (npm)](https://docs.npmjs.com/about-npm/index.html) is used to manage dependencies and other project settings.
- [Yarn](https://classic.yarnpkg.com/en/docs/getting-started) 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](https://webpack.js.org/): 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](https://babeljs.io/): The leading transpiler that “dumbs down” modern code (JavaScript, JSX, etc.) into syntax that older browsers can understand.
- [ESLint](https://eslint.org/): 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](https://esdoc.org/): 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.

- [Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)
- [Hello World (basic concepts)](https://reactjs.org/docs/hello-world.html)
- [Getting Started (video course)](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents)
- [React Fundamentals (video course)](https://app.pluralsight.com/library/courses/react-fundamentals/table-of-contents)
- [React Express: The all-in-one guide to modern React application development](http://www.react.express/)

## Articles

[Simple React Patterns](http://lucasmreis.github.io/blog/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](https://reacttraining.com/react-router/web/guides/quick-start).

Ways to stay up to date

- [React newsletter](http://reactjsnewsletter.com/)
- [Facebook react blog](https://facebook.github.io/react/blog/)
- [React Digest](https://reactdigest.net/)

## Stay in the Know

Get updates for Guidewire developers delivered right to your inbox. [Subscribe!](/de/developers/developer-resources/developer-newsletter)

[See More Articles](/de/resources/blog)

## ""

[See All](/de/)