Modern Front-End with React Training

%%%METAELEMENT
{
"name": "JumbotronData",
"props": {
"subtitle": "Become familiar with state management (Redux or MobX) and front-end routing, and get comfortable with bootstrapping, developing and scaling React applications.",
"illustration": "modern-front-end-with-react-training"
}
}

%%%METAELEMENT
{
"name": "TOC",
"props": [
{
"id": "thistrainingisforyouif",
"innerText": "This training is for you if..."
},
{
"id": "aboutthetrainingmodernfrontendwithreact",
"innerText": "About the training"
},
{
"id": "agenda",
"innerText": "Agenda"
},
{
"id": "signupforthetraining",
"innerText": "Sign up for the training"
}
]
}

This training 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.

Topics covered during this training

What is React and when to use it?
Setting up a React project
JSX and rendering
Creating React components
Project design and structuring
Complex state management with Redux or MobX
Networking on the client-side
Routing with React Router
Creating a real-world React app

About the Training: Modern Front-End with React

During this two-day long training, 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 regarding this training, or you’d like to invite our team to provide a training exclusively for your company, please reach out to us at [email protected] or click the "invite us" button and use the form!

Agenda

Day 1

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 2

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

Sign up for the training

%%%METAELEMENT
{
"name": "TrainingLocations",
"props": [
{
"href": "https://ti.to/risingstack/modern-front-end-with-react-berlin-2018",
"location": "Berlin",
"scheduled": "March 12-13, 2018",
"soldOut": true
},
{
"href": "https://ti.to/risingstack/modern-front-end-with-react-tel-aviv-2018",
"location": "Tel-Aviv",
"scheduled": "April 16-17, 2018",
"soldOut": true
},
{
"href": "https://ti.to/risingstack/modern-front-end-with-react-barcelona-2018",
"location": "Barcelona",
"scheduled": "May 17-18, 2018",
"soldOut": true
}
]
}

%%%METAELEMENT
{
"name": "Team",
"props": [
{
"image": "kadlecsik_tamas.jpg",
"name": "Tamás Kadlecsik",
"description": "Tamas Kadlecsik is the CEO of RisingStack and an expert on Microservices, Kubernetes and cloud-native technologies. Tamas has delivered more than 20 trainings in the past 3 years, and he's also a popular author:",
"blogposts": [
{
"url": "https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/",
"title": "Understanding the Node.js Event Loop"
},
{
"url": "https://blog.risingstack.com/mastering-async-await-in-nodejs/",
"title": "Mastering Async Await in Node.js"
},
{
"url": "https://blog.risingstack.com/node-js-mysql-example-handling-hundred-gigabytes-of-data/",
"title": "Node.js + MySQL Example: Handling 100's of GigaBytes of Data"
}
]
},
{
"image": "czibik_peter.jpg",
"name": "Péter Czibik",
"description": "Peter joined RisingStack as one of the first team members 5 years ago. He has been helping companies adopt Node.js via trainings, on-line seminars and inhouse consulting sessions. Check out his blogposts:",
"blogposts": [
{
"url": "https://blog.risingstack.com/nodejs-microservices-scaling-case-study/",
"title": "Serving Millions of Users in Real-Time with Node.js & Microservices "
},
{
"url": "https://blog.risingstack.com/consumer-driven-contract-testing-with-node-js-pact/",
"title": "Consumer Driven Contract Testing with Node.js & Pact"
},
{
"url": "https://blog.risingstack.com/node-js-native-modules-with-rust/",
"title": "Writing fast and safe native Node.js modules with Rust"
}
]
},
{
"image": "hodi_tamas.jpg",
"name": "Tamás Hódi",
"description": "Tamas Hodi is a key player at RisingStack in building infrastructures that can scale efficiently. When it comes to DevOps, microservices, AWS or Kubernetes he’s the one we listen to the most.",
"blogposts": [
{
"url": "https://medium.com/the-node-js-collection/how-to-build-and-deploy-a-cloud-native-node-js-app-in-15-minutes-7b540f7fde14",
"title": "How to Build and Deploy a Cloud Native Node.js App in 15 minutes"
},
{
"url": "https://blog.risingstack.com/case-study-nameserver-issue-investigation-using-curl-dig-trace-nslookup/",
"title": "Case Study: Nameserver Issue Investigation using curl, dig+trace & nslookup"
},
{
"url": "https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/",
"title": "Node.js Async Best Practices & Avoiding the Callback Hell"
}
]
}
]
}