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.
- Tutorial: Intro to React
- Hello World (basic concepts)
- Getting Started (video course)
- React Fundamentals (video course)
- React Express: The all-in-one guide to modern React application development
Articles
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