React practice

My first introduction to React was through an introductory Skillcrush course. We made a few projects using CodeSandbox. And since then, I’ve taken an intro Scrimba course. But I really wanted to learn to build a React app that was independent of online IDE’s.

So I’ve spent this weekend doing so. It takes a little prep. Fortunately, I already had node.js on my computer from an open-source contribution I made last year. I found this YouTube video by Devistry. The whole video takes about 20 minutes and he walks you through creating the app and a variety of basic concepts including using components and state.

I always like coding projects like this. Everything is kept simple and I comment out the previous code creating a “cheat-sheet” for my future self. 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import App from "./App";

//const element = <><h1>Hello world!</h1><p>yada</p></>; #2

//function Webpage() {
//  return <section><header><h1>Hello</h1></header><p>yada, yada</p></section>
//} #3

//function Webpage() {
//  const name = "Lisa Savoie";
//  return <><section><header><h1>Hello {name}</h1></header><p>yada, yada</p><//section><Clock /></>
//}
//function Clock() {
//  return <p>It's currently: {new Date().toLocaleTimeString("UK")}</p>
//} #4

//function Webpage() {
//  const name = "Lisa Savoie"
//  const date = new Date();
//  return <><section><header><h1>Hello {name}</h1></header><p>yada, yada</p></section><Clock time={date}/></>
//}
//function Clock(props) {
//  return<p>It's currently: {props.time.toLocaleTimeString("UK")}</p>
//} #5

//function Webpage() {
//  const name = "Lisa Savoie"
//  return <><section><header><h1>Hello {name}</h1></header><p>yada, yada</p></section><Clock /></>
//}
//function Clock() {
//  const [time, setTime] = useState(new Date().toLocaleTimeString("UK"));
//  setInterval(() => setTime(new Date().toLocaleTimeString("UK")), 1000);
//  return<p>It's currently: {time}</p>
//} //#6

ReactDOM.render(< App />, document.getElementById("root")); //#7 Components & multiple pages
//ReactDOM.render(< Webpage />, document.getElementById("root")); // #3,4,5,6
//#3 function, #4 function with a variable, #5 props, #6 State
//ReactDOM.render(element, document.getElementById("root")); #2 //Use a var
//ReactDOM.render("Hello world", document.getElementById("root")); only needs reactDOM, react allow JSX #1 //Just printing to the page
import React from "react";
import{BrowserRouter, Switch, Route} from "react-router-dom";

function App() {
  return <>
  <BrowserRouter>
    <Switch>
      <Route exact path="/">
        Home //can have different components creating different pages
      </Route>
      <Route path="/about">
        About Us
      </Route>

    </Switch>
  </BrowserRouter>
  </>;
}

export default App;

It might look a little busy but this is similar to the type of practice I wrote about here. Next, I’ll copy the project and recreate it expanding on the code, trying out some new ideas, maybe looking up some libraries to add something new. Eventually, I plan on creating something that I can upload to Heroku or Neflify.

If you’re interested in this type of practice, maybe give the tutorial on the React website a try. You’ll build a Tic Tac Toe game in Codepen. You might wonder the practicality of building a simple game but really it’s a fun way to learn.

Tomorrow I’m going to try writing React that will be compiled by the browser. They say it’s slower but I think it’s fun to see a language or framework from different angles.

Links to projects created through Skillcrush: