Your first component from a fresh create react app project

creat-react-app.md

What each file is actually doing

• /node_modules where your downloaded node module files go

• /public things in here are not compiled or minified by webpack (https://medium.com/@jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b)

  • favicon the icon that will appear in the tab of the browser

  • index.html this is our html template and react will inject the html code into the div with the id of root

  • manifest.json data for mobile phones if the site is used as an app or saved to the homepage, this can be changed

• /src where all your development files will go, files that will be compiled

• .gitignore the files that will be ignored by the version control tool, the . before the file means it is hidden to the OS so if you browse this folder in finder or something you won't see this file

• package.json json (javascript object notation) this is where the dependencies that will be required for the project and were downloaded then the creat-react-app command was run

• README.md md stands for markdown (which is a lightweight markup langauge used in the dev world for documentation), this is where any documentaiton for your project will go. You can keep everything if you want, or delete it and use it to make your own notes.

• yarn.lock there are two main package managers for javascript, npm (by default) and yarn, it gets a bit confusing because yarn downloads modules from the npm website some reason create-react-app uses yarn as it's package manager so there is a yarn.lock file

Create react app commands

(https://github.com/csepulv/electron-with-create-react-app/blob/master/create-react-app-readme.md#available-scripts)

npm start - Runs the app in development mode, automatically reload the page if there are any errors

npm test - launches the test runner using Jest

npm run build - builds a production ready app in the build folder

npm run eject - create-react-app comes with a configuraiton file that is hidden so if you want to customise that you have to run this command to be able to see the config, but once this command is run you can't go back

Creating your first component

• first let's see what our default create react app page looks like, run this in the terminal

$ yarn start

• a new tab should open up in your browser with the page, let's create our own fmuch simpler from scratch so you understand what everything is doing

• open up the src folder and delete everything inside it

• Create a new file called index.js

• In the first line of your new file write the following:

import React from 'react'

Here we import the main bits of react form our node_modules folder so state, props, components etc...

• Next, add this line below it

import ReactDOM from 'react-dom'

You're probably thinking what is react-dom, I thought we just imported React. Well we can't really explain what react-dom is without explaining what the DOM is in the first place.

A simple explation of the DOM is when yuor browser reads html it converts it into a tree structure of objects so that it can easily be manipulated by Javascript (https://www.w3schools.com/js/js_htmldom.asp). React DOM gives react access to this tree structure giving it the ability to render react code to the html.

React and ReactDOM used to be one package (back in 2015), but with the introduction of React Native the team at facebook decided to split the packages since the React Native isn't being output to the web it doesn't need ReactDOM.

Add this to line 4

ReactDOM.render(<h1>Boom!</h1>, document.getElementById('root'))

This line is a ReactDOM method called render() that takes two arguments, JSX or HTML on the left, and the element that the code should be inserted into on the right.

document.getElementById('root') is a native javascript code that gets an element in the DOM by it's ID in this case it is the root one which is line 28 in our index.html file.

Save this and your page should update with the word Boom in bold, congrats you've written some super basic react code.