Getting Started in React.js
You might have heard of React.js, a powerful JavaScript framework used to make various web applications. Some of the biggest websites and applications are made using React.js and you may not even realize it. Some of these web applications are— Instagram, Facebook, Kahn Academy, Codecademy and New York Times.
Many more applications are made with React, but those are a few you might know of or even used. You might be wondering — how do I get started? What should I learn first?
Well, in this article I will help you get started with your first React App. First, you’ll need to install Node onto your computer. There will be simple steps and documentations after a single Google search, go ahead and do that before I continue…
Now that you have Node installed onto your computer, go into your Mac Terminal or Windows Command Prompt.
For this tutorial I will be using a Mac. First I will enter: npx create-react-app <app-name>
Now, it will automatically the dependancies for your React app, and upon entering that command, you will see something along the lines of this:
Once you dependencies have installed, change your directory to the new app (cd <app-name>). Then once you’re in the new app’s directory, run “npm start.”
Upon entering that command, your app will open up in your main browser. It should look something like this:
Now comes the interesting part — actually creating your app.
Open up your React App in your text editor (I will be using Visual Studio Code).
Upon being created, your React app should look like the photo above. It has a public folder — this holds your index.html page (the html page that will hold all of your pages), your window icon named favicon.ico (to change this, name another file favicon.ico and replace this in the public folder, right now the icon is a simple React icon), a JSON file called manifest.json (this holds any current React App dependancies upon first creating the app), and some other files you won’t need to worry about right now.
Your React App will also have another folder called node_modules, this will hold any of the React App dependancies you have now. When you install a new module (such as using npm install react-router-dom), it will be written to this file. Do not manually change anything in this folder for now.
The last folder you should worry about right now is your src folder. It will the code that makes your app what it is. It has an index.js file, an App.js file, some CSS files used within your app, and other files you will use later. For now, look inside of your index.js file. It should look like this:
For now, this file will remain the same. It simply imports the dependancies, such as React, ReactDOM, your index.css file, your App.js file, and uses these things to render your App.js file to your index.html page’s DOM(in your public folder).
Now, your App.js file should look like this:
As the index.js file did, it imports React, it also imports the logo your React App came with, and the App.css file.
You can use either Function notation or Class notation for your App Component. The original App.js file you have is in function notation. It is simply rendering the things you see on your browser from here. I will turn this into Class notation and delete the current things being rendered so my App will look like this.
After doing this, my App now looks like the photo above. As you can see, it is a subclass of a React Component. This means that the App is a Component (is a part of your whole app). Then, at the bottom, you can see that there is a line saying export default App. What does this mean? It means it exports the component so that other components can use it, such as you saw, the index.js file imported it and used it.
Now the render(){return()} lines are rendering the App to your index.html file, and returning some JSX, which stands for JavaScript XML. Basically it is HTML that includes JavaScript, to include JavaScript you will need to put {}. That way the App knows that code within the brackets is JavaScript code. As in my App, I did this to write a comment above.
Now that you know how to create and begin your React App, I will add some basic code to render onto my index.html page.
After adding some code, my App.js file looks like this. It simply renders today’s date with the JavaScript Date class. I use an arrow function to get today’s date and return it, then calling it in the <h1></h1> tag being rendered by the App Component. After adding that code, the app being rendered in my browser will look something like this:
Now you know the basic tools to get started with your own React App!
Here is a link that may also help you get started with creating your app: https://reactjs.org/tutorial/tutorial.html
Good luck on your journey to learning React.js and creating your own web applications! I hope you found this article useful. Check out my Medium profile for more useful articles!
