Today, we’re going to make a basic website with the React JS framework and Firebase Authentication. This is the first part.

 

We’re going to install npm at the node website. Click the latest version of node; npm will come with it. Go to downloads and find the installer package. Then go through the steps of installing it.

 

Once you’ve finished installing node, open terminal and type cd Desktop. The cd stands for change directory. Directory means folder. Now you are in the Desktop folder.

 

Then type npx create-react-app {YOUR-APP-NAME-HERE}. That will create your react app. You should see something confusing and a bunch of bars.

 

After the command has been run, type:

cd {YOUR-APP-NAME-HERE}

npm start

 

That will change your directory (cd {YOUR-APP-NAME-HERE}) and run the code (npm start). A website will appear in your default browser, we will come back to it later but it is you code being run. Open VS Code, also known as Visual Studio Code, and change its folder directory by dragging your folder in the icon on the hot bar at the bottom. That will open VS Code.

 

Our folder explorer will look like this:

node_modules

src

  |-App.js

  |-index.js

  |-logo.svg

  |-App.test.js

  A bunch of other stuff

public

.gitignore and stuff

 

There will be a bunch of stuff in the folder also like .gitignore. Do NOT pay attention to those.

 

Open src/App.js. Then change its code to this:

____________________________________________________________________

 

// This is importing ReactJS

import React from ‘react’;

 

// This is creating a React function called App

const App = () => {

  return (

    // This is creating a container. It is also the HTML that React will render

    <div>

      {/* This is displaying a big message that says “Hi!” In bold */}

      {/* That </h1> tag is ending the big bold message */}

      <h1>Hi!</h1>

    {/* That </div> is ending the container that holds what React will render*/}

    </div>

  )

}

 

// This is making sure that OTHER files can view this file

export default App;

____________________________________________________________________

Now hold down Command + S and return to the webpage that appeared when we first typed npm start. You will see a message that says “Hi!”. You created a website. Now if you like this and want it to be your website, go to terminal and type npm run-script build, that will generate the code in a folder called build. You can publish that to something like GoDaddy and your website will say “Hi!”, but what fun is a website like that? Google “Firebase Auth” which is fancy for “Firebase Login & Logout”. Click on the Firebase website and sign into Google. Google owns Firebase. Then in the top right corner click “Go to Console”.

Once the page loads, create a new project and name it whatever you want. Once it asks if you want Firebase Analytics, say no. That will create your project. You should have to wait for a bit, but when it’s finished, click the continue button. Then find the create a new project and choose the button that looks like </>. That is the symbol of a website. Name it the name of your project and then click next. It should display a bunch of code. Copy (Command + C) the code between the <script> tag and click continue. Then find the authentication tab in the sidebar on the right side of the page. Click on it. Then click enable sign in method and choose Email and Password. Click on both of the switches and click done. Then head back to the code. We finished setting up Firebase Authentication.

 

END OF PART 1