Overview
This course provides participants with a comprehensive hands-on guide to build maintainable, high-performing web application user interfaces using the React JavaScript library. In this course, participants will learn to solve common problems when building complex apps. This will further help them for building the visuals for such apps.
What You'll Learn
- Build your first React app
- Create components to define parts of your UI
- Combine components into other components to build more complex UIs
- Use JSX to specify visuals without writing full-fledged JavaScript
- Deal with maintaining state
- Work with React’s way of styling content
- Make sense of the mysterious component lifecycle
- Build multi-page apps using routing and views
- Optimize your React workflow using tools such as Node, Babel, webpack, and others
Curriculum
- Old school multi-page design
- New school single-page apps
- Meet React
- Automatic UI state management
- Dealing with JSX
- Getting your React on
- Displaying your name
- It’s all still familiar
- A quick review of functions
- Changing how we deal with the UI
- Meet the React component
- Creating a hello, world! component
- Specifying properties
- Dealing with children
- Displaying some vowels
- Styling React content using CSS
- Styling content the React way
- Creating a style object
- Actually styling our content
- You can omit the “px” suffix
- Making the background color customizable
- From visuals to components
- Creating the components
- The card component
- The square component
- The label component
- Passing properties, again!
- Why component composability rocks
- Conclusion
- Problem overview
- A detailed look at the problem
- Meet the spread operator
- Properly transferring properties
- Conclusion
- What happens with JSX?
- JSX quirks to remember
- You can only return a single root node
- You can’t specify CSS inline
- Reserved keywords and classname
- Capitalization, HTML elements, and components
- Your JSX can be anywhere
- Conclusion
- Using state
- Getting our counter on
- Optional: The full code
- The example
- Your JSX can be anywhere
- Dealing with arrays in the context of JSX
- Listening and reacting to events
- Starting point
- Making the button click do something
- Event properties
- Doing stuff with event properties
- More eventing shenanigans
- Listening to regular DOM events
- The meaning of this inside the event handler
- React…Why? Why?!
- Meet the lifecycle methods
- See the lifecycle methods in action
- The initial rendering phase
- The updating phase
- The unmounting phase
- Conclusion
Meet refs
- The example
- Building the app
- Displaying the initial frame
- Displaying the home page
- Interim cleanup time
- Displaying the home page correctly
- Creating navigation links
- Adding the stuff and contact views
- Creating active links
- Getting started
- Creating the UI
- Creating the functionality
- Initializing our state object
- Handling the form submit
- Populating our state
- Displaying the tasks
- Adding the finishing touches
- Meet the tools
- It Is environment setup time!
- Setting up our initial project structure
- Installing and initializing Node.js
- Installing the react dependencies
- Adding our JSX file
- Going from JSX to JavaScript
- Building and testing our app
Who should attend
This is an introductory-level React development course, designed for basic-level web developers that need to further extend their skills in modern web development.
This course is highly recommended for:
- JavaScript/React developers
- Lead React developers
- Java developers who need to use React
- Full stack developers
Prerequisites
Participants must have current, hands-on experience in developing basic web applications, and be well-versed in HTML5, CSS3 and JavaScript basics. They should have skills equivalent to or should have recently attended the Introduction to HTML5/CSS3 and JavaScript course.
