If you know JavaScript and HTML, you’re already half way there. React uses a hybrid of the two called JSX. JSX is translated into readable HTML/JavaScript (readable for your browser) with Babel.
To begin your new react app, simply type the following into your terminal.
After opening your new creation run ‘NPM Install && NPM Start’ in the terminal. You should get a screen that looks like this, and now the fun beings.
Think of your react app this same way you would an index. HTML file in vanilla JS. This time you can write JavaScript in the HTML as long as you surround it with curly braces.
First let’s go over how to construct your functional components. We must always start by importing React from ‘react’ at the top of every component. Then we write it out the same way we would a JavaScript function using fat arrow syntax. Starting with const FunctionName = variables (in this case called props)=> curly brackets, where in which we return out HTML with embedded JavaScript. Our last line should always read export default FunctionName.
Now we’ll take a look at a slightly longer class component. As you can see we again have to import React from ‘react’, this time I’m importing { Component } from react. As you can see below, this time we are importing Link from react, styles for our HTML and ItemEdit, which is another component we will reference in the body of our JSX. If you’re coding along with this feel free to change your App.js component to a class component.
Going a little deeper this time, after we announce our class component we can call state. State stores information for us that can change when our client interacts with events. I am sure the reader is very familiar with events in JS, the events in React are only slightly different. As you can see on like 14 and 16 I have set up two events. Both events change state slightly and alters our JSX render. Another thing that is different with our class component is that instead of just having a return, we use render() and then curly braces, then return before writing our JSX.
Reviewing the below component, from line 27–31 we have outlined variables that change depending on our backend data. As you can see our variables are all sent under the word props. So on lines 36, 37, 39 and 40 we are calling this.props before the variable we need. Please note, on line 36 we are not only using Link to direct our browser to a different route, we are also using an onClick event to change something in state.
To create routes we first need the below import { Route, Switch } from ‘react-router-dom’ on our main component.
We can then specify our routes in that component with the following syntax. As you can see starting on line 230 we declare a switch statement, this way our router knows we cannot be on all the pages at once. So when we are listing out our routes we have to write them from most to least specific. First we tell the Route what path to use, then inside of render with curly brackets we make a blank function calling out a component. This component will be what shows up when that path is being utilized.
Remember all the components we call in our routes must be imported at the top, as always. This can get pretty messy if you’re working on a large scale project, but it is definitely more organized than vanilla JS.
Now try it out yourself and have fun!!
