React for Beginners #2 — Prepping for the Course.

In my last post I just talked about React and some of the concepts behind it. Going forward, I will be working on React For Beginners by Wes Bos highlighting the key things I learnt on the way. Consider this the applied version of the React Concepts discussed previously.

There are a couple of things I need to do in order to follow along with Wes’ Course:

• Node version 9.x.x (newer causes issues)
• React Dev Tools browser extension (google for either Firefox or Chrome). You can tell it is working by going to a site that uses react. There you can poke around and see how the components exist on the page.

There are also some package dependancies to install but a simple npm install will grab all of them. Let's have a quick over view of the dependancies in package.JSON:

• Stylus, for stying
• React-Scripts, performs transpiling of React to allow it to run. Makes getting starting alot easier but we can ‘eject’ from it later.
• Firebase, that is our database connection
• prop-types, used to be part of React but now is its own package. used for passing and formatting data.
• re-base, connects to Firebase
• React and React-dom, are the core react packages
• react-router-dom, montiors changes and allows URLs
• react-transition-group, provides sweet animations.

We will go over them in more detail when we need to leverage them. There is also a scripts section which does some of the initial setting up for using Create-React-App.

Tip: If the install goes wrong, its a good idea to delete the node modules folder.

Get the server running with npm start

There is alot of “just go with it” at this stage. Hopefully we can make sense of it going forward.

Umm… What are we making exactly?

So Wes’ course focuses on making a fish store, I have changed it slightly to make it a generic grocery store. Diverting a tiny bit helps me avoid ‘tutorial autopilot’

This app will consist of:

• A menu — Users can view select the item they want.
• This results in an order which shows what was ordered from the menu
• On the ‘back-end’ we have an inventory where we can Add and Edit items that appear on the menu.
• We have a store-picker that is a unique instance of the above, allowing multiple users to produce their own orders.

You can use index.js to write our components as long as we remember to refactor it out to its own file afterwards.

1. We import React (import React from 'react')
2. We make a class based StorePicker component
3. Add a render method that returns what we want to output.
4. Open public folder and open the HTML file to see where we are mounting the application, in this case, the target div has a class of main.
5. We import the render method from React DOM: import {render} from 'react-dom'
6. Add the render output after the component: render(<StorePicker/>,document.querySelector('#main'));
7. Once we are happy with it, we can export the component code to its own file

• Create a JS file in components, its a good idea to mirror the component name
• Cut out the class and paste it into the new file
• Import react in the component file.
• Export the component: export default StorePicker
• In Index.js import StorePicker, note that the path will be '.components/storePicker'

And there you go, that is the basic component making loop! Here is the finished Index.js file:

And here is the StorePicker component so far:

Using JSX to make the component do more than say ‘hey’

Now we have the component set up, lets look at how we can use it more practically. But there are some gotchas:

• className is needed instead of class. Class is used elsewhere in JSX.
• If you have a set of statement it could look messy so you might try to do it on a seperate line from return:
• This will fail as JS will add an invisible semicolon after the return. A workaround is to use brackets which forces it to leave the semicolon till after it has evaluated the brackets:
• A render method can only return one element. The element can have child elements but it doesn’t allow sibling elements. A workaround is to use a <React.Fragment> </React.Fragment> tag which lets us bundle up elements. Blank tags <> will be useful but coming soon...
• Comments are done via {/* Comment */}. The curly braces denote JS by the way. A comment counts as an additional element so be careful where you put it.

Anyhow lets make StorePicker into a more useful kind of form:

Styling for our first component

Styling components is quite an in-depth topic. We could add a link to a style sheet on the index.html and call it a day but we can be smarter.

Componentised CSS involves importing CSS that relates to a component so it is seperated. There is some debate on this but for now we can go for the easy route and import CSS on the Index.js:

import './css/style.css'

Create-React-App is smart enough to turn the CSS into a style tag so it will hot reload while we are developing our app.

In my next post I will talk about putting a bunch of react components together.