blog.md

In our 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.

Initial Set up

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.

Steps to make our first component

You can use index.js to write our components as long as we reemmber 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 compoment: 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:

https://gist.github.com/6e861e537412d70bddcb8974519257bf

And here is the StorePicker component so far:

https://gist.github.com/3c7c53d65cef4c2652ec04efdc8739be

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:

  return 
  <form>Etc</form>
  <p> more stuff</p>

  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:

  return (
  <form>Etc</form>
  <p> more stuff</p>
  )

• 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. It counts as an additional element so be carefuol where you put it.

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

https://gist.github.com/c532adba79efd9cb7d72e5aa092ffc42

Styling for our first component

Styling components is quite an in-depth topic. We could add a link to a stylesheet on the index.html.

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 a middle way 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.