Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to set React App full screen size for your application. This tutorial reviews CSS width and height settings for React apps. Utilizing flexbox, you will learn how to set the screen size for your React apps.
Subscribe https://bit.ly/3nGHmNn
This lesson is part of a Learn React tutorial series playlist:
https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
Project Source Code: https://github.com/gitdagray/learn_react_router
React CSS Width and Height Settings | React App Full Screen Size
(00:00) Intro
(00:05) Welcome
(00:33) App width problem
(01:12) Why is the width changing?
(01:56) Identifying the problem
(02:46) Providing a consistent app width
(05:13) Deciding between margins or full page width
(05:53) Importance of flex-grow setting
(06:28) Looking at app height
(07:15) App component flexbox settings
(07:40) Body element min-height setting
(08:22) App component height setting
(09:06) Main content component flex-grow
(09:57) Another way to center an element
React Router:
https://reactrouter.com
JSON-Server:
https://www.npmjs.com/package/json-server
ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Styled Components: https://styled-components.com/
References:
MDN Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=
Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven
Was this tutorial about Flexbox width and height settings for React apps helpful? If so, please share. Let me know your thoughts in the comments.
#react #width #height