July 4

Hello, React World!

So I previously said that making a React Native app within the summer is over is my goal. I started with refreshing some of my JavaScript since I know how vital it is when it comes to React. Although I didn’t quite finish my little asteroids game, I feel like I reached my goal. And we are also already in July so it’s time to move on! For learning ReactJS I’m using Codevolution‘s ReactJS tutorial. It seems really good so far!

So, my goal is to create a React Native app, but the tutorials I found all recommended to learn ReactJS first, so that’s what I’m gonna do. For those that don’t know, ReactJS is an open-source JavaScript library created and maintained by FaceBook themself. It’s designed to specifically create User-Interfaces.

Obviously the first thing I have to do is to create a Hello World application! To create a React project I needed to first have Node.js installed. Next, I needed a code editor. I choose VS Code. I also installed a extension called “ES7 React/Redux/GraphQL/React-Native snippets” to get some nice shortcuts.

Now, to create a React project you just need to run “npx create-react-app hello-world” in VS Code’s terminal. Easy! To make our Hello World application, we just need to go into “src/App.js” and edit the code to this:

 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, React World!
        </p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

To run it, we just need to run “npm start” in our VS Code Terminal. This opens a browser window with our app. It also auto-refreshes the site anytime we make changes to our app.

And we are done!



Copyright 2020. All rights reserved.

Posted July 4, 2020 by Atle in category "ReactJS

Leave a Reply

Your email address will not be published. Required fields are marked *