Abstract

On the surface, React may look like just a view library, but there is big ecosystem that revolves around it. This workshop starts with understanding the basic internals of React before exploring how to “think in React”, best practices and solutions to real problems that you will experience while building an application.

Learn React the right way from the industry experts.

Who is this workshop for?

This workshop is suitable for all the people who want to get a hands-on experience on the most thriving framework of 2018. At the end of this workshop you would be able to create your own React.js application.

Requirements

• A laptop with node >=6 and npm >=4
• Install a demo project with create-react-app
  • Project name = react-workshop
  • Visit this link for detailed steps https://github.com/facebook/create-react-app

Duration: 5 Hours

Outline:

Chapter 1

Technically, it’s possible to write a React app without the latest version of JavaScript, but it won’t be easy. We’ll learn the good parts that make it easier to write maintainable code with React. Let’s also find the reason behind React’s popularity, what makes it so good?

• ES6
• Fundamental concepts of React
• Virtual DOM
• Thinking in React

Chapter 2

Learning the methods of React is important, but useless without learning how to “Think in React”. Let’s understand the patterns that make your components extremely reusable and your application more declarative.

• Stateless components + JSX
• Props
• Stateful components
• Lifecycle methods

Chapter 3

Though you can build your application with the above features, React offers us some additional amazing features which comes pretty handy when you actually create a real life application. We will cover HOW & WHEN to use these amazing concepts.

• Context API
• React Portals
• Error Boundaries
• React Fragments
• Higher Order Component (HOC)
• Render Props

Chapter 4

Let’s take things to the next level and explore how to build real world applications that handle state and deal with data. If you have heard of state management libraries like redux or mobx, you’ll learn how and more importantly when to use them to get the maximum benefit.

• Routing
• State management
• Data fetching
• Redux
• Alternatives to Redux