Modern Front-End with React - Barcelona

About the Course: Building a Real-Life React App from the Ground Up

During this two-day long course, you will learn how to create a real-life React application from the ground up. On top of that, we will cover the principles behind React and learn how to design and structure complex front-end applications.

By the end of the training, you will be familiar with state management (Redux or MobX) and front-end routing, and you will be comfortable with bootstrapping, developing and scaling React applications.

This training is also available as an in-house, on-site opportunity.

In case you have any questions about the agenda or the on-site option, you can reach us at info@risingstack.com

This course is for you if

• you want to improve your front-end skills,
• you want to build application prototypes rapidly,
• you want to create complex and maintainable websites.

Prerequisites

• Prior HTML and JavaScript knowledge is required.

• Prior npm knowledge is nice to have as we will use it for package management and script execution.

• No prior experience with React is required - we will cover everything you need to get started.

The exact location of the venue in will be announced later.

Course outline

Day One:

1. React primer

• The basics of front-end apps
• What is React and when to use it?
• Introducing the virtual DOM
• The benefits of components
• ES6 and React

2. Setting up a React project

• Introducing create-react-app
• Introducing components
• Mounting an app
• Development and bundling

3. JSX and rendering

• What is JSX and how does it work?
• Introducing the render method and view updates
• When does render run?

4. Creating React components

• Introducing props and state
• Handling events
• Native state management and controlled components
• Lifecycle events and hooks

5. Project design and structuring

• Project structuring
• Stateful and stateless components
• Containers and presentational components

Day Two:

6. Complex state management with Redux or MobX

• Why is React’s own setState not enough?
• Actions and reactions
• Async actions and state changes

7. Networking on the client-side

• Handling async networking
• Updating the state

8. Routing with React Router

• Implementing basic routes and links
• Programmatic routing
• Protected routes and redirects
• Handling query parameters

9. Creating a real-world React app

• Rapid and maintainable development
• Quick test deployment with Now

Why learn from RisingStack?

We provide professional development, training and consulting services from the early days of Node, and help companies like Lufthansa, Cisco & LogMeIn to thrive with our favorite technology.

We've spent the previous 3 years with writing books, long-form tutorials & holding trainings. Our experts have written more than 150 articles on the topics of Node.js, Microservices & Front-End development. Our blog is one of the main resources Node developers turn to in trouble - this is why more than 150.000 engineers read our content each month.

RisingStack has been named as one of the leading Node.js companies of the Battery Open-Source Software Index in TechCrunch’s “Tracking the explosive growth of open-source software” analysis. We’re also part of the Node Foundation, and contributors to the core of Node.js.