Final Project due December 15 at 3:59pm (late deadline December 18 3:59pm ET slip days permitting)
There are a lot of different options for styling your app. You can write the CSS stylesheets yourself and import them into your React application or you can use a framework! Frameworks like MaterialUI, Bootstrap, SemanticUI have developed ✨ styled ✨ React Components for you to use easily! It's as easy as importing and using!
MaterialUI is a framework developed from Google for applying some default (Google-like) styling to your React components!
When using MaterialUI or really any framework, package, or external tool, you should first look at the documentation. The documentation usually gives you tips on how to install and use the package.
For MaterialUI, we see that we first need to install it since it's an external package. Run
Next, we also want to use the classic Roboto font and the documentation says we need to add this line
Let's first convert our input fields (the search bar and the checkbox) into MaterialUI. We can navigate to the components page of MaterialUI by clicking the hamburger icon (three lines) on the top left of the page and scrolling down to
We see that there is a
TextField component. On that page we can see several variations of
TextField and the code associated with it. There is also a
Checkbox component that can replace our original checkbox.
Adding these to the
SearchBar component in
FilterableProductTable.tsx, the final file looks like this:
Notice that we imported each component from
@material-ui/core before using it.
We apply the same methodology to converting the product table to MaterialUI. MaterialUI has several Table components that can replace the traditional HTML table elements we use in
Notice we also used MaterialUI's higher order component
withStyles to inject our own styles into
ProductCategoryRow. Customizing our own styles is a little bit tricky with a framework since the framework styles generally override our styles. MaterialUI recommends
withStyles for custom styles here. It also has some guides on using
withStyles with TypeScript since
withStyles passes the styles down as a prop
classes so we need to add that to our
React Native allows for cross platform mobile development using a webdev framework we already know--React!
React Native allows you to build UIs independent of the platform. Usually when developing an app you have to develop an Android version (using Java/Kotlin) and iOS version (using Objective-C/Swift) separately. React Native takes care of this conversion for you.
Since React Native is really just React, many of the same concepts (
props, React Hooks, etc) still apply to React. However, instead of HTML we have
Views. A view is the basic building block of UI in mobile development. Views can display images, hold text, handle user input, etc.
Some core React Native components are:
<View>: A container that supports layout with flexbox, style, some touch handling, and accessibility controls. Similar to a non-scrolling
<Text>: Displays, styles, and nests strings of text and even handles touch events. Similar to a
<Image>: Displays images like
<ScrollView>: A generic scrolling container than can hold nested components and views. Similar to a
<TextInput>: User text input field similar to
<input type="text" />.
- ... and you can also define your own custom components (and use those built by the community)!
React Native uses
Expo framework to develop, build, and iterate on iOS, Android and webapps. Expo provides a UI for you to view your changes and if you download the Expo app (Android, iOS) you can see those changes on your phone as well! After all, we're doing mobile development.
To start a React Native project run the following:
yarn expo init is similar to
create-react-app in that it generates boilerplate code for you.
As part of the demo we built the simple TODO list app from assignment 4 in React Native! The code is here:
yarn start, you should be taken to Expo where you can view your changes on your browser. On the bottom left, there should also be a QR code. If you download the Expo app and scan the QR code with your phone camera (Android, iOS), it should take you to the Expo app where you can see your application in mobile form!
This was a very cursory introduction to React Native. You can learn more by referring to React docs.
React Docs: https://reactnative.dev/docs/getting-started
Expo Docs: https://docs.expo.io/