Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreLearn React by Building Real Projects
Rating: 4.1 out of 54.1(180 ratings)
11,229 students
Learn React by Building Real Projects
Be challenged and build a real web application
Created byJoe Santos Garcia
Last updated 8/2019
English
English [Auto],
What you'll learn
- Learn React
- Working with forms
- Filtering Data
- Breaking down layouts with components
Explore related topics
Course content
2 sections • 32 lectures • 7h 41m total length
- Setting Up Environment8:37
Set up your React project environment by downloading the starter kit, creating a projects folder, and installing node and gulp, then run npm run watch in Atom.
- This course is free because...0:16
- A quick peek under the hood8:23
Take a quick look under the hood of a React project by exploring folders, assets, public files, and how components live in JavaScript.
- My first Component12:40
Dive into react by building your first component and deleting boilerplate. Explore import react, class components, state, render, jsx, and the div id app.
- Different ways to create components5:10
- Attributes with jsx9:09
Learn how to add attributes in jsx, using id and className with strings or JavaScript expressions in curly braces, and conditionally apply classes when health below 55, and set src.
- Working with events9:31
Master handling events in React by wiring on click actions to update component state, decrease health by 25 per click, and bind methods in the constructor.
- Lets organize these components8:42
Organize a React layout by creating reusable components like the girl image and header, using a div-based structure with class names, floats, and inline styles, and prep for passing data.
- Passing Data through props14:26
Pass data and functions from a parent to child components using props, share state like health across components, and trigger updates and conditional rendering in a real React project.
- Setting up for the real estate8:45
Set up a real estate React project from starter files, install packages with npm, configure components, and run development with npm run watch.
- laydown the header17:38
Learn React by building real projects by constructing a header component for a real estate app, exporting it, and wiring logo and navigation links with color variables and CSS styling.
- Finish styling the header9:41
Finish styling the header by floating the logo left and applying padding with overflow auto. Create a pink register button with white text, no underline, and capitalized text for navigation.
- Laydown content area5:04
Lay down the content area by building a React section with two components, filter and listings, wiring imports and class names to render a real estate layout.
- Filter HTML14:36
Build a filter section for real estate listings using select boxes for neighborhood and house type, text inputs for price and floorspace, and checkboxes for extras.
- Style the filter section21:13
Style the filter section in a React project by creating a content area, updating class names, applying scss variables, padding, and a responsive 30% width with a 300px maximum.
- Laydown Listings Area34:41
Build a dynamic listings area in React by creating a search, sort by, and pagination structure, then render listing cards with image, address, price, and details.
- Style search bar and sort area17:30
- style the listing box part 120:01
Create and style a listing card in a React project, integrating image, title, price, and location, applying borders, shadows, gradients, and responsive sizing.
- Style the listing box part 232:39
- Style the listing box part 314:01
Style the listing box by adjusting padding, font size, and colors for price and location, building the listing view from scratch with css and bootstrap.
- Pagination6:38
Learn to implement a pagination with page numbers and active states, style with padding, centering, hover effects, and cursor pointer, then prepare to focus on the JavaScript logic.
- Creating dummy data16:03
- Loop our data18:53
Loop through listings data in a React app using map, pass data as props, render each listing with image, address, city, and price, and assign unique keys.
- Working with forms35:22
Learn how to build and manage real estate forms in React by wiring onChange handlers, managing state in a parent real estate form registry, and creating controlled inputs and checkboxes.
- Filtering by price and floor14:28
Create and bind a filter function in React to filter real estate listings by price and floor space, using min and max values to update state and show matching results.
- Filter by City17:35
Learn to build a dynamic real estate filter in React by city, neighborhood, home type, and bedrooms, with default values and camel case normalization to match listings data.
- Populating Data29:19
Populate forms data from listings by extracting cities, home types, and bedrooms, bind the results to state, and enable dynamic filtering via a popular action and props.
- Sorting Data15:15
Sort real estate listings by city, home type, bedrooms, and price using the sort method, on-change handlers, and default order settings to display lowest to highest or highest to lowest.
- Change Vies17:50
Manage a global state in React, pass it to listings, and render conditional views (box or long) based on user interaction while wiring a grid and binding handlers via props.
- Search functionality7:01
Create a simple city-based search that updates state with the input, converts text to lowercase, and filters listings by matching city text.
- More Videos Coming Every Day0:01
Will be adding more videos everyday
- Real Estate App Conclusion10:40
Requirements
- HTML
- CSS
- Javascript
Description
One of the most important projects for a developer is to build a real estate app because of so many different skills that are needed to create it. So for developers this is a must have for your portfolio. We go from learning how react works to building each component to filtering the listings.
Who this course is for:
- Any developer that is looking to learn react by building real apps